client(react)와 server(node.js) 연결하기

* 인프런의 "따라하며 배우는 노드, 리액트 시리즈 - 기본 강의" 내용 중 정리따라하며 배우는 노드, 리액트 시리즈 - 기본 강의"따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

 

1. proxy

- 언제 사용? react와 node.js의 서버가 다를 경우(한 쪽은 3000, 한 쪽은 5000 사용 시)

(1) client 내 package.json에 'http-proxy-middleware" 설치

(2) client 내 src 폴더에 setupProxy.js 만들기, 아래 내용 추가

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

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

 

 

2. concurrently

- 언제 사용?  react와 node.js의 서버가 같을 경우

(1) npm install concurrently 설치(client, server에 속하지 않은 package.json에 설치할 것)

(2) 2-(1)에서 설명한 같은 package.json에 "scripts" 부분에 아래의 내용 입력

- server/index.js : node.js가 실행되는 곳

- prefix client : client 폴더에서 npm run start 시작하려는 것

"scripts": {
    "start": "node server/index.js",
    "server": "nodemon server/index.js",
    "dev" : "concurrently \"npm run server\" \"npm run start --prefix client\""
  },