[Node.js] React에 MySQL 연동을 위한 Server 생성

React에 MySQL 연동하기 포스팅에 작성했던 내용인데, 내용이 너무 길고 리액트와 연관이 큰 부분은 아니라 새로운 카테고리의 게시글로 분리했다.

 

https://duski96.tistory.com/12

[React] React에 MySQL 연동하기

 

Server 생성 과정

DB로부터 데이터를 불러오기 위해선 클라이언트의 요청을 처리하기 위한 서버가 필요하다.

다음과 같이 진행중인 프로젝트 폴더 아래 server 폴더를 생성해 server.js를 생성해주었다.

그 아래 config 폴더를 만들어 DB 연결을 위한 db.js 파일을 추가하고 routes 폴더를 만들어 api 엔드포인트를 정의해주기 위한 index.js 파일을 추가해주었다.

프로젝트 폴더 구조 일부

# express 설치
npm i express

# mysql2 설치, mysql은 호환성 등에서 문제가 있음
npm i mysql2

// db.js

import mysql from 'mysql2';
 
const db = mysql.createPool({
    host:'localhost',
    user:'manager', // 생성해둔 db에 접근할 사용자 이름
    password:'1111', // 사용자를 식별할 패스워드
    database:'mini_lifestyle' // 생성해둔 db 이름
});
 
export default db;

// index.js

import express from 'express';
const router = express();
import db from '../config/db.js';
 
router.get('/users', (req, res) => {
    db.query('SELECT * FROM users', (err, data)=>{
        if(!err) res.send({ products : data});
        else res.send(err);
    });
});
 
export default router;

//server.js

// express 모듈 호출
import express from 'express';
const app=express();

// routes/index.js에서 api 처리
import api from './routes/index.js';
app.use('/api', api);

// node.js 환경에서는 import.meta.env 사용 X
import dotenv from 'dotenv';
import path from 'path';
dotenv.config({path:path.resolve(process.cwd(), '../.env')});

// 포트번호 설정
const PORT=process.env.VITE_PORT || 4000;

app.listen(PORT, ()=>{
    console.log(`Server run : http://localhost:${PORT}/`);
});

 

server.js 파일에서 .env 파일을 로드하는데 약간 애를 먹었다.

처음엔 import.meta.env로 PORT 번호를 지정해주었는데 계속 에러가 났는데, 알고보니 백엔드에선 해당 방식을 쓰지 않는다고 한다.

그래서 dotenv를 설치하고 dotenv.config()를 통해 .env 파일 경로에 맞게 path를 지정해주었다.

이렇게 코드를 완성하면 다음 경로에서 DB에 저장된 데이터를 불러올 수 있는 상태가 된다.

http://localhost:4000/api/users

 

http://localhost:4000/api/users 접속 결과

'mini_lifestyle' 테이블에 저장된 데이터들이 출력된 모습

 

만들어둔 서버의 경로를 따라 들어가면 DB에 저장된 데이터들이 출력되는 것을 확인할 수 있다.

DB 생성 포스팅에도 언급했듯이 실제 서비스에선 패스워드를 반드시 암호화 과정을 거쳐서 저장해야 한다.