React 프론트를 Express 백엔드와 연결하기

NodeJS X CRA (proxy)

 

🧷 프론트와 백단의 분리

 

  PUG, EJS와 같은 템플릿 엔진이 아닌 React를 프론트로 삼아보자. 

 

  우선, 작성한 React는 한 폴더 내로 몰아주자. 필자의 경우 아래와 같이 frontend라는 폴더 내로 모든 React 파일, 폴더들을 넣어주었다.

 

 

  넣은 후에는 상위 폴더로 이동해서 백엔드 코딩을 하자. package.json의 일부를 가져와 보았다. npm run front를 입력하면 front 폴더로 이동(cd)하여 npm start를 진행하고 npm run server를 입력하면 노드로 app.js를 실행한다.

이 두 과정을 하나로 합친 것이 npm run dev이다. 

 

npm init

//package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "front": "cd frontend && npm start",
    "server": "nodemon --exec node app.js",
    "dev": "concurrently --kill-others-on-fail \"npm run front\" \"npm run server\""
  },
  "devDependencies": {
    "concurrently": "^5.1.0",
    "nodemon": "^2.0.2"
  },

 

  여기서서 이용하는 개발 의존 패키지로 concurrently가 있는데, 어렵게 생각하지 말고 여러 명령어를 동시에 실행해주는 패키지라고 보면 된다. 

 

concurrently

  문서에 따르면 이용하는 방법은 다음과 같다고 한다.

"start": "concurrently \"command1 arg\" \"command2 arg\""

 

 

🚨 분리 후 코딩할 때 npm를 이용해 설치할 때 경로를 잘 확인해야 한다. 프론트에만 필요한 패키지는 cd 명령어를 이용해 이동한 다음 설치하도록 하자.

 

 

 

🧷 프론트와 백단의 정보 교환

 

프론트에서 백단으로 axios나 fetch를 날리면 해당 경로를 담당하는 백엔드에서 적절한 로직을 처리한 후 다시 돌려주는 형식입니다.

 

 

1️⃣ 백단의 router에서 JSON의 형태 가공 후 프론트로 넘겨줄 준비하ㅣ

 

  express 백단의 다음 router에서 프론트로 접속하면 다음의 JSON을 넘겨준다고 가정합시다. (보통 DB에서 정보를 빼와서 앞단으로 전달하는 게 대부분이기만 DB까지 세팅하는 것은 본질을 흐리므로 하드 코딩해서 보내보겠습니다)

//middleware
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

//router
app.get("/api/customers", (req, res) => {
  res.send([
    {
      id: 1,
      image: "https://placehold.it/64/64",
      name: "홍길동",
      birthday: "945323",
      gender: "남자",
      job: "회사원",
    },
    {
      id: 2,
      image: "https://placeimg.com/64/64/2",
      name: "김마리",
      birthday: "945323",
      gender: "여자",
      job: "대학원생",
    },
    {
      id: 3,
      image: "https://placeimg.com/64/64/3",
      name: "유사월",
      birthday: "945323",
      gender: "남자",
      job: "디자이너",
    },
  ]);
});

 

2️⃣ front에서는 proxy 설정후 fetch나 axios를 통해 정보를 가져와 state에 저장, 활용합니다.

  프론트단의 package.json의 맨 하단에 proxy를 설정합니다. proxy를 설정한 경우 앞으로 Full URL (https://로 시작하는) 형태의 URL을 작성하지 않는 이상은 모든 API요청이 proxy서버로 들어가게 됩니다.

 

  🚨 프록시를 설정한 경우 서버를 껐다가 다시 켜야 합니다. 

  🚨 네트워크 탭에서 보면 정보를 받아오는 부분이 proxy로 설정한 곳이 아님을 볼 수 있습니다. 프록시의 특성이므로 상관하지 맙시다. 정보만 잘 받아옵시다.

 

 

https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually

이 모듈을 사용하는게 훨씬 편합니다 (CRA 사용 전제)

express에서 CORS 해결 : cors 모듈 / Proxy 설정

CRA 프록시 서버 설정하는 방법

 

proxy 설정 이후에는 "/api/customers"와 같이 짧은 형태로 fetch나 axios를 통해 백단에서 보낸 정보를 받아올 수 있습니다. async/await를 잊지 말고 사용해줍시다. 외부에서 정보를 받아오는 것이니 비동기적으로 일을 처리해야 합니다.

 

import React, { useState, useEffect } from "react";
import Customer from "./Customer";

const App = (props) => {
  const [customer, setCustomer] = useState([]);

  const callApi = async () => {
    // proxy에 설정한 주소에 fetch 인자의 주소를 덧붙여서 정보를 받아옵니다.
    const res = await fetch(`/api/customers`);
    const body = await res.json();
    setCustomer(body);
  };

  useEffect(() => {
    callApi();
  });

  return (
    <div>
      {customer.map((c) => {
        return (
          <Customer
            key={c.id}
            id={c.id}
            image={c.image}
            name={c.name}
            birthday={c.birthday}
            gender={c.gender}
            job={c.job}
          />
        );
      })}
    </div>
  );
};
export default App;