[React] Node.js 와 연동하기

기존의 Node.js + ejs/html 을 사용하는 경우 서버에서 일일이 파일을 라우팅 해줘야했다면 리액트와 Node.js를 같이 사용하게 되면 라우팅은 리액트단에서 처리해 줄 수 있습니다.

그러면 서버에서는 리액트에서 빌드된 파일 하나만 라우팅 해주면 되고, DB 입출력 코드만 구현해주면 됩니다.

 

간단한 예제를 통해 알아보도록 하겠습니다. Node.js는 깔려있다는 가정하에 진행하도록 하겠습니다.

 

Node.js 프로젝트 생성

우선 Node.js 프로젝트를 생성해줍니다. IDE는 웹스톰을 사용하도록 하겠습니다.

New Project -> 프로젝트 이름 지정 -> Create 버튼을 눌러 프로젝트를 생성해줍니다.

 

그 다음 터미널을 열어 express 프레임워크를 설치하기 위해 다음과 같이 명령어를 입력해줍니다.

$ npm init
$ npm install express

 

그러면 다음과 같이 node_modules 폴더와 package.json이 생성된 것을 볼 수 있습니다.

 

이제 app.js 파일을 만들어 express로 서버를 띄워 보도록 하겠습니다. 다음과 같이 루트 경로에 app.js 파일을 생성해줍니다.

 

그리고 다음과 같이 코드를 입력해줍니다. 3000번 포트에 Node.js 서버를 띄우는 코드입니다.

var express = require('express')
var app = express()

app.listen(3000, '0.0.0.0', () => {
    console.log('Server is running : port 3000')
})

 

잘 작동하는지 확인하기 위해 다음 명령어로 서버를 실행시켜줍니다. 다음과 같이 뜬다면 잘 작동하고있는 것입니다.

$ node app.js
Server is running : port 3000

 

이제 리액트 프로젝트를 만들고 빌드한 후 빌드된 파일을 Node.js 에서 라우팅 해줘보도록 하겠습니다.

 

React 프로젝트 생성

터미널에 다음과 같이 명령어를 입력하여 리액트 프로젝트를 생성해줍니다.

$ npm install create-react-app

$ npx create-react-app react-project
usage : npx create-react-app <project-name>

 

현재 폴더에 리액트 프로젝트가 생성되었다면 잘 생성된겁니다.

 

이제 리액트 프로젝트로 들어가서 리액트 프로젝트를 빌드해 주도록 하겠습니다.

다음과 같이 명령어를 입력하여 리액트 프로젝트를 빌드해 줍니다.

$ cd react-project
$ npm run build

 

그러면 다음과 같이 build 폴더가 생성이 되고 그 안에 index.html과 css. js, image 폴더가 생성된 것을 보실 수 있습니다.

리액트 프로젝트를 빌드하면 리액트에서 짠 모든 코드들이 하나의 index.html 파일로 나오게 됩니다.

저희는 이제 이 index.html 파일을 Node.js에서 라우팅해주기만 하면 됩니다.

 

 

다시 app.js로 가서 다음과 같이 코드를 입력해 줍니다. 리액트 프로젝트안에 build 폴더를 static 폴더로 지정해주었기 때문에 res.sendFile()에서 경로를 생략해 줄 수 있습니다.

var express = require('express')
var app = express()

app.use(express.static(__dirname + '/react-project/build'))

app.get('/', (req, res) => {
    res.sendFile('index.html')
})

app.listen(3000, '0.0.0.0', () => {
    console.log('Server is running : port 3000')
})

 

다시 터미널에 다음 명령어를 입력해 Node.js 서버를 실행시켜줍니다.

$ node app.js

 

그 다음 3000번 포트로 접속했을 때 다음과 같이 뜬다면 잘 작동하고있는 것입니다.

 

이렇게 리액트와 Node.js를 연동해 보았습니다.

 

참고

• https://codingapple.com/unit/nodejs-react-integration/