[React]react와 mysql 연결

0. 파일 구조

 

 

 

 

1. DB 설정 

 

1-1. mysql DB를 만든 후 권한설정을 한다. 

 

첫번째 빨간색에는 user이름이 두번째 빨간색에는 비밀번호가 들어간다.

 

 

 

 

1-2. 사용할 데이터들을 DB에 insert한다. 

 

 

 

2. config -> db.js 수정 

 

const mysql = require('mysql');
 
const db = mysql.createPool({
    host : '[host]',
    user : '[유저 이름 ]',
    password : '[비밀번호]',
    database : '[DB 이름]'
});
 
module.exports = db;

 

만든 DB에 접속할 수 있도록 config에 db파일을 만들어준다.

 

 

3. server.js 수정 

const express = require('express');
const app = express();
const api = require('./routes/index');
const PORT = 4000;

// api 처리는 './routes/index'에서 일괄처리
app.use('/api', api);

 

 

 

4. routes / index.js 수정 

const express = require('express');
const router = express();
const db = require('../config/db')
 
// http://localhost:4000/api 으로 접속 시 응답메시지 출력
router.get('/test', (req,res) => {
    db.query('SELECT * FROM posts', (err, data) => {
        if(!err) res.send({ products : data});
        else res.send(err);
    })
})
 
module.exports = router;

 

/api/test는 select * from posts를 실행시켜 결과값을 send하도록 코드 생성 

 

 

 

 

5. app.js에 들어가는 컴포넌트 수정 ( 여기서는 Table_list) 

import { useState, useEffect } from 'react';
import axios from 'axios';


function Table_list() {
  useEffect(() => {
    (async () => {
      try {
        const res = await axios.get('/api/test')
        console.log(res.data.products);
      } catch (e) {
        console.error(e.message)
      }
    })();
  }, [])

  return (

/api/test의 api값을 res로 받아와서 res.data.products을 로그로 남기도록 코드 만듦 

 

 

 

 

 

6. http-proxy-middleware    설치 

 

 

src > setupProxy.js 파일 생성

만들 API의 첫 리소스를 Origin을 변경하도록 설정해주어야한다.

const { createProxyMiddleware } = require("http-proxy-middleware")

module.exports = function (app) {
	app.use(
		"/api",
		createProxyMiddleware({
			target: "http://localhost:4000",
			changeOrigin: true,
		})
	)
	app.use(
		"/board",
		createProxyMiddleware({
			target: "http://localhost:4000",
			changeOrigin: true,
		})
	)
}

 

 

 

7. nodemon   설치   < 서버 반영을 바로 바로 하기위해> (껐다가 키는게 아니라 f5만 누르면 반영 되도록)

 

7-1. npm i -g nodemon  입력 

 

 

7-2. 정책 변경을 해야한다. ( 아래 포스팅 참고)

 

https://www.dbility.com/589

nodemon security exception

 

이제 서버를 돌릴 때 node server.js가 아닌 nodemon server.js를 해야한다. 

 

 

 

 

 

결과 :  

 

 

 

DB에 있는 값이 로그로 잘 찍힌다.  (f12 개발자 모드에서 확인 가능)