제목은 Express로 하겠습니다. 근데 이제 리액트를 곁들인...

Junbro·2022년 8월 6일

오늘은 지금까지 배웠던 지식들을 활용하여 Node(Express)와 React를 합쳐보았다.

그리고 리액트 코드에서 ‘fetch’ API를 이용하여 Express에 요청하고 Express에서 mongoDB에 저장된 데이터를 가지고 와 화면에 보여주는 과정을 구현해보았다.

최종적으로 두개의 환경을 합쳤을 때 실제로 배포가 되는것까지 확인하기 위해 Heroku를 통해 배포해 보았다.

1. 개발 환경

먼저 client 디렉토리에는 리액트를, server 디렉토리에는 node + express 환경을 설정해주었다.

그 후, client 에는 CRA(Create-react-app), server에는 express-generator를 이용하여 손쉽게 개발 환경을 구성하였다.

npm install -g create-react-app

create-react-app client

npm install -g express-generator

express server

그리고 client 폴더에 있는 리액트 코드를 빌드하여 빌드된 파일을 server 폴더에 위치시켜줄 것이다.

그 후 Express에서 ‘build’ 폴더를 정적 디렉토리로 지정하여 리액트 ‘index.html’을 사용할 것이다.

‘build’ 폴더 내부에 있든 JS파일을 이용하여 리액트가 우리의 화면을 그려줄 것이다.

즉, 리액트와 Express가 하나의 서버에 존재하는 것이다.

그럼 이제부터 생각하는 것을 이루어내기 위해 Server, Client 각각의 과정을 살펴보자.

2. Server (Express)

서버 쪽 코드는 이미 express-generator를 통하여 서버를 실행시키는데 필요한 기본적인 것들이 갖추여져 있다.

const createError = require("http-errors");
const express = require("express");

const app = express();

app.set("views", path.join(__dirname, "views"));
app.set("view engine", "jade");

app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, "public")));
...

첫페이지는 서버에서 렌더링 된 html을 응답으로 주도록 하였다. (Sever Side Rendring)

app.get("/", (req, res) => {
  res.render("index");
});

그 후 ‘/react’ 경로에는 리액트 앱을 사용한다. (리액트를 사용하는 경로라는 걸 명시하기 위해 사용한 url)

아래의 코드를 통해 리액트에서 빌드된 코드를 사용할 수 있게된다.

app.use("/react", express.static(path.join(__dirname, "build")));

그 후 ‘/react’ 경로에 접근하였을 때 ‘index.html’파일을 응답해준다.

app.use("/react", reactRouter);

reactRouter.get("/", function (req, res, next) {
  res.sendFile(path.join(__dirname, "./build/index.html"));
});

index.html을 보내주면 해당 파일에서 리액트 JS 파일을 요청한다.
그 후에는 우리가 알고있는 리액트처럼 JS파일을 이용해서 화면을 그린다.

그리고 서버 ‘/users’에 요청하면 MongoDB에 저장되어 있는 User 정보를 ‘JSON’으로 응답해주게 하였다.

app.use("/users", usersRouter);

usersRouter.get("/", async (req, res, next) => {
  try {
    const users = await User.find().lean();

    return res.json(users);
  } catch (error) {
    next(createError(500));
  }
});

2. Client (React)

클라이언트 쪽도 CRA 명령어를 통해 이미 기본적인것들이 갖추어진 상태이다.

여기에 ‘react-router-dom’을 이용하여 기본적인 리액트 앱을 구성해보자.

import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter basename="/react">
    <App />
  </BrowserRouter>
);

리액트 최상위 라우터의 기본 경로를 ‘/react’로 설정

import React from "react";
import { Link, Route, Routes } from "react-router-dom";
import Home from "./Home";
import Users from "./Users";

function App() {
  return (
    <div>
      <Link to="/">
        Home
      </Link>
      <Link to="/users">
        User
      </Link>
      <Routes>
        <Route path="/" element={<Home />}></Route>
        <Route path="/users" element={<Users />}></Route>
      </Routes>
    </div>
  );
}

export default App;

그리고 ‘Users’ 컴포넌트에서 서버에 요청하여 DB에 저장되어 있는 유저 정보를 보여준다.

import React, { useEffect, useState } from "react";

function Users() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const getUsers = async () => {
      const response = await fetch("/users");

      if (!response.ok) {
        const message = `An error has occured: ${response.status}`;
        throw new Error(message);
      }

      const users = await response.json();

      return users;
    };

    getUsers().then((data) => setUsers((prev) => prev.concat(data)));
  }, []);

  return (
    <>
      <ul>
        {users.map((user) => (
          <li>{user.name}</li>
        ))}
      </ul>
    </>
  );
}

fetch("/users") 를 통해 Express서버에 요청 (경로를 주목할 필요가 있다)
리액트 ‘users’ state 갱신
화면에 리스트로 출력

그리고 리액트 ‘package.json’에서 기본 홈페이지 경로를 ‘/react’로 설정해 주었다.

3. 합체

지금부터 리액트와 Express를 합치기 위해 리액트에서 ‘build’ 스크립트를 통해 빌드된 폴더를 ‘server’ 폴더로 옮길것이다.

그리고 ‘Heroku’배포를 위해 필요한 명령어들을 정의해 주어야 한다.

그러기 위해서는 client, server 전체를 아우르는 ‘package.json’이 필요하다.

{
  "name": "express-react-project",
  "version": "1.0.0",
  "description": "배포시 필요한 스크립트 정의",
  "scripts": {
		...
  },
  "author": "",
  "license": "ISC"
}

이제 이 ‘package.json’파일을 통해 우리가 해야하는 일을 정의해보자.

clinet 폴더로 이동
npm ci (clinet에서 필요한 node module를 설치하기 위해)
client (리액트) 빌드 (npm run build)
빌드된 폴더를 ‘server/build’로 옮겨주기
server 폴더로 이동
npm ci (server에서 필요한 node module를 설치하기 위해)
npm run start (node ./bin/www)

위 과정을 명령어 스크립트로 정리해보자.

{
  "name": "express-react-project",
  "version": "1.0.0",
  "description": "배포시 필요한 스크립트 정의",
  "scripts": {
    "client-build": "cd client && npm ci && npm run build cd ../",
    "server-build": "cd server && npm ci && cd ../",
    "heroku-prebuild": "npm run client-build && npm run server-build && mv ./client/build ./server/build",
    "start": "cd server && npm run start"
  },
  "author": "June",
}