Frontend

Node.js 프로젝트 종속 패키지 최신화하기

date
Apr 17, 2024
thumbnail
npm-check-updates-thumbnail.png
slug
npm-check-updates
author
status
Public
tags
Tools
Library
summary
npm outdated, npm update와 npm-check-updates 라이브러리를 알아보자
type
Post
category
Frontend
 

프로젝트 종속 라이브러리 버전 확인


오래된 프로젝트를 다시 뜯어보려다 종속 라이브러리의 버전을 확인해야 했다. 기본적으로 제공해주는 터미널 명령어 몇 가지로 라이브러리의 버전을 확인하고 업데이트하는 방법이 있다. npm outdated, npm update다.
 

npm outdated

$ npm outdated Package Current Wanted Latest Location @fortawesome/fontawesome-free 6.4.0 6.5.2 6.5.2 node_modules/@fortawesome/fontawesome-free @fortawesome/free-solid-svg-icons 6.4.0 6.5.2 6.5.2 node_modules/@fortawesome/free-solid-svg-icons prettier 2.8.8 2.8.8 3.2.5 node_modules/prettier serve 14.2.0 14.2.1 14.2.1 node_modules/serve vite 4.3.9 4.5.3 5.2.9 node_modules/vite
  • 현재 터미널이 위치한 프로젝트의 종속성(dependencies) 중에서 업데이트된 버전이 있는지 확인.
  • 사용 중인 패키지들의 최신 버전 사이의 차이를 보여준다.
  • 프로젝트에서 업데이트가 필요한 패키지들을 식별하는 용도로 사용한다.
  • 선택적으로 업데이트 할 수 있다.
 

npm update

npm update package_name
  • 특정 패키지만 선택해서 업데이트 할 수 있다.
 
npm update
  • 모든 패키지를 최신 버전으로 업데이트 한다.
 
이후 다시 npm outdated 명령어를 사용하여 업데이트가 적용되었는지 확인한다.
 
 

npm update를 사용하는 경우에 기억해야 할 중요한 점이 있다.

  • package.json 파일의 버전 제약 조건에 따라 업데이트가 된다는 뜻이다.
  • 다른 패키지의 종속성을 유지하며 버전을 올리기 때문에 메이저 업데이트 같은 경우 일일이 선택하여 업데이트 해야 하는 귀찮은 경우가 생긴다.
 
 
 
 

걍 모든 패키지를 최신 버전으로 업데이트 해주면 안되나용?

 
 
 
 

npm-check-updates


 
npm-check-updates 라이브러리를 소개한다. 주간 40만 다운로드 수를 기록하고 있는 인기 라이브러리이기도 하고, 완전 새로 생긴 라이브러리도 아니다.
 
 
notion image
 
💡
npm-check-updates
  • packge.json에 있는 패키지들을 일일이 확인할 필요 없이 모두 새 버전으로 수정
  • 새 버전으로 바로 업데이트하지 않고, package.json 파일만 수정
 

기본 사용법

$ ncu Checking C:\Development\...\package.json [====================] 5/5 100% @fortawesome/fontawesome-free ^6.4.0 → ^6.5.2 @fortawesome/free-solid-svg-icons ^6.4.0 → ^6.5.2 prettier ^2.8.8 → ^3.2.5 serve ^14.2.0 → ^14.2.1 vite ^4.3.9 → ^5.2.9 Run ncu -u to upgade package.json
  • 업데이트 할 버전을 확인했다면 ncu -u 명령어를 통해 package.json을 수정해준다.
 
$ ncu -u Upgrading C:\Development\...\package.json [====================] 5/5 100% @fortawesome/fontawesome-free ^6.4.0 → ^6.5.2 @fortawesome/free-solid-svg-icons ^6.4.0 → ^6.5.2 prettier ^2.8.8 → ^3.2.5 serve ^14.2.0 → ^14.2.1 vite ^4.3.9 → ^5.2.9 Run npm install to install new versions.
  • package.json이 수정되었다.
  • npm i를 통해 변경된 패키지 버전을 모두 인스톨하면 끝
 
 
 

인터랙티브 모드

$ ncu --interactive Upgrading C:\Development\...\package.json [====================] 5/5 100% ? Choose which packages to update » ↑/↓: Select a package Space: Toggle selection a: Toggle all Enter: Upgrade ❯ (*) @fortawesome/fontawesome-free ^6.4.0 → ^6.5.2 (*) @fortawesome/free-solid-svg-icons ^6.4.0 → ^6.5.2 (*) prettier ^2.8.8 → ^3.2.5 (*) serve ^14.2.0 → ^14.2.1 (*) vite ^4.3.9 → ^5.2.9
  • ncu --interactive 혹은 ncu --i 명령어를 사용하면 선택이 가능하다.
 
$ ncu -i --format group Upgrading C:\Development\...\package.json [====================] 5/5 100% ? Choose which packages to update » ↑/↓: Select a package Space: Toggle selection a: Toggle all Enter: Upgrade Patch Backwards-compatible bug fixes ❯ (*) serve ^14.2.0 → ^14.2.1 Minor Backwards-compatible features (*) @fortawesome/fontawesome-free ^6.4.0 → ^6.5.2 (*) @fortawesome/free-solid-svg-icons ^6.4.0 → ^6.5.2 Major Potentially breaking API changes ( ) prettier ^2.8.8 → ^3.2.5 ( ) vite ^4.3.9 → ^5.2.9
  • ncu -i --format group 명령어를 사용하면 패키지 업데이트 내용을 그룹화하여 보여준다.
 
이 밖에도 커스텀하는 방법, 특정 라이브러리나 특정 버전을 제어하는 방법 등이 소개되어 있는데, 주 용도인 “싹다 새걸로 주세요”와는 조금 동떨어진 것 같아서 이 포스트에서는 제외한다.
 

 
패키지 버전 제어에 엄격함이 필요하다면 npm update를 사용하고, 모든 종속성을 최신 버전으로 업데이트하고자 하거나 주로 실험적인 프로젝트를 진행할 때는 필요에 따라 npm-check-updates를 사용할 수 있을 것 같다.