[음악 관리 프로그램 만들기] node JS - MySQL - React JS 연동하기

나동빈님의 고객 관리 프로그램 예제를 하던 도중 AWS FREE TIER에 있는 RDS를 이용해 DB를 구축하는 과정에서 나는 내가 생각했을 때 더 대중적인 MySQL을 DB로 사용하기로 했다. 이 블로그 를 통해 MySQL 설치, 새로운 모델 생성, 실질적인 DB 구축 등 연동에서 MySQL에서 필요한 부분을 모두 완료했다. 사실 처음에 MySQL을 설치하지 않은 상황에서 MySQL 워크벤치만 가지고 서버를 실행시키려다 문제가 시켜 MySQL 설치가 안되있음을 깨닫고 설치후 재진행했었다. 나같은 사람이 있을 지 모르지만 MySQL이 설치 안되어있다면 이 링크를 따라서 먼저 설치를 하고 진행해야한다. 

블로그를 따라서 마지막 까지 완료하고 실험용 데이터도 하나 삽입했다.

 

mydb라는 이름의 데이터베이스에 musicdata라는 하나의 테이블을 생성했다.

 

1. MySQL 에 연결하기

 

우선 내 프로젝트 디렉토리에 'mysql' 모듈을 설치해 준다.

npm install mysql

그리고 루트 디렉토리에 config 라는 폴더를 만들고 그 아래 database.js라는 파일을 생성한다. 이 파일은 실질적으로 'mysql' 모듈의 createConnection 을 통하여 mysql과 연결하는 기능을 한다.

var mysql = require('mysql');

module.exports = function () {
  return {
    init: function () {
      return mysql.createConnection({
        host: 'localhost',
        port: '3306', 
        user: 'hyunjae oh', //이 DB에서 사용하고 있는 user의 이름
        password: '~~~~',   //이 DB에서 사용하고 있는 user의 password
        database: 'mydb'    //내가 생성한 데이터베이스 이름
      })
    },
    
    test_open: function (con) {
      con.connect(function (err) {
        if (err) {
          console.error('mysql connection error :' + err);
        } else {
          console.info('mysql is connected successfully.');
        }
      })
    }
  }
};

init 함수는 설명한 것처럼 MySQL에 연결하는 기능을 하는 함수로써 module.exports를 통해 모듈 형식으로 만들어져 나중에 server.js 파일에서 require를 통해 사용된다. test_open 함수는 MySQL에 성공적으로 연결되었는지 확인 할 수 있도록 하는 코드이며 만일 성공적으로 연결이 되었다면 'mysql is connected successfully.' 라는 문구가 콘솔창에 보일것이다.

 

이 단계에서 에러가 났었는데 에러코드, ER_NOT_SUPPORTED_AUTH_MODE 를 검색해 보니 꽤 많은 결과가 나왔고 이 블로그 를 통해서 해결할 수 있었다. 

 

위의 코드에서 host는 처음에 MySQL을 설치하며 사용자를 생성할 때 보통 127.0.0.1 로 생성이 되고 그대로 진행하였다면 127.0.0.1로 설정하고 내가 localhost로 설정하였다면 위처럼 localhost라고 설정하면 된다. port는 기본적으로 제공하는 번호 그대로 사용하였다. 그럴일 없겠지만 만약에 헷갈린다면 MySql -> Database -> Manage Connections 로 들어가 내 Connection 을 선택해 밑의 사진과 같이 보이는 부분을 대치해가며 작성하면 된다.

 

2. node JS와 연동하기

const express    = require('express');
const dbconfig   = require('./config/database.js')(); // 위에서 생성한 MySQL에 연결을 위한 코드(모듈)
const connection = dbconfig.init();                   // node express 와 MySQL의 연동

const app = express();

// configuration 
app.set('port', process.env.PORT || 5000);

// routing
app.get('/musicdata', (req, res) => {                             //DB에 접근할 수 있는 주소와
  connection.query('SELECT * from musicdata', (error, rows) => {  //쿼리문 
    if (error) throw error;
    res.send(rows);
  });
});

app.listen(app.get('port'), () => {
  console.log('포트 넘버 : ' + app.get('port') + "에서 실행 중");
});

express 서버를 설정하고 MySQL DB에 주소와 'select * from ~' 쿼리문을 이용해 서버에서 클라이언트에 데이터를 전송하는 코드이다. 해당 포트번호(http://localhost:5000/)에 접속하면 

 

다음과 같이 MySQL 워크벤치에서 생성했던 실험 데이터를 확인 할 수 있다. 

 

3. React 의 App.js 에서 MySQL에서 가져온 데이터를 express에서 가져오기

 

이렇게 express 미들웨어를 통해 MySQL에서 데이터를 가져왔고 마지막으로 App.js에서 fetch를 통해 express rest api(서버)에서 데이터를 전송했다.

 useEffect(() => {
    callApi()
      .then(res => console.log(res))           // useEffect를 통해 callApi 함수 실행
      .catch(err => console.log("this is error " + err));
      
  }, [musics])

  async function callApi() {
    const response = await fetch('/musicdata') // express rest api의 해당 주소로 접근
    const body = await response.json();        // 해당 주소의 데이터를 json 화
    return body;
  }

fetch를 통해 express rest api(서버)의 해당 주소로 접근하였다. 그에 해당되는 response 를 console.log로 찍어보면 다음 사진과 같이 "fulfilled" 상태와 데이터도 성공적으로 확인할 수 있다.

 

4. 마치며

예전 부터 react(front end)와 express(backend, rest api), db가 서로 연동되어 작동하는 원리에 대해 애매모호한 부분이 많았는데 모르는 부분을 찾아가며 이 작업을 하다보니 알게된 부분이 많다. 부가적으로 몰랐던 개념에 대해서 더 공부해 볼생각이다.