inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

노드 리액트 기초 강의 #24 Concurrently

Please use the 'setupMiddlewares' option. 경고

1042

김동욱

작성한 질문수 1

0

Concurrently 적용 후 npm run dev를 실행하면

[1] (node:6792) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.

[1] (Use node --trace-deprecation ... to show where the warning was created)

[1] (node:6792) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.

경고가 발생했습니다.

서버는 작동되지만 경고가 거슬려서 찾아보고 방법 공유드립니다.

클라이언트 node_modules/react-scripts/webpackDevServer.config.js 에서 수정해주시면 됩니다.

 

수정 전

onBeforeSetupMiddleware(devServer) {

// Keep evalSourceMapMiddleware

// middlewares before redirectServedPath otherwise will not have any effect

// This lets us fetch source contents from webpack for the error overlay

devServer.app.use(evalSourceMapMiddleware(devServer));

if (fs.existsSync(paths.proxySetup)) {

// This registers user provided middleware for proxy reasons

require(paths.proxySetup)(devServer.app);

}

},

onAfterSetupMiddleware(devServer) {

// Redirect to PUBLIC_URL or homepage from package.json if url not match

devServer.app.use(redirectServedPath(paths.publicUrlOrPath));

// This service worker file is effectively a 'no-op' that will reset any

// previous service worker registered for the same host:port combination.

// We do this in development to avoid hitting the production cache if

// it used the same host and port.

// https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432

devServer.app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));

},

수정 후

setupMiddlewares: (middlewares, devServer) => {

if (!devServer) {

throw new Error('webpack-dev-server is not defined')

}

if(fs.existsSync(paths.proxySetup)) {

require(paths.proxySetup)(devServer.app)

}

middlewares.push(

evalSourceMapMiddleware(devServer),

redirectServedPath(paths.publicUrlOrPath),

noopServiceWorkerMiddleware(paths.publicUrlOrPath)

)

return middlewares;

},

 

 

react node.js

답변 1

0

인프런 AI 인턴

안녕하세요 김동욱 님, 인프런 AI 인턴이에요.
경고가 발생한 상황에 대한 해결 방법을 제시해주셨군요. 수고하셨습니다.
수정 전 코드와 수정 후 코드를 비교해주셨는데, 수정 후 코드에서는 기존의 ‘onBeforeSetupMiddleware’와 ‘onAfterSetupMiddleware’ 옵션 대신에 ‘setupMiddlewares’ 옵션을 사용하도록 변경된 것으로 보입니다.
수정 후 코드로 변경하시면 경고가 발생하지 않을 것입니다. 감사합니다!

깃 이메일이랑 비번이 필요하다고 하네요

0

38

1

404 에러

0

104

1

34강 인증 체크에서 element 사용 때문에 에러나시는 분들 이렇게 하심 됩니다.

0

121

1

로그인, 로그아웃, 토근 작동 안 함

0

240

0

로그아웃 findOneAndUpdate 함수

0

172

1

9강 오류 어떻게 해결하나요?

0

195

1

localhost 에서 연결을 거부했습니다.

0

1932

4

포스트맨에서 true가 안떠요

0

151

1

왜 안되나요

0

130

1

몽고db 연결 오류가 납니다 위에껀 입력한 코드, 아래껀 터미널이에요

0

243

1

로그아웃 401 에러(Unauthorized)

0

506

2

암호가 해싱되지 않고 입력값 그대로 db에 저장되는 문제

0

151

1

7강중에서

0

167

2

User.findByToken is not a function

0

213

1

루트 디렉토리

0

273

1

useState

0

563

1

프록시 잘 설정했는데도 404 오류 뜨는 분들

5

876

6

webpack 관련 에러 질문

0

221

1

리액트 관련 질문

0

275

1

14강 로그아웃 안됨

0

319

1

mongoDB 데이터 확인하는 법

0

411

1

postman 에러

0

294

1

선생님 리덕스를 사용하면 어떠한 부분이 좋은지 알 수 있을까요?

0

235

1

다음과 같은 에러들이 발생합니다.

0

274

1