[React] Node.js(Express)와 React 연동

 

노드와 리액트를 연동시키기 위한 세팅을 알아보겠다.

 

 

프로젝트 생성

터미널에서 하단의 내용들을 순서대로 입력해준다.

 

• Node.js 서버 생성

$ mkdir node_react
$ cd node_react 

$ npm init

 

node_react 파일을 만들고 들어간다.

 

$ npm install mongoose --save
$ npm install express --save
$ npm install nodemon concurrently --save-dev 

 

몽고 DB 연동을 위한 mongoose

Node.js의 웹앱 프레임워크인 Express

여러 개의 명령어를 동시에 실행하는 nodemon concurrently. 변경될 때마다 자동으로 재실행되게 한다.

 

• React App 생성

$ npm create react-app taxi
$ cd taxi

 

노드 안에 taxi라는 리액트 프로젝트를 만들어준다.

 

$ yarn add http-proxy-middleware
$ yarn add axios

 

노드와 리액트 서버 간에 데이터를 연결시키기 위한 프록시 모듈

HTTP 비동기 통신 라이브러리인 axios

 

---

package.json

 

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "client": "npm run start --prefix taxi",
    "server": "nodemon server.js",
    "dev": "concurrently --kill-others-on-fail \"npm run server\" \"npm run client\"",
    "start": "node server.js"
  },

 

package.json에 스크립트 부분을 추가해준다.

리액트와 노드는 각각 다르게 실행되도록 했다.

 

 

setupProxy.js

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

module.exports = (app) => {
    app.use(createProxyMiddleware('/api/*',{target:'http://localhost:8080'}))
}

 

노드와 리액트 두 개의 서버를 연결해주기 위한 파일이다.

app은 밑의 server.js에서 호출할 때 넣어줄 것이다.

 

프록시 모듈을 통해 /api/* 경로가 오면 target으로 연결하도록 한다.

 

 

server.js

var express = require('express')
var http = require('http')
var mongoose = require('mongoose')
const path = require('path')

var app = express()

app.set('port',process.env.PORT||8080)

mongoose.connect('mongodb://localhost:27017/shopping')

app.use(express.json())

http.createServer(app).listen(app.get('port'),() => {
    console.log('서버를 시작했습니다 : ' + app.get('port'))
})

app.use(express.static(path.join(__dirname,'taxi/build')))

app.get('/',function(req,resp){
    resp.sendFile(path.join(__dirname,'taxi/build/index.html'))
})

 

위에서 보았던 app은 Express 객체를 생성한 것이다.

기본 포트를 app 객체의 속성으로 설정해주었다. Node.js 서버가 사용할 포트 번호는 8080이다.

 

데이터베이스 연결을 위해 몽고 db를 연결해주었다. (해당 글에서는 DB 연결하는 예제는 설명 상 생략)

제이슨 형태의 데이터를 사용할 것이며

Express 서버 시작을 할 수 있도록 http 모듈을 사용하였다.

서버 실행에 이상이 없으면 function 함수가 실행되도록 했다.

 

npm run build

 

터미널에 입력을 하면 build 폴더가 생긴다.

 

따라서 위에 express.static을 통해 특정 폴더의 파일들을 클라이언트에게 보낼 수 있다.

웹페이지 경로에 '/'로 들어왔을 때 리액트로 만든 html이 출력되게 된다.

 

localhost:8080으로 접속했을 때 리액트 프로젝트가 나온다.

 

 

 

4월 28일 목요일 🌜