[React 5] 'create-react-app'으로 생성한 프로젝트의 오류와 경고 제거하기

리액트(react) 공부하려고 'create-react-app'로 프로젝트 생성하고 돌리는데....

수많은 경고가....

npm WARN deprecated topo@2.0.2: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated kleur@2.0.2: Please upgrade to kleur@3 or migrate to 'ansi-colors' if you prefer the old syntax. Visit <https://github.com/lukeed/kleur/releases/tag/v3.0.0\> for migration path(s).
npm WARN deprecated flatten@1.0.3: flatten is deprecated in favor of utility frameworks such as lodash.
npm WARN deprecated source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated request-promise-native@1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated eslint-loader@2.1.1: This loader has been deprecated. Please use eslint-webpack-plugin
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated hoek@4.2.1: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated left-pad@1.3.0: use String.prototype.padStart()
npm WARN deprecated sane@2.5.2: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
npm WARN deprecated html-webpack-plugin@4.0.0-alpha.2: please switch to a stable version
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated babel-eslint@9.0.0: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated uglify-es@3.3.9: support for ECMAScript is superseded by `uglify-js` as of v3.13.0
npm WARN deprecated joi@11.4.0: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated core-js@2.6.12: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
npm WARN deprecated core-js@2.6.4: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
added 1817 packages, and audited 1818 packages in 60s
79 packages are looking for funding
  run `npm fund` for details
68 vulnerabilities (12 low, 20 moderate, 34 high, 2 critical)
To address issues that do not require attention, run:
  npm audit fix
To address all issues (including breaking changes), run:
  npm audit fix --force
Run `npm audit` for details.

0 코드로 프로세스가 종료되었습니다.

 

'NPM'으로 뭘 하려고 하면 이런 건 일상이라

이 포스팅에서 제시하는 방법은 시도해보라는 의미에 가깝습니다.

 

0. 글로벌 패키지 업데이트

작업전에 NPM 전역 패키지를 업데이트 해줍니다.

(참고 : npm Docs - Updating packages downloaded from the registry )

npm update -g

 

 

1. 'NPM' 캐쉬 삭제 및 업데이트

일단 캐쉬를 삭제하고 'NPM'을 업데이트하여 최신버전이 될 수 있도록 해줍니다.

npm uninstall -g create-react-app && npm i -g npm@latest && npm cache clean -f && npx create-react-app@latest my-app --use-npm

//풀어쓰면
npm uninstall -g create-react-app
npm i -g npm@latest 
npm cache clean -f 
npx create-react-app@latest my-app --use-npm

 

 

 

2. 보안 취약성 제거

이놈의 보안 취약성은 툭하면 대량으로 나오니 안 없어지면 그려러니 하는 편이.....

 

취약성 수정에 사용하는 명령어는'audit fix'입니다.

npm audit fix 

//그래도 안되면
npm audit fix --force

이 포스팅이 'audit fix'를 설명하는 목적이 아니라서 간단하게 설명하면

'audit fix'는 취약성 업데이트해달라는 것이고

'audit fix --force'는 한 단계 상위버전(즉, 'major'버전)을 써서라도 수정하겠다는 명령어입니다.

 

 

마무리

리눅스 때 느꼈던 파편화의 공포를 프론트엔드에서도 느끼고 있습니다...

이게 오픈소스의 장점이면서 단점인지라 그러려니 하는 거죠.

 

그나마 누겟(nuget)은 UI로 해당 패키지의 정보가 나오니 보고 바꾸거나 수정하면 되는데....

npm은 하나하나 명령어를 치거나 인터넷을 검색해야 한다는 문제가 있습니다.

 

참고로 전 'create-react-app' 안 씁니다 ㅎㅎㅎㅎ