인프런 커뮤니티 질문&답변

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;

},