[React] crbug/1173575, non-JS module files deprecated. / [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning

인프런에서
<따라하며 배우는 노드, 리액트 시리즈 - 기본 강의> 중 22강을 듣다가
강의 영상대로 똑같이 따라했는데 뭔가 다른 에러발생..!!

■ 에러 내용

1. 리액트 npm run start 실행 시 콘솔에 연결성공 내용이 뜨기 전에 아래 내용이 잠깐 떴다 사라짐

Starting the development server...

(node:17907) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:17907) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.

2. localhost:3000 응답에러가 뜨고 개발자도구 콘솔창에 아래와 같이 뜸

crbug/1173575, non-JS module files deprecated.

■ 왜 생김?

강의가 자주 업데이트 되는게 아니다보니까 최신버전과 다른 부분들이 있어서 그런듯

■ 해결방법

1. setupProxy.js 파일 내 코드 수정
   
   
   <수정 전>

const proxy = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(
        '/api',
        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,
        })
    );
};

2. 겸사겸사 package.json 파일 내 경로들도 체크하자
   
   
   

[참고]
리액트 공식 문서
https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually