[React+Node.js] Node.js(Express)연동하기 - 3.다시한번 도전!

저번 Express 시간에 실패 이후로 눈물을 머금꼬 다시한번 도전해보도록 하겠습니다. 기준 은 여러 블로그를 참조해서 그떄 처럼 맟추었습니다.

 

1. React Project 만들기 

npx create-react-app react-express

새로운 프로젝트를 만들어 줍니다.

 

2. Node.js express 설치하기

npm install express --save && yarn add express

터미널에서 express 를 설치해준다.

 

3. Proxy 설정하기 

server 폴더를 만들어주고 그 아래 routes 폴더를 만들고 index.js 와 server.js를 해당하는 폴더 아래에 생성

 

초록색으로 표시된 부분만 새로 생성해주세요

 

termial 에서 middleware를 설치해주세요

npm install http-proxy-middleware --save && yarn add http-proxy-middleware

 

이미 생성된 src 파일 밑에 setProxy.js를 만들어주세요

 

setProxy.js

const proxy = require('http-proxy-middleware');

module.exports = function (app) {
    app.use(
        proxy('/api',{
            target :'http://localhost:3002/'
        })
    );

};

index.js 

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

router.get('/', function(req, res){
    res.send({greeting:'Hello React x Node.js'});
});
module.exports = router;

server.js

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

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

const port = 8080;
app.listen(port, () => {
    console.log(`현재 동작 Port on ${port}`);
})

4. terminal에서 실행하기

 

cd server 
node server.js

localhost:8080/api 에서 확인 가능합니다.

 

 참고

[React][Nodejs] React & Nodejs 소개 및 연동