client(react)와 server(node.js) 연결하기 - proxy 연결 오류

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

* 오류를 따로 정리하는 페이지(컴퓨터 설정&오류)가 있으나 강의와 직접적인 오류라 생각해 이 곳에 정리

 

* 문제 원인 : dep_webpack_dev_server_on_after_setup_middleware] deprecationwarning: 'onaftersetupmiddleware' option is deprecated. please use the 'setupmiddlewares' option.

- 상황 : server 포트를 5000, client 포트를 3000으로 진행할 경우 이를 연결할 "Proxy"를 설치해야하는데 인프런 강의대로 코드 작성 시 위와 같은 오류 발생 

 

* 오류 내용 : middleware를 설치해야 함을 언급

 

* 해결책 : 공식문서 참고하기

(https://www.npmjs.com/package/http-proxy-middleware)

 

참고 : (https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%A9%B0-%EB%B0%B0%EC%9A%B0%EB%8A%94-%EB%85%B8%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EA%B8%B0%EB%B3%B8/lecture/37084?tab=community&q=458225)

 

setupProxy.js

 

//기존 강의 코드
const proxy = require("http-proxy-middleware");

// src/setupProxy.js
module.exports = function (app) {
  app.use(
    proxy({
      target: "http://localhost:5000",
      changeOrigin: true,
    })
  );
};


//변경 코드
const { createProxyMiddleware } = require("http-proxy-middleware");

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