react와 express 서버연동 익히기 3편 -mysql DB연동-

1. MySQL 설치

 

반드시 mysql msi installer를 다운받아 설치

 

mysql workbench를 옵션으로 다운받아야 편하다

 

설정은 찾아보면 나오니 생략하고

 

https://qa-testing.tistory.com/413

[데이터베이스 이론] MySQL 설치(Window 버전)

 

 

2. database 확인

 

mysql workbench로 들어가서 database 들어가준다.

 

database - connect to database를 누르거나, 그냥 아래 커다란 네모 누르던가

 

 

 

다음 비밀번호 입력해서 데이터베이스 들어간다

 

 

왼쪽 navigator 창에서 아래에 schemas누르면, 데이터베이스 볼 수 있음

 

 

 

database_development쪽이 자주볼 부분?

 

 

 

 

3. 서버에 연동

 

먼저 mysql2를 설치

 

npm install mysql2

 

다음, backend에서 config 폴더를 만들고, db.js 파일 생성

 

 

다음 데이터베이스 정보와 동일하게, db정보를 입력한다

 

 

 

const mysql = require('mysql2')

const db = mysql.createPool({
    host: '127.0.0.1',
    port: '3306',
    user: 'root',
    password: '1234',
    database: 'database_development'

})

module.exports = db;

 

 

저장하고, server.js 파일로 이동하고

 

require를 이용해 db.js 파일 내용을 가져와 const db에 저장

 

 

 

4. 테스트

 

테스트를 위해 DB에 다음과 같은 쿼리를 작성하여, test라는 테이블을 만들어둔다.

 

use database_development;
create table test(
id INT(11) unsigned NOT NULL,
str VARCHAR(32) NOT NULL,
PRIMARY KEY (id)
);

 

 

 

 

다음, 생성된 테스트 테이블에 테스트용 데이터를 삽입해준다.

 

insert into test(id,str) values(1,'DB_TEST_COMPLATE!');

 

select문을 사용해 잘 들어갔는지 확인

 

 

다음, 서버 안에서 db로 접근해서 테스트용 데이터를 가져올 수 있는지 테스트해보기

 

server.js로 들어가서, db로 접근할 수 있는 api 주소와 쿼리문을 추가

 

//server/server.js
~

app.get('/api/test', (req,res) => {
    db.query('select * from test', (err,data) => {
        if (!err) {
            res.send(data);
        } else {
            console.log(err);
            res.send(err)
        }
    })
})

~

 

다음, 클라이언트로 들어가서 src/App.js에 해당 쿼리로 들어온 데이터를 접근할 수 있도록 axios를 이용한 코드 추가

 

import React, { useState,useEffect } from 'react';
import './App.css';
import axios from 'axios';

const App = (props) => {

  const [host,setHost] = useState('');
  
  //data초기화를 객체가 든 배열로 초기화해줌
  //가지고 오면 [~]형태인데, 시간차이가 있어서 객체로 초기화하고 바로 data[0]로 접근하면 에러나니까
  const [data,setData] = useState([{id:0, str:''}]);

  useEffect(()=>{
    async function gethost() {
      const res = await axios.get('/api/host');
      setHost(res.data.host)
    }

    gethost();

    async function getdb() {
      const res = await axios.get('/api/test');
      setData(res.data)
      console.log(data[0])
    }
  
    getdb();

  },[]) //[]을 의존성배열로 줘서 한번만 렌더링되도록

    return(
      <div className='App'>
        <h3> Welcome to <u> {host} </u> Blog! </h3>
        <h3> test data: {data[0].id} & {data[0].str} </h3>
      </div>
    )
}

export default App;

 

다음과 같이 나오면, db의 테스트 데이터를 가져온 것이다.

 

 

참조

 

 

React로 블로그 만들기 04 : RDS(Mysql) 연동 1 (확인 및 연동하기) : 네이버 블로그 (naver.com)

React로 블로그 만들기 04 : RDS(Mysql) 연동 1 (확인 및 연동하기)