React.js 와 Express 연동

최근 express와 socket.io를 이용해 채팅을 하는 프로젝트를 진행하다가 pug 탬플릿이 아닌 react를 이용해 화면을 구성하고 싶어 졌습니다. 그래서 이것저것 찾아보다 좋은 글들이 있어 읽고 따라 하는 과정을 글로 남깁니다.

 

다수의 블로그들을 돌아다녀본 결과 react와 express를 연동하는 것에 바로 들어가기 전에 서버 쪽에 대해서 조금 알면 도움이 될 것 같아 링크를 남깁니다. 깊게 알 필요는 없지만, 아~ 이런 게 있고 이렇게 구성되는 거구나 하고 이해만 하신다고 해도 오늘의 주제를 진행하기엔 충분할 것 같습니다.

 

---

Server

https://itsandtravels.blogspot.com/search/label/%EC%84%9C%EB%B2%84?&max-results=5

여행 다니는 공돌이

서버를 구성하는 것에 대한 얘기를 명료하게 써주셔서 공부하는데 큰 도움이 되었습니다.

 

제가 이해한 것을 간단히 적어보자면, 웹에서는  크게 사용자(Web Client)와 사용자가 얻고자 하는 데이터를 제공하는 서버가 존재합니다. 서버는 Web Server, Web Application Server, DB로 구성되어있으며 각각을 나누는 것에 따라 서버의 구성이 달라집니다. Web Server는 사용자의 화면에 표시될 정적인 요소(HTML)를 반환해주는 서버이고, Web Application Server는 동적인 요소들과 다양한 정보를 처리하기 위한 서버입니다. DB는 데이터들을 저장하고 있는 곳입니다.

 

---

Proxy

https://ko.wikipedia.org/wiki/%ED%94%84%EB%A1%9D%EC%8B%9C_%EC%84%9C%EB%B2%84

프록시 서버 - 위키백과, 우리 모두의 백과사전

프락시는 사용자와 서버 중간에서 통신을 돕는 중계기입니다. 사용자가 프락시를 통해 서로 다른 네트워크에 접속할 수 있도록 돕습니다.

 

---

React와 Express

 

react와 express를 연동하는 방법을 알아보겠습니다. 공부한 자료는 맨 아래 참고자료에 링크들을 적어 놓았습니다.

 

1. react 앱 생성

기본 react앱을 자동으로 만들어주는 패키지를 설치합니다.

>npm install create-react-app

 

프로젝트를 생성할 디렉터리에서 아래와 같이 입력합니다.

>npm create-react-app [프로젝트명]

 

 

기본 프로젝트의 구조

[프로젝트명]
ㄴnode_modules
ㄴpublic
ㄴsrc
ㄴ.gitignore
ㄴpackage.json
ㄴpackage-lock.json
ㄴREADME.md

 

 

2. server용 파일을 생성합니다.

루트 디렉터리에서 server폴더를 생성하고 app.js파일을 생성합니다. 또한 server디렉터리 아래 routes폴더를 생성하고 index.js 파일을 생성합니다.

 

프로젝트 구조

[프로젝트명]
ㄴnode_modules
ㄴpublic
ㄴserver
  ㄴroutes
    ㄴindex.js
  ㄴapp.js
ㄴsrc
ㄴ.gitignore
ㄴpackage.json
ㄴpackage-lock.json
ㄴREADME.md

 

app.js와 index.js에 대해서 각각 다음과 같이 작성합니다.

 

app.js

const express = require("express");
const app = express();

const indexRouter = require("./routes/index");

app.use(indexRouter);

const port = process.env.PORT || 3002;

app.listen(port, () => console.log(`listening on port ${port}`));

 

routes/index.js

const express = require("express");
const router = express.Router();

router.get("/", function (req, res, next) {
  res.end("index route /");
});

module.exports = router;

 

위와 같이 작성한 다음 react와 서버를 각각 동작시킵니다. 

[프로젝트명]>npm start

react 실행

react는 포트 번호 3000번에서 동작 중입니다.

 

[프로젝트명]/server>node app

서버 실행

express 서버는 3002번 포트에서 동작 중입니다.

 

각각 잘 동작하는 것을 확인했으니 다음 과정으로 넘어갑니다.

 

 

3. client에 넘겨줄 데이터 생성

간단하게 server/routes에 user라우터를 생성합니다. 그리고 express앱에 등록합니다.

 

routes/user.js

const express = require("express");
const router = express.Router();

router.get("/", function (req, res, next) {
  res.json([
    { id: 1, username: "VictorOladipo" },
    { id: 2, username: "RussellWstbrook" },
  ]);
});

module.exports = router;

app.js

const express = require("express");
const app = express();

const indexRouter = require("./routes/index");
const userRouter = require("./routes/users");

app.use(indexRouter);
app.use("/users", userRouter);

const port = process.env.PORT || 3002;

app.listen(port, () => console.log(`listening on port ${port}`));

 

4. Proxy와 Cors 설정

proxy를 위해 관련 패키지를 다운로드합니다.

>npm install http-proxy-middleware

 

해당 패키지를 설치한 뒤 루트 디렉터리의 src폴더에 setupProxy.js 파일을 생성합니다.

 

setupProxy.js

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

module.exports = function (app) {
  app.use(
    createProxyMiddleware("/users", {
      target: "http://localhost:3002",
      changeOrigin: true,
    })
  );
};

 

프락시에 대한 설정을 작성한 것으로 target url과 changeOrigin 옵션을 true로 주었습니다. 요청을 보낼 target과 본래의 요청 header를 target의 요청으로 바꿔주는 옵션입니다. 더 자세한 설명과 많은 옵션들은 아래의 링크에서 확인해주시면 되겠습니다.

https://www.npmjs.com/package/http-proxy-middleware#http-proxy-middleware-options

http-proxy-middleware

 

proxy를 설정한 다음은 cors문제를 해결하기 위해서 cors 패키지를 설치합니다.

>npm install cors

 

cors 문제라는 것은 도메인 또는 포트가 다른 포트로 자원을 요청하는 과정을 말합니다. 간단하게 설명해주신 글이 있어 링크 남깁니다.

 

https://velog.io/@wlsdud2194/cors 

CORS에 대한 간단한 고찰

또한 cors 패키지에 대한 설명은 다음의 링크를 참고하시면 됩니다.

https://www.npmjs.com/package/cors

cors

 

cors를 설치한 뒤 server/app.js를 수정합니다.

server/app.js

const express = require("express");
const app = express();
const cors = require("cors");

const indexRouter = require("./routes/index");
const userRouter = require("./routes/users");

app.use(cors());

app.use(indexRouter);
app.use("/users", userRouter);

const port = process.env.PORT || 3002;

app.listen(port, () => console.log(`listening on port ${port}`));

위와 같이 작성하신 다음 react와 서버를 각각 실행시키면 다음과 같은 화면이 등장합니다.

 

express server

React

위와 같이 잘 작동하고 있습니다. 이제 서버와 DB를 연결하여 더 확장 시킬수 있을거 같습니다.

---

# 참고 자료

https://itsandtravels.blogspot.com/search/label/%EC%84%9C%EB%B2%84?&max-results=5

여행 다니는 공돌이

https://ko.wikipedia.org/wiki/%ED%94%84%EB%A1%9D%EC%8B%9C_%EC%84%9C%EB%B2%84

프록시 서버 - 위키백과, 우리 모두의 백과사전

https://gaemi606.tistory.com/33

React | Node.js와 React 연동하기 (+ CORS 에러 해결하기)

https://hello-bryan.tistory.com/121

React + express 연동설정. 처음부터 따라하기

https://www.npmjs.com/package/http-proxy-middleware#http-proxy-middleware-options

http-proxy-middleware

https://velog.io/@wlsdud2194/cors 

CORS에 대한 간단한 고찰

https://www.npmjs.com/package/cors

cors