📌 1단계 : mysql을 이용해 json데이터 생성하기
1. 유저 생성
mysql의 WorkBench - root (제일 상위)에 아래 구문 작성
create user web identified by 'pass';
create database webDB;
grant all privileges on webDB.* to web- 유저이름 web, 비밀번호 pass로 지정
- db이름 webDB
- web유저에게 webDB의 모든 권한 부여 (grant는 DCL문이다)
2. web connection 생성
- 홈(mySQL Connections)으로 가서 +버튼으로 새로운 커넥션 생성, 유저 이름은 위에서 만든 web으로 설정한다
3. 테이블 생성
use webDB- webDB 스키마를 더블클릭 하거나 위와 같은 구문을 작성해서 db를 선택해 준다.
create table users(
uid varchar(20) not null primary key,
upass varchar(20) not null,
uname varchar(20) not null,
address varchar (200),
phone varchar(20),
photo varchar(200),
join_date datetime default now()
);
desc users;- create (DDL문) 명령어를 사용해서 users 테이블을 생성하고 각각의 칼럼을 지정해 준다.
- pk는 중복되지 않는 uid로 지정, 날짜는 default값으로 현재 날짜+시간이 들어간 now()로 지정
- 테이블 생성 후 desc로 확인한다.
insert into users(uid, upass, uname)
values('user01', 'pass', '홍길동');
insert into users(uid, upass, uname)
values('user02', 'pass', '강감찬');
insert into users(uid, upass, uname)
values('user03', 'pass', '심청이');
insert into users(uid, upass, uname)
values('user04', 'pass', '이순신');
select * from users;- insert into~values 구문을 사용해서 각각의 칼럼에 알맞은 데이터를 삽입한다. ( not null 설정한 컬럼 필수)
- select 구문으로 테이블의 데이터를 조회하면 아래와 같은 결과가 나온다.
📌 2단계 : node.js로 백엔드 서버 구축
[ 프로젝트 생성 & DB연결 ]
1. node 프로젝트 생성 - cmd창(명령프롬프트)
cd c:/data/node
express -e ex01 (프로젝트명)
- c드라이브에 있는 node 폴더 지정해서 ex01 프로젝트 생성
- 생성 후 dir/w 명령어를 입력하면 해당 폴더에 존재하는 모든 파일명을 볼 수 있다.
2. 모듈 설치 - vscode의 터미널
npm install
yarn add mysql
yarn add multer
3. 포트 변경하기
bin폴더 - www파일- port
3000번으로 지정되어 있는 부분을 아래와 같이 5000으로 수정한다. (3000번은 react에서 프론트로 출력하기 위한 포트로 사용)
4. mysql을 연결하기 위한 db.js파일 생성
var mysql = require('mysql');
var con;
exports.connect = function () {
con = mysql.createPool({
connectionLimit: 100,
host: 'localhost',
user: 'root',
password: '1234',
database: 'webdb'
});
}
exports.get = function () {
return con;
};
5. app.js에서 db연결
const db = require('./db')
db.connect();- 이를 통해 db객체를 이용하여 데이터베이스에 접근할 수 있다.
6. node.js서버 구동 - 터미널에 아래 명령어 입력
nodemon
7. 접속확인
- URL에 http://localhost:5000 을 입력해 들어가 보면 위와 같은 페이지가 뜬다. 그럼 연결 성공!
- 에디터를 닫으면 서버가 종료되므로 창을 열고 사용하거나 cmd창에서 해당 프로젝트 선택후 npm start로 서버를 켜준다 (종료X)
[cmd프롬프트창]
cd c:/data/node
cd ex01
npm start
[ 프로젝트 생성 & DB연결 ]
routes폴더 - users.js 선택
var db = require('../db');- db에 연결하기 위해 만들어둔 db파일 require 해 객체에 담아 사용한다.
1. 사용자 목록 출력
router.get('/', function(req, res, next) {
var sql = 'select *, date_format(join_date,"%Y-%m-%d %T") fmt_date from users order by join_date desc'
db.get().query(sql,function(err,rows){
res.send(rows);
})
});- users.js의 주소는 app.js에서 자동으로 "http://localhost:5000/users" 로 지정되어 있다.
- 목록 출력을 위한 sql문을 작성한 다음 객체에 담아 db.get( ).query 로 쿼리를 실행한다.
- res.send로 쿼리 결과(rows)를 json형태로 출력한다.
📌 3단계 : react로 프론트 페이지 생성
※ vscode를 새창으로 새로 열어 react를 작성한다. (node.js 파일을 종료할 경우 port 5000번 서버가 구동되지 않음)
[ 프록시 설정 & 라이브러리 설치]
1. react 프로젝트 생성 - cmd창 명령프롬프트
cd c:/data/react
yarn create react-app ex01(프로젝트명)
2. 라이브러리 설치 - vscode 터미널
yarn add axios
yarn add react-router-dom@5.3.0
yarn add bootstrap-bootstrap
- axios 설명 바로가기 , react-router-dom 설명 바로가기
3. 프록시 서버 할당
- package.json 파일에 위와 같이 작성해서 node.js에서 지정해 둔 5000번 포트를 할당해 준다.
- react 서버를 종료한 뒤에 작성해야 되고 서버 실행 시 포트 수정이 반영된다.
4. 서버 구동
yarn start
5. 라우터 설정
import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);- index.js에서 app을 BrowserRouter로 감싸 라우터를 사용할 수 있도록 해준다. (react-router-dom에서 import 해야 쓸 수 있다)
6. 부트스트랩 (css) 사용 설정
import 'bootstrap/dist/css/bootstrap.min.css';
- app.js의 상위에 bootstrap css를 import 한다.
[ 부트스트랩 이용한 메뉴바]
1. 함수 및 라이브러리 import - 사용법 참고 사이트 클릭(리액트 부트스트랩)
import axios from 'axios';
import React, { useContext, useEffect } from 'react'
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import { Link, withRouter } from 'react-router-dom';
import { UserContext } from './UserContext';
2. NavBars - 참고 사이트 클릭
const HeaderPage = ({history}) => {
const {user,setUser} = useContext(UserContext);
//유저 정보 가져오는 함수
const getUser = async() =>{
const result = await axios(`/users/${sessionStorage.getItem('uid')}`);
setUser(result.data);
}
useEffect(()=>{
getUser();
},[sessionStorage.getItem('uid')])
const onLogout = () =>{
sessionStorage.removeItem('uid');
setUser(null);
history.push('/');
}
return (
<>
<img src="https://product-image.kurly.com/cdn-cgi/image/quality=85/banner/main/pc/img/e6bbfa0b-004d-4b9c-923b-02c4521af50d.jpg" style={{width:'100%'}}/>
<Navbar bg="dark" variant="light">
<Container>
<Nav className="me-auto">
<Link to='/'>Home</Link>
<Link to='/users'>사용자목록</Link>
{user ? <Link to='#' onClick={onLogout}>로그아웃</Link> : <Link to='/login'>로그인</Link>}
{ (user && user.uname) && <Link to='/mypage'>{user.uname}님</Link>}
</Nav>
</Container>
</Navbar>
</>
)
}
export default withRouter(HeaderPage);
3. getUser 함수 리뷰 - 로그인/로그아웃 기능을 위해 인증한 사용자 정보를 가져온다
const getUser = async() =>{
const result = await axios(`/users/${sessionStorage.getItem('uid')}`);
setUser(result.data);
}- async : 함수가 비동기적 처리를 포함하고 있음을 명시하는 키워드
- await : 작업이 처리될 때까지 함수의 실행을 일시 중지하고 결과를 반환하는 키워드 (반드시 async내부에서 사용되어야 함)
- axios : 해당 경로에 get요청을 보내고 응답으로 받은 객체를 반환해 준다.
- 세션에 들어가 있는 uid에 해당되는 정보를 가져옴. 결과는 상태변수로 생성한 user의 set함수로 넣어 담아 useEffect로 출력한다.
[ 사용자 목록 출력 페이지]
1. 라이브러리 및 함수 import
- 부트스트랩의 css를 사용하기 위해 row, col, card를 가져온다
import React, { useEffect, useState } from 'react'
import {Row,Col,Card} from 'react-bootstrap'
import axios from 'axios'
import empty_image from '../images/a1.png'bootstrap ?
html, css, js로 구성된 프론트엔드 프레임워크로 다양한 웹 페이지에 디자인을 적용할 수 있다.
- 레이아웃, 버튼, 폼 등의 UI요소를 포함한다.
2. 사용자 목록 출력 코드 작성
const UserPage = () => {
const [users,setUsers] = useState([])
const [loading,setLoading] = useState(false);
const getUsers = async()=>{
setLoading(true);
const url = '/users';
const result = await axios.get(url);
console.log(result.data);
setUsers(result.data)
setLoading(false);
}
useEffect(()=>{
getUsers();
},[])
if(loading) return <h1>Loading...</h1>
return (
<Row className='justify-content-center'>
<Col xl={7}>
<h1 style={{paddingTop:'20px'}}>사용자목록</h1>
{users.map(user=>
<Card key={user.uid} className='my-2'>
<Card.Body>
<Row>
<Col md={3}>
{user.photo? <img src={user.photo} width={100}/>: <img src={empty_image} width={100}/>}
</Col>
<Col>
<h5>이름:{user.uname} ({user.uid})</h5>
<h5>주소:{user.address}</h5>
<h5>전화:{user.phone}</h5>
<h5>가입일:{user.fmt_date}</h5>
</Col>
</Row>
</Card.Body>
</Card>)}
</Col>
</Row>
)
}
export default UserPage- getUsers 함수를 통해 유저 정보를 가져오고 useEffect로 렌더링 될 때 출력한다.
- axios로 결과를 가져오기 전에 사용자에게 알리기 위해 loading상태변수를 생성해 loading이 true일 경우 로딩 중 문구 출력
3. getUsers 함수 리뷰 - 사용자 목록 출력
const getUsers = async()=>{
setLoading(true);
const url = '/users';
const result = await axios.get(url);
console.log(result.data);
setUsers(result.data)
setLoading(false);
}- 위의 getUser함수와 동일하며 url경로에 파라미터를 담지 않아 사용자의 전체 데이터를 가져온다 (http://localhost:5000/users)
- axios로 가져온 결과는 result.data에 담기며 axios(url)과 axios.get(url)은 동일한 결과를 도출한다.
▶ axios 추가 설명
- axios(url)은 axios.get(url)의 단축형으로 get요청을 보내는 메서드이다.
- 생략 시 get방식으로 요청되며 다른 메서드를 사용할 경우 지정해야 된다 (post, put , delete 등) -> axios.post(url)
[목록 출력 결과 페이지]
'BE > node.js' 카테고리의 다른 글
| vscode에서 Node.js실행하기 (express, npm, local host) (0) | 2023.03.20 |
|---|