React + Node.js 연동하기

하루종일 삽질한거 정리합니다. 분명 언젠가 또 쓸것이어니....

우선 vscode로 작성하였습니다.

 

vscode 터미널에서 

 

npx create-react-app lasttest

 

lasttest는 프로젝트 이름입니다.

만든후 터미널에서 해당 프로젝트 루트 경로에서 npm start로 실행이 되는지 확인합니다.

이 친구가 뜬다면 바로 node.js랑 연동할게요.

 

npm install express --save

 

설치해주세요 express는 NodeJS의 웹프레임워크 입니다. 간편하게 웹서버를 구축할 수 있죠

그다음에 서버와 클라이언트 폴더를 나누어 줄껀데요 root경로에 server폴더를 만들어준 다음에 

server.js 파일을 만들어주세요

const express = require('express');
const app = express();
const api = require('./routes/index');
const bodyParser = require('body-parser');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.use('/api', api);

const port = process.env.PORT || 3001;

app.listen(port,()=>console.log(`Listening on port ${port}`));

port번호는 달라도 상관없습니다. 일단 이렇게 작성한 다음에 3번째 줄에 있는 routes/index를 만들어줄게요

 

만들어둔 server폴더에 routes/index.js 를 만들어주세요 

var express = require('express');
var router = express.Router();
var mysql = require('mysql');


const connection = mysql.createConnection({
    host:'',
    port:,
    user:'',
    password:'',
    database:''
});
connection.connect();

router.get('/api',function(req,res){

    res.send({greeting:'Hello'});
});


module.exports = router;

 

 

npm install --save mysql 

 

mysql을 사용하기 위해 설치해줍니다.

connection변수에 mysql 정보를 넣어주는데 원래 따로 빼서 바인딩해서 가져오는게 좋지만... 공부용으로 쉽게 보기 위해 설정해주었습니다.

'' 안에는 DB정보 작성해주시면 됩니다.

 

그리고 Router을 이용하여 url요청이 들어 왔을때 어떤 데이터를 보내줄지 설정해줍니다. 저는 Hello를 받아올게요

만약 쿼리를 작성해 db정보를 받고 싶으시다면

 

router.get('/project/select', function(req,res){
    
    connection.query('SELECT ID,NAME,AGE FROM user', (err, rows,fields) => {
        res.send(rows);
    })
});

이런식으로 써주면 됩니다!

이제 서버에서 보내준 데이터를 클라이언트에서 받기 위해 Proxy를 설정해줄겁니다.

먼저 미들웨어를 설치해줄게요!

 

npm install http-proxy-middleware --save

 

src 경로에 setupProxy.js 를 만들어줍니다.( 이름을 꼭 지켜야 합니다 )

이걸로 삽질을 조금 했는데 하위버전에서는 다르게 쓰는걸 찾아서 썻다가 오류가 생겼었습니다...

 

const{ createProxyMiddleware }= require('http-proxy-middleware'); 를 꼭 지켜주세욥

proxy 설정을 추가해줌으로 /api로 시작되는 API는 target으로 설정된 서버 URL로 호출하도록 설정됩니다.

 

+

server.js에서 설정해준 app.use('/api', api); 확인!

 

 

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

module.exports = function(app){
  app.use(
      createProxyMiddleware('/api', {
          target: 'http://localhost:3001/',
          changeOrigin: true
      })
  )
};

 

 

 

다음은 서버와 클라이언트가 동시에 실행될 수 있게 해줄게요.

 

node ./server/server.js를 실행해서 서버가 잘 작동하는지 확인해주세요

성공적

 

이제 서버, 클라이언트 동시 실행을 위해 ctrl+c를 눌러 서버를 닫아주시고

npm install npm-run-all -D 를 설치해주세요!

 

+

설치하다가 match어쩌고 하는 오류가 발생하면 루트 경로에 있는 package-lock.json을 삭제하고 다시 설치해보세요!

 

루트 경로에 있는 package.json에 scripts 부분을 변경해주세요

 

 "scripts": {
    "start": "npm-run-all --parallel start:**",
    "start:clinet": "react-scripts start",
    "start:server": "node ./server/server.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

저장하시고 npm start를 한다면 

연결 끝 ! App.js에서 해당 데이터를 가져와서 사용하는 법은 다음에!