[React] Node + Express 서버와 React 연동하기

이번 게시물에선 유저가 메인페이지 접속하면 서버가 리액트로 만든 html 파일을 보내주는 것을 해보겠습니다.

 

 

서버만들 때 Express + MongoDB를 사용하면 JS만으로도 풀스택 개발을 할 수 있는데,

여기에 React를 더할 수 있습니다.

---

1️⃣ express 라이브러리를 설치합니다.

1) 작업 폴더를 오픈한 상태에서 터미널에 npm init 입력 후 선택하라고 뜨는 것들을 끝날 때까지 Enter합니다.

2) npm install express 입력합니다.

3) server.js 파일을 만들고 아래 코드를 작성합니다.

const express = require('express');
const path = require('path');
const app = express();

const http = require('http').createServer(app);
http.listen(8080, function(){
    console.log('listening in 8080');
});

4) 터미널에서 node server.js 입력하면 브라우저로 localhost:8080 접속 시 서버가 뜹니다.

  (nodemon이 있다면 nodemon server.js를 입력 - 서버 코드 바꿀 때마다 node server.js 다시 입력하지 않아도 됩니다.)

 

- 브라우저로 localhost:8080 접속하였더니 서버 동작이 되는 것을 확인할 수 있습니다.

---

2️⃣ 메인페이지 접속하면 HTML 파일 보내기

- 우선 [public] 폴더를 생성하여 main.html 파일 생성 후 간단한 코드를 작성합니다.

<h4>Hello World!</h4>

 

- 아래 코드를 server.js에 작성합니다.

app.use( express.static( path.join(__dirname, 'public') ) );

app.get('/', function(request, response){
    response.sendFile( path.join(__dirname, 'public/main.html') )
});

* app.use() : 서버의 요청과 응답 사이에 실행할 코드

* express.static() : 특정 폴더 안의 파일들을 static 파일로 잘 보낼 수 있습니다. build 폴더 안에 html, css, js, img 파일들도 잘 사용할 수 있게 됩니다.

 

- 다시 localhost:8080 으로 접속하면 아래 사진처럼 'Hello World!' 가 출력됩니다.

---

3️⃣ React 프로젝트 만들기

- 터미널에 npx create-react-app 프로젝트명 작성하여 React 프로젝트를 생성합니다.

- 프로젝트 생성한걸 오픈하고, 리액트 프로젝트 개발합니다.

- 개발이 끝나면 터미널에 npm run build 를 입력합니다.

  * [build] 폴더가 생성되고, React 완성본 파일이 들어갑니다.

---

4️⃣ React로 만든 HTML 전송하기

- server.js 로 돌아와 코드를 다음과 같이 수정합니다.

app.use( express.static( path.join(__dirname, 'react-project/build') ) );

app.get('/', function(request, response){
    response.sendFile( path.join(__dirname, 'react-project/build/index.html') )
});

 

- 다시 localhost:8080 에 접속하면 아래 사진처럼 React로 만든 HTML이 출력되는 것을 확인할 수 있습니다.

---

💡 React 프로젝트 내에서 라우팅하려면 서버에 이런 기능이 필요합니다 !

  * 유저가 URL 아무거나 입력하면 index.html 보냅니다.

app.get('*', function(request, response){
    response.sendFile( path.join(__dirname, 'react-project/build/index.html') )
});

 

---

💡 서브디렉토리에 React App 발행하고 싶은 경우

- 지금 메인페이지가 React HTML이 뜨는데,

  '/react' 접속하면 React App 보여주고 싶을 땐 아래 코드처럼 server.js 라우팅을 바꿔줍니다.

app.use( '/', express.static( path.join(__dirname, 'public') ) );
app.use( '/react', express.static( path.join(__dirname, 'react-project/build') ) );

app.get('/', function(request, response){
    response.sendFile( path.join(__dirname, 'public/main.html') )
});

app.get('/react', function(request, response){
    response.sendFile( path.join(__dirname, 'react-project/build/index.html') )
});

 

- React 프로젝트 내의 package.json에 homepage라는 항목을 기입하고,

  npm run build를 합니다.

{
  "homepage": "/react",
  ... 등
 }

 

- 그럼 localhost:8080 접속했을 땐 main.html이 뜨고,

  localhost:8080/react에 접속했을 땐 index.html이 뜨는 것을 확인할 수 있습니다.

 

- 개발 중간 서버 API + React 잘되는지 확인할 때 매번 build를 하기보단, proxy를 이용하시면 됩니다.