[React] 프로세스 구동 시 찍히는 'onBeforeSetupMiddleware option' is deprecated. 문제 해결

React 웹을 npm run start로 실행하면, 정상 실행 직전 터미널에 꼭 찍히는 내용이 있다.

(node:35656) [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:35656) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE]
DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated.
Please use the 'setupMiddlewares' option.

나는 실행에는 문제 없으니 계속 넘어갔었는데, 시험 인증 받는 과정에서 해당 부분을 수정사항으로 트집 잡히게 될까봐 염려가 된 디자이너(프론트 겸업 중)님께서 해당 문제를 고치는 방안을 검색해서 적용하셨는데 git push가 안된다고 이야기해주셨다. 왜인고 하니..

 

[블로그] onAfterSetupMiddleware is Deprecated | onBeforeSetupMiddleware is Deprecated 문제 해결방법

위 글을 참고해서 적용해주셨는데, 위 글에서 참고한 내용이 github issues에 올라온 내용이었고, 많은 사람들이 이 문제를 어떻게 해결할 것인지에 열띤 토론의 장을 펼치고 있었다.

 

디자이너님 말씀대로 분명 수정이 됐고 프로세스를 실행하면 더 이상 해당 주의 문구가 뜨지 않는다. 하지만 이 수정 방법에는 문제가 있었으니, 바로 node_modules 내부에 있는 라이브러리를 직접 수정했다는 것이다.

node_modules의 경우 용량이 매우 큰 관계로 대부분 package.json에 dependencies 버전을 명시해서 그것만 서로 git push & pull로 공유를 한다. node_modules 자체를 git에 올리지 않는다. git add & commit할 때 포함돼서 올라가지 않도록 .gitignore 파일에 /node_modules를 추가까지 해준다. 우리가 추가해주지 않아도 이미 설정되어 있기도 하다.

 

그럼 어떤 문제가 발생하느냐? git commit을 할 수 없고 다른 사람들과 해결한 내용을 공유할 수도 없다.

다른 해결 방법을 찾아봐야 한다.

 

github issues 내용을 계속 아래로 스크롤하다보면 react-scripts 모듈의 버전 문제라고 말해주고 있다.

클릭하면 깃허브 이슈 코멘트 링크로 연결됩니다.

5.0 이상 버전으로 업그레이드한 경우 동일한 문제가 발현한다는 것이었고, 5.70.0에서 컴파일되었다는 내용이다. 그래서 우리에게 설치된 버전이 몇인지 확인해봤더니, "react-scripts": "^5.0.1"이었다. 어? 이건가보다.

어째서인지 9개의 싫어요를 받았지만, 위 내용에서 말하는 react-scripts 모듈의 문제가 맞는 것 같다는 생각이 들었다. 그래서 다른 내용들을 읽으면서 스크롤을 좀 더 내려보았더니, 아래와 같이 2개의 좋아요와 5개의 싫어요, 1개의 하트를 받은 미묘한 글을 발견하게 된다.

클릭하면 깃허브 이슈 코멘트 링크로 연결됩니다.

 

코멘트에서 말하는 링크를 쫓아가본 결과, 필요한 내용을 얻을 수 있었다.

→ DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated

클릭해보면 Update all modules to the latest version으로 자동 스크롤이 될건데, 내용 그대로다.

모든 모듈을 업데이트(npm update)하고, npm audit fix --force로 수정해주는 것이다.

 

이 방법을 시도하기 전, 내 상태를 먼저 점검해볼 필요가 있다.

$ npm version
{
  test: '0.1.0',
  npm: '9.6.5',
  node: '16.13.2',
  v8: '9.4.146.24-node.14',
  uv: '1.42.0',
  zlib: '1.2.11',
  brotli: '1.0.9',
  ares: '1.18.1',
  modules: '93',
  nghttp2: '1.45.1',
  napi: '8',
  llhttp: '6.0.4',
  openssl: '1.1.1l+quic',
  cldr: '39.0',
  icu: '69.1',
  tz: '2021a',
  unicode: '13.0',
  ngtcp2: '0.1.0-DEV',
  nghttp3: '0.1.0-DEV'
}

나의 npm 버전은 9.6.5이고 node 버전은 16.13.2이다. 이제 업데이트를 진행하고 audit fix --force까지 진행해주자.

상당히 많은 내용이 Deprecated되고 수정이 일어난다.

이 과정이 끝나고 나면 package.json에 변동이 생기게 되는데, 딱 하나의 모듈만 버전이 다운그레이드된 것을 확인할 수 있다.

아까 예상해 마지 않았던 "react-scripts": "^4.0.3" 변경을 확인하고 변경된 패키지 목록에 맞게 npm install을 다시 진행하면, 일해라~~ 절해라~(이래라 저래라)하던 주의 문구가 더 이상 터미널에 찍히지 않고 프로세스가 정상 작동되는 것을 확인할 수 있게 된다.

 

npm version은 다시 확인해봤지만 큰 변동은 없어 보인다. 아예 없나?

$ npm version
{
  test: '0.1.0',
  npm: '9.6.5',
  node: '16.13.2',
  v8: '9.4.146.24-node.14',
  uv: '1.42.0',
  zlib: '1.2.11',
  brotli: '1.0.9',
  ares: '1.18.1',
  modules: '93',
  nghttp2: '1.45.1',
  napi: '8',
  llhttp: '6.0.4',
  openssl: '1.1.1l+quic',
  cldr: '39.0',
  icu: '69.1',
  tz: '2021a',
  unicode: '13.0',
  ngtcp2: '0.1.0-DEV',
  nghttp3: '0.1.0-DEV'
}

 

아무튼 문제 해결 완료!