[TIL] npm update의 동작 원리와 npm-check-updates로 최신화하기

📌 들어가며

우테코 8기 프리코스를 준비하면서, 이전에 우테코 7기에서 사용했었던 package.json을 그대로 가져와 프로젝트를 세팅했다.

1년 넘는 시간이 지나며 내부 패키지들이 여러 번 업데이트되었을 것 같아 npm update 명령어로 최신 버전으로 맞추려 했지만, 의외로 아무것도 바뀌지 않았다.

이유를 찾아보니 npm은 단순히 모든 패키지를 최신으로 올려주는 게 아니라, package.json에 지정된 버전 범위(^, ~, 또는 고정 버전) 에 따라 업데이트를 제한적으로 수행한다는 걸 알게 되었다.

그래서 오늘은 npm update가 실제로 어떻게 동작하는지, 그리고 그 한계를 넘어 최신 메이저 버전까지 한 번에 업데이트하는 방법을 정리했다.

---

📌 npm update의 동작 원리

npm update는 package.json 파일에 지정된 버전 범위를 기준으로 가능한 최신 버전을 설치한다.
즉, 단순히 모두 최신으로 올리는 것이 아니라 허용된 범위 안에서만 최신으로 올리는 개념이다.

// package.json 의 일부

{ 
  "devDependencies": { 
    "eslint": "^8.57.1", 
    "prettier": "~3.3.3", 
    "eslint-plugin-auto-js-extension": "0.1.1" 
  }
}

 

💡 버전 범위 지정 방식

^ 또는 ~가 붙은 패키지만 npm update 실행 시 최신으로 올라간다.

 

1. ^

• 메이저 버전 고정, 마이너/패치 허용
• ex) ^8.57.1 → 8.x.x
• ex) 8.70.0 (✅) / 9.0.0 (❌)

2. ~

• 마이너 버전 고정, 패치만 허용
• ex) ~3.3.3 → 3.3.x
• ex) 3.3.5 (✅) / 3.4.0 (❌)

3. 없음

• 완전 고정
• ex) 0.1.1 → 0.1.1
• 업데이트 없음 (🚫)

 

⚠️ 메이저 버전은 자동으로 안 올라간다

npm update는 버전 범위 밖의 업데이트(예: 8 → 9) 를 수행하지 않는다.
즉, eslint의 최신 버전이 9.x.x여도 ^8.57.1로 지정되어 있으면 계속 8버전대에 머문다.

이럴 때 필요한 도구가 바로 npm-check-updates다.

---

📌 npm-check-updates로 완전 최신화하기

1. 설치

npm install -g npm-check-updates

2. 사용

ncu # 업데이트 가능한 패키지 목록 확인
ncu -u # package.json의 버전 필드를 최신으로 변경
npm install

# 위의 명령어를 한줄로 요약 👇
npx npm-check-updates -u && npm install

 

이렇게 하면 메이저 버전까지 포함해 package.json의 모든 패키지를 최신으로 갱신할 수 있다.

 

🔥 npm-check-updates 적용

npx npm-check-updates -u && npm install

(왼) 적용 전 의존성, (오) 적용 후 의존성

---

📚 오늘의 배움

• npm update는 버전 범위(^, ~, 없음)에 따라 다르게 동작한다.
• 메이저 버전까지 업데이트 하기 위해선 npm-check-updates를 사용해야 한다.
• 앞으로 패키지 버전을 올릴 때 버전 범위를 의식적으로 관리해야겠다.

---

🚨 10/18 추가

npx eslint .

명령어를 사용하는 중에 기존에 사용중이던 .eslintrc.cjs 파일은 ESLint v9.0.0 이상부터는 지원이 안된다고한다.

추가적으로 호환이 안되는 ESLint 규칙들이 아직은 많은 것 같아 ESLint는 이전 메이저 버전 8 으로 되돌리기로 결정하였다.