[React] MySQL, Node.js 연동하여 데이터 조회하고 가져오기

 

이번 글에서는 React, MySQL, Node.js를 이용하여 사용 중인 MySQL에서 원하는 데이터를 가져와보도록 하겠습니다. 시작하기에 앞서 MySQL이 설치되어 있어야 합니다. 이 글에서는 MySQL 설치, 세팅 방법에 대해서는 다루지 않겠습니다. 다운로드 링크만 적어놓을 테니 설치가 안되신 분은 설치 후 세팅하시기 바랍니다. 아래 경로에서 PC 운영 체제에 맞게 다운로드하여 설치 진행하시면 됩니다. 첫 번째 다운로드 링크는 MySQL 설치 파일이고, 두 번째 다운로드 링크는 MySQL을 편리하게 사용할 수 있는 툴입니다. 

https://dev.mysql.com/downloads/mysql/

https://dev.mysql.com/downloads/workbench/

 

 

[데이터 조회]

먼저 저 같은 경우는 root폴더에 server 폴더를 만들고 그 안에 server.js 파일을 만들었습니다. 여기서 작업할 server.js 파일은 node.js이기 때문에 작업하실 때 수정돼서 확인하려면 서버를 껐다가 다시 켜주어야 합니다. 터미널에서 server 폴더 경로로 가서 'node server' 명령어를 입력하면 서버가 실행됩니다. 

 

server.js파일을 만드셨으면 express, cors, mysql 라이브러리를 yarn 혹은 npm으로 설치해주시고 아래의 코드를 참고하여 본인의 DB에 맞는 정보를 입력해주시면 됩니다. 아래 코드는 cors 권한 때문에 외부 제약들을 받지 않도록 작성하였습니다. 개인 사이드 프로젝트가 아닌 실제 프로젝트를 하시는 거면 cors의 origin 등을 추가로 설정해주실 필요가 있습니다.

const express = require("express"); // npm i express | yarn add express
const cors    = require("cors");    // npm i cors | yarn add cors
const mysql   = require("mysql");   // npm i mysql | yarn add mysql
const app     = express();
const PORT    = 3001; // 포트번호 설정

// MySQL 연결
const db = mysql.createPool({
    host: "127.0.0.1", // 호스트
    user: "root",      // 데이터베이스 계정
    password: "",      // 데이터베이스 비밀번호
    database: "star",  // 사용할 데이터베이스
});

app.use(cors({
    origin: "*",                // 출처 허용 옵션
    credentials: true,          // 응답 헤더에 Access-Control-Allow-Credentials 추가
    optionsSuccessStatus: 200,  // 응답 상태 200으로 설정
}))

// post 요청 시 값을 객체로 바꿔줌
app.use(express.urlencoded({ extended: true })) 

// 서버 연결 시 발생
app.listen(PORT, () => {
    console.log(`server running on port ${PORT}`);
});

 

추가로 server.js 하단에 아래와 같은 코드를 작성하였습니다. res.header에 접근 권한을 모두로 허용하여 cors 에러를 사전에 막았습니다. sqlQuery 변수에는 실행할 쿼리문을 작성하였습니다. 제 데이터베이스 COMPANY 테이블에 있는 모든 정보를 조회해보겠습니다.

app.get("/api/company", (req, res) => {
    res.header("Access-Control-Allow-Origin", "*");
    
    const sqlQuery = "SELECT * FROM COMPANY";

    db.query(sqlQuery, (err, result) => {
        res.send(result);
    });
});

 

위에서 적은 url에 접속해서 조회된 데이터도 확인이 가능하고 위에서 콜백으로 작성한 res.send(result) 코드 덕분에 터미널에서도 조회된 데이터를 확인할 수 있습니다. 그럼 이 조회된 데이터를 이제 호출하여 사용해보도록 하겠습니다.

 

 

[데이터 가져오기]

axios 라이브러리를 이용하여 간단하게 호출해 보았습니다. axios의 get 파라미터로 url을 입력하면 해당 경로에서 데이터를 가져올 수 있습니다. 이런 식으로 MySQL로부터 데이터를 받을 수 있습니다. 

<Button onClick={() => {
    // npm i axios | yarn add axios
    axios.get("http://localhost:3001/api/company")
        .then((res: any) => {
            console.log(res);
        }).catch((err: any) => {
            console.log(err);
        })
}}>api 호출하기</Button>

 

React와 MySQL, Node.js 를 연동하여 axios를 통해 데이터를 뽑아오는 것까지 확인하였습니다. 지금은 단순히 get 방식으로 조회만을 해보았지만 post, put, delete 방식도 있습니다. 흔히 CRUD라고 하는 Create, Read, Update, Delete에서 Read만을 해보았습니다. 하단에 데이터 조회뿐 아니라 추가, 수정 삭제 포스트 링크 첨부합니다.

[React] MySQL, Node.js 연동하여 Insert, Update, Delete 구현하기