react.js와node.js mysql연동방법

1. 사전준비

---

■node.js다운로드
https://nodejs.org/ko/

Node.js

자신의 컴퓨터 사양에 맞게 node.js를 다운로드하고 잘 설치된지 확인한다.

(현시점 LTS버전에서 최신판인 14.16.1을 다운받음)

 

아래 커맨드로 cmd or terminal에서 확인.

$node -v

 

■mysql인스톨(homebrew사용)

아래사이트에서 다운받을수 있다.

brew.sh/index_ja.html

Homebrew

아래 커맨드로 mysql이 잘 설치된지 확인한다.

$brew info mysql

 

mysql 실행

$mysql.server start

 

mysql 초기 패스워드 변경방법

$mysql -u root 

$set password for root@localhost = 'password';

 

■test용 DB, table, data준비

 

$create database myDb;

$use myDb;

$create table user_info(email VARCHAR(50));

$insert into user_info (email)values("test@mail.com");

 

■react 프로젝트 준비

npx create-react-app 폴더명

2. node & react & mysql 연동

---

■node server구축

자신의 프로젝트 폴더만든다.

$mkdir 프로젝트 폴더 이름

 

그 후에 아래 커맨드로 node프로젝트를 만들어주고 서버구축에 필요한 패키지를 인스톨한다.

(만들때 상세한 설정들은 enter로 넘기고 나중에 설정해도됨. )

$npm init

$npm install express axios mysql cors --save

 

그리고 매번 서버를 껐다가 켰다를 반복하면서 소스 수정이 귀찮을 것 같아 추가로 nodemon 패키지도 인스톨했다.

$npm install nodemon --save

 

그리고 서버 실행시킬때 커맨드를 단축시키고 싶어

package.js의 script부분에 아래와 같이 실행커맨드를 추가 시켰다.

"script"{

    "start": "npx nodemon server.js",

     ...

}

 

이로써 npm start로 서버를 실행시킬수 있음.

 

디렉토리구성은 다음과 같다.

• 프로젝트폴더
  • server.js
  • package.js

server.js

const express = require('express');
const app = express();
const PORT = process.env.PORT || 4000;
const db = require('./config/db');
const cors = require("cors");

var corsOptions = {
    origin: "http://localhost:3000" //클라이언트(react) 쪽의 콜스 허용
};
  

const mysql = require('mysql');
const connection = mysql.createConnection({
    host : 'localhost',
    user : 'root',
    password : 'myPassword',  //패스워드
    database : 'myDb'         // db명
});
connection.connect((err) => {
    if (err) {
      console.log('error connecting: ' + err.stack);
      return;
    }
    console.log('success');
});

app.use(cors(corsOptions));

app.get('/', (req, res) => {
    res.send('Server Response Success');
})
app.get('/hello', (req, res) => {
    res.send({ hello : 'Hello react' });
})
app.get('/api/info', (req, res) => {
    db.connect(function(err) {
        if (err) throw err;
        console.log('Connected');
        db.query("SELECT * FROM user_info", (err, data) => {
            if(!err) res.send({ data : data });
            else res.send(err);
        })
    });
})
app.listen(PORT, () => {
    console.log(`Server On : http://localhost:${PORT}/`);
})

mysql접속시 아래와 같은 에러가 발생했다.

Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client

mysql 8.0버전 사용시에는 자격증명을 다시할 필요가 있다고한다.

$mysql -u root -p 

 

password입력후 아래 커맨드를 입력한다.

$ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password';

 

■ react 부분 구축(프로젝트 작성 상세부분은 생략)

 

아래 커맨드로 mysql, axios 패키지를 인스톨한다

$ npm install mysql axios --save

 

hellow.js라는 파일이 있다는 가정하에 코딩을 하겠다.

버튼을 누르면 node서버와 통신하여 데이터를 가져오게하는 처리이다.

import React from 'react';
import axios from 'axios';

const hellow =()=>{
    return(
	<div>
		<button onClick={()=>{return onDataHandler()}}>button</button>
	</div>
    );
}

function onDataHandler(){
    const axiosSet=axios.create({
        baseURL:"http://localhost:4000/", //node server url
        Headers:{
            'Content-Type':'application/json; charset=UTF-8'
        },
        responseType:'json',
        responseEncoding:'json'
    })
    const res=axiosSet.get('/api/info'); // / 와 /hellow 와 /api/info순으로 테스트를 해봄
    console.log(res.data);
}
export default hellow;

버튼을 누른 후 개발자 콘솔에서 확인해보면 데이터가 들어온걸 확인할 수있다.