node.js 백엔드 서버 빌드 & react 프론트 페이지 만들기(my sql 연결)

📌 1단계: mysql을 사용하여 json 데이터 만들기

1. 사용자 생성

mysql의 WorkBench – root (최상위)에 다음 구문을 씁니다.

create user web identified by 'pass';
create database webDB;
grant all privileges on webDB.* to web

– 사용자 이름 웹, 패스워드 패스로 지정

– db 이름 webDB

– 웹 사용자에게 webDB의 모든 권한을 부여 (grant는 DCL 문입니다)

2. 웹 연결 생성

– 홈 (mySQL Connections)에 가서 + 버튼으로 새로운 연결을 만들고 사용자 이름은 위에서 만든 웹으로 설정합니다.

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. mysql 모듈 설치 – vscode 터미널

yarn add mysql

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 라고 입력해 보면 위와 같은 페이지가 열렸다.

그래서 연결 성공!

(프로젝트 작성 & 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 파일을 종료하면 포트 5000 서버가 시작되지 않음)

(프록시 설정 및 라이브러리 설치)

1. 라이브러리 설치 – 터미널

yarn add axios
yarn add [email protected]
yarn add bootstrap-bootstrap

– axios 설명 바로 가기, react-router-dom 설명 바로 가기

2. 프록시 서버 할당

– package.json 파일에 상기와 같이 작성해 node.js로 지정해 둔 5000번 포트를 할당해 준다.

– react 서버를 종료한 후에 작성해야 하며, 서버 실행시의 포트 수정이 반영된다.

3. 서버 구동

yarn start

4. 라우터 설정

import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <BrowserRouter>
     <App />
  </BrowserRouter>
);

– index.js에서 앱 BrowserRouter으로 싸서 라우터를 사용할 수 있도록 해준다.

(react-router-dom에서 가져와야 함)

5. 부트스트랩(css) 활성화

import ‘bootstrap/dist/css/bootstrap.min.css’;

– app.js의 상위에 bootstrap css를 가져옵니다.

(부트 스트랩을 사용한 메뉴 바)

1. 함수 및 라이브러리 가져오기 – 사용법 참고 사이트 클릭(리액트 부트 스트랩)

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. 라이브러리 및 함수 가져오기

– 부트 스트랩 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)

(리스트 출력 결과 페이지)