[Node] Node Express, React 프록시 연동

 

 Express 서버와 React 클라이언트의 개발을 통해 서로를 연결하려고 합니다. 각각의 특징들과 장점들을 대부분 배우셨을거라고 생각합니다. 서버와 클라이언트가 분리됨으로써 협업을 하기 좋은 구성이 되고 맡은 바 임무에 최고의 효율을 낼 수 있는 프로젝트라고 생각합니다. 

 

 리액트는 더불어 리액트 네이티브라는 것이 존재하기 때문에 리액트의 문법을 알게 되면 iOS와 안드로이드 개발에서 도움이 많이 됩니다. 따라서 본 프로젝트를 통해 리액트를 좀 더 알아보고, 서버와 클라이언트를 분리함으로써 유지보수가 쉬운 프로젝트를 만들고자 하는 것이 목표입니다.

 

 먼저 처음 프로젝트를 생성하는 것을 시작으로 하겠습니다.

 

 

# Contents

---

• Express 생성
• 리액트 생성
• 연결

 

 

# Express 생성

---

 우선 프로젝트의 의존성을 다운로드합니다. 아래 커맨드를 사용하여 의존성을 다운받아주세요.

 

npm install --save express body-parser http-proxy-middleware form-data connect-flash

 

 다음은 프로젝트 구성 및 코드입니다.

 루트 디렉토리에 index.js가 존재하고 각각의 라우터들은 routers 폴더로 묶었습니다. 그리고, 라우터 안에 필요한 함수들은 controller 디렉토리 안에 생성하였습니다. 이 코드들은 프로젝트의 예시이기 때문에 기본적인 설정은 알아서 해주시면 되겠습니다.

 

 다음은 index.js 코드입니다.

 

//* import area */
import express from "express";
import bodyParser from "body-parser";
import rHome from "./routers/rHome.js";
import rError from "./routers/rError.js";
import flash from "connect-flash";

const port = 3000;

//* variable area */
const app = express();

//* middle ware settings */
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extends: true }));
app.use(flash());

//* router settings */
app.use("/", rHome);
app.use(rError);

//* server settings */
app.listen(port, () => {
    console.log(`server listen : ${port}`);
});

 

 

이렇게 구성되었으면 기본적으로 서버가 열리게 됩니다. 물론 라우터 처리는 당연히 하셔야겠습니다만은... 현재 라우터 처리를 보여주지 않는 이유는 리액트와의 연결을 프록시로 설정해줄 것이기 때문입니다. 결과 값은 아래와 같습니다.

 

 

 

리액트와의 프록시 설정은 다음 내용에서 차차 알려드리겠습니다.

 

 

# react 생성

---

 리액트 프로젝트를 생성하는 방법은 직접 웹팩과 바벨을 이용하여 프로젝트를 생성하는 방법이 있지만 이 방법은 효율적이지 않다고 생각합니다. 기본기를 배울 수 있는 방법이지만 효율적인 방법은 아래와 같은 명령어를 이용하는 것입니다.

 

 다음 명령어를 생성한 노드의 루트 디렉토리에 입력해주세요.

 

npx create-react-app front-app
cd front-app
npm install --save http-proxy-middleware

 

 프로젝트가 생성되었으면 아래 파일을 생성하신 후 코드를 입력해주시기 바랍니다.

 

 파일명은 setupProxy.js로 만들었고, 코드는 아래를 참고해주세요

 

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

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

 

 그러면 리액트로 접속하였을 때 노드 서버로 프록시 되어 보여주게 됩니다.