프론트 개발자라면 꼭 알아야 할 package-lock.json의 비밀!
npm 5.0부터 npm install을 하면 생기는 package-lock.json 파일이 있습니다.
어차피 모듈 관리는 package.json에서 하고 있으니 시스템 구동상 필요한 파일이겠거니 하고 신경을 쓰지 않던 애였는데요.
같은 팀원끼리 협업을 하면서 설치된 패키지들이 서로 버전이 달라 오류가 발생하는걸 몇 번 겪고 이를 해결하기 위해 yarn berry, pnpm을 찾아보다가 package-lock.json의 용도를 알게 됐습니다.
| package-lock.json파일이란?
패키지들을 npm을 통해서 설치하게 되면 자동으로 생성하게 되는 파일인데 node_modules 폴더에 설치된 패키지들의 의존성 트리를 기록하고 있는 파일입니다. lock 파일에는 버전이 정확하게 명시 되어있습니다.
| 그래서 왜 필요하나요?
package.json에서 패키지들의 디팬던시 선언에는 version range가 사용이 됩니다.
간단한 예로 보면 npm i axios를 하면 이런 식으로 package.json 디팬던시에 패키지명 : Version Range 가 표기 되는데 이게 1.1.3 버전이 설치되는 게 아니고 범위를 뜻합니다.
간단하게 표기법을 설명해 드리자면
^1.2.3 : 마이너로 업그레이드를 하고 패치를 적용하지만 메이저는 업그레이드하지 않습니다. 쉽게 말해 앞에 1 빼고 모두 바뀔 수 있습니다.
~1.2.3 : 패치로 업그레이드는 하는데 메이저, 마이너는 업그레이드하지 않습니다.
그래서 동일한 package.json파일로 npm install을 해도 다른 버전이 설치되는 겁니다.
이게 자주 일어나는 일은 아니지만 가끔 오류를 발생시키는 경우가 있는데 다른 개발자는 되고 나는 안되니 디버깅하다가 시간 소비하는 경우를 몇 번 겪다 보면 상당한 스트레스가 됩니다.
그래서 lock 파일이 만들어지게 됩니다. package-lock.json 파일이 이 의존성 트리에 대한 정보를 가지고 있으니 package-lock.json 파일이 작성된 시점의 의존성 트리가 다시 생성될 수 있도록 보장을 해줍니다.
그래서 의존성 트리가 어떤 실행 환경에서도 개발자 간에 동일하게 설치하는데 도움이 됩니다.
packgage.json에 있는 패키지를 업데이트하고 싶다면?
npm update <package name> --save
| 결론
package-lock.json도 git으로 형상관리를 하는 게 좋습니다.
그리고 package-lock.json이 내가 의도한 대로 잘 설치가 되어있는지도 확인을 하면서 커밋해줘야 합니다.
프로젝트가 작을 때는 상관없겠지만 커지면 커질수록 의존성 관리를 해야 합니다.
| 참고
https://docs.npmjs.com/cli/v10/configuring-npm/package-lock-json
https://medium.com/helpshift-engineering/package-lock-json-the-complete-guide-2ae40175ebdd
'IT > 개발' 카테고리의 다른 글
[Vue] ⛔ cli 설치 후 에러 (1) | 2024.04.03 |
---|---|
웹사이트 속도 향상을 위한 트리쉐이킹 활용법 (67) | 2024.03.28 |
웹성능 최적화! 구글 라이트하우스를 활용한 웹사이트 진단 및 개선 방법 (2) | 2024.02.05 |
IntelliJ Test Case Setting (2) | 2024.01.25 |
Vue3의 상태관리자로 Pinia를 사용해 봅시다. (0) | 2024.01.15 |