[React Node.js] React와 Node 연결

React와 Node를 연결하다.

---

1. React와 Node 구성

(그림 1)

 화면을 구성하는 React와 서버인 Node를 연결할 때의 구성을 그림으로 표현한 것이다. (그림 1) 기존의 Node.js에서는 templete engine(템플릿 엔진)으로 화면에 보일 엔진을 선택하였는데, React와 연결할 거니까 자연스럽게 React가 템플릿 엔진의 역할을 하게 된다.

2. React와 Node 기본 세팅

2 - 1. Node 설치

Node 설치 (그림 2)

npm install (그림 3)

 프로젝트를 진행할 새로운 폴더를 생성하고 폴더에 Node를 설치한다. npm init 명령어를 터미널에서 사용해서 노드 모듈과 package.json 등을 설치한다. github에 프로젝트를 업로드할 때는 노드 모듈을 올리면 안 된다. 다른 사람에게 파일을 공유하거나 공유받을 때 노드 모듈이 제외된 상태로 받게 되는데, npm install 명령어를 사용해서 package.json에 기록된 이 프로젝트에서 사용된 모듈이 모두 설치된다. 

 

2 - 2. React 폴더 생성

리액트 폴더 생성하기 (그림 4)

리액트 폴더 생성 명령어 (그림 5)

 리액트가 기존의 views 폴더의 역할을 하게 된다. 따라서 (그림 4) 제일 바깥 폴더에 경로를 맞춘 뒤 터미널에서 리액트 폴더를 생성하는 명령어를 사용해서 만들어준다. 폴더 및 파일 설명을 하자면, config는 이후에 database 연결을 위한 폴더, react-project는 리액트 폴더, server.js는 노드 서버를 정의할 파일이다. 바깥에 있는 routes 폴더는 노드서버에서 사용하는 Router이다. 리액트에서도 페이지 이동을 위해서 라우터를 사용하는데 그럼 노드 Router랑 리액트 Router랑 무슨 차이지? 싶은데 노드서버의 Router의 기능 중 하나인 views의 파일을 보여주기 위해 사용된 Router를 리액트 Router로 대체? 아무튼 페이지 이동과 관련된 Router는 React의 Routes, Route로 이루어진다. Router 하면서 데이터와 관련된 작업을 한다면 노드 서버에서 이루어지면 된다. 두 Router에는 기능적으로 크게 다른 점은 없다.

 

2 - 3. Node 파일 구성

// server.js
// require, import
const express = require('express')
const app = express()
const indexRouter = require('./routes/index')
const path = require('path')

// 정적인 파일을 가져오기 위한 미들웨어
app.use(express.static(path.join(__dirname, 'react-project', 'build')))

// router
app.use('/', indexRouter);

// 3001인 이유는 노드와 React의 포트번호가 겹치면 안됨
app.set('port', process.env.PORT || 3001); // 환경변수에 포트번호가 없으면 3001로 사용됨

app.listen(app.get('port'), () => {
    console.log('port waiting... http://localhost:3001/link');
});

 server.js 파일에서 Node 서버를 정의한다 했으므로 express를 설치하고 express 서버를 구축한다. router 폴더 안에 만들었던 router들도 서버에서 사용한다고 정의해 준다. 보통 노드 서버의 포트번호를 3000으로 정의하는데 이번 경우에는 조금 다르다. 일단 사용하는 사람이 환경변수 파일이 있을 수 있으니 고려해 주고 React 서버도 사용할 것이기에 두 서버의 포트번호가 겹치면 안 된다. React 서버의 포트번호가 3000이기 때문에 Node 서버의 포트번호 3001로 설정해 줬다.

 그리고 리액트와 노드를 연결하기 위해서는 기존의 노드에서 views의 정적파일처럼 react의 동적파일을 정적파일로 바꿔주는 작업이 필요하다. 그게 바로 build 작업이다. build는 사실 모든 작업을 마치고 최종적으로 사용하는 것인데 일단 배우는 단계니까 build를 사용해서 Node에서  React 파일이 보이는 작업을 진행해 보겠다.

 

2 - 4. npm run build

build (그림 6)

Node(좌), React(우) 터미널 (그림7)

 Node와 React 터미널을 따로 만들어서 사용해줘야 한다. React의 동적파일이 정적파일로 바뀌는 것이기 때문에 npm run build는 React 터미널에서 사용해야 한다. 명령어 사용 후 새로운 build 폴더가 생성될 것이다. 이 build 폴더 내부에 React의 화면이 정적 파일로 변환된 파일이 있다.

build 폴더 생성 (그림 8)

그림 8을 보면 build 폴더가 생성되었고 그 내부의 파일들을 볼 수 있다. build 폴더 내부에 있는 index.html이 바로 우리가 원하는 Node 서버에서 사용될 정적 파일이다. 이 파일의 존재를 확인했으므로 다시 Node의 server.js 파일에서 미들웨어를 통해 정적파일을 불러오는 작업을 설명할 수 있다.

// server.js의 일부
const path = require('path')

// 정적인 파일을 가져오기 위한 미들웨어
app.use(express.static(path.join(__dirname, 'react-project', 'build')))

Node 서버에서 정적파일을 사용하기 위해서 path를 사용해서 build 폴더에 접근하게끔 경로를 지정해 준다. path를 사용하는 이유는 경로 사이에 들어가는 /, \ 과 같은 것들이 윈도랑 맥, 리눅스에서 서로 다르기 때문에 윈도에서는 작동하던 파일이 맥에서는 작동되지 않을 수도 있기 때문에 path를 사용해서 통일시켜준다. __dirname은 현재 파일의 위치를 의미한다. 그래서 현재 위치에서 지정하고 싶은 경로로 이동하는 식으로 사용하면 된다.

 

 Node 서버의 포트번호로 결과를 확인하면 페이지의 수정사항이 실시간으로 안 변할 것이다. 왜냐하면 Node 서버에선 정적인 파일로 화면을 구현하고 있기 때문에 아무리 React의 화면을 변경하더라도 Node에서 보여지는 화면은 변하지 않는다. 그래서 React의 포트번호로 화면의 변경사항을 확인하면서 작업을 진행하다가 최종적으로 마무리 됐을 때 npm run build로 정적인 파일을 만들어서 Node서버와 연결하는 것이다.