package.json과 package-lock.json 그리고 node_modules

회사에서 지난 프로젝트의 소스코드를 유지, 수정하고 새로운 기능을 추가해야 하는 추가 프로젝트에 참여하게 됐다.

기존 소스 코드는 React로 만들어진 프로그램으로 아직 수정될 내용이나 추가될 기능에 대한 기획서를 받아보지 못한 상태에 코드 분석을 먼저 진행하기 위해 소스코드를 클론했다.

 

근데... npm install을 해도 아무리 해도 node_modules 폴더도 생성되지 않았으며 당연히 실행되지 않았다.

검색 및 지인 찬스를 이용해 결국 버전이 너무 낮은 모듈 때문에 그랬던 것으로 확인했다. 그도 그럴 것이 소스코드 마지막 수정이 3년전... 해당 모듈을 stable한 버전으로 변경하니 실행되는 것을 확인했다.

 

어찌저찌 상황은 해결했지만 보다 근본적인 의문이 생겼다.

그동안은 그냥 튜토리얼을 보고 책을 읽고 그냥 따라 했었던 작업들이 왜 필요한거고 정확히 무슨 역할을 하는지 확실히 알고 싶어졌다.

 

 

---

 

 

1. NPM(Node Package Manager)이란?

npm은 javascript 패키지 매니저이자, node.js에서 사용할 수 있는 모듈들을 패키지화하여 모아둔 오픈 저장소 역할을 하며, 설치/관리를 수행할 수 있는 CLI를 제공한다.

npm에서는 package.json 파일로 프로젝트의 정보와 패키지들의 의존성을 관리한다.

 

 

2. package.json과 package-lock.json은 뭐가 다른가?

package.json은 문서다.

개발자가 프로젝트의 버전을 명시해주면서 빌드 시 필요한 패키지 리스트의 정보를 담고 있다. 공유 시 개발 환경을 빠르게 구축할 수 있게 된다. (npm init 명령어 입력 시 package.json 파일이 생성)

 

    npm 버전의 의미

    { MAJOR }.{ MINOR }.{ PATCH }

    MAJOR - 하위호환성이 보장되니 않는 변경사항 발생시

    MINOR - 하위호환성 보장하면서 기능 추가

    PATCH - 하위호환성 보장하면서 버그 수정

 

package.json는 버전 정보를 저장할 때 version range를 사용한다. 프로젝스 생성 당시 사용된 패키지의 정확한 버전을 입력하는 대신 정해진 규칙을 이용해 커버 가능한 버전의 범위로 입력하는 것이다. (ex. "^4.16.1")

 

참고.

~ (틸트)  지정한 버전의 마지막 자리 내의 범위에서만 자동으로 업데이트 (요즘은 잘 사용하지 않음)

^(캐럿) SemVer(MAJOR/MINOR/PATCH)의 규약에 따른다는 것을 신뢰한다는 가정하에 동작한다. (MINOR나 PATCH버전은 하위호환성이 보장되어야 하므로 업데이트 함)

 

npm의 버전이 다른 경우, npm의 알고리즘이 조금씩 다르기 때문에 서로 다른 node_modules 트리가 생성될 수 있다.

version range를 사용하는 package.json 파일로 각기 다른 node_modules 트리가 생성될 수 있다는 것이다.

 

개발자들이 동일한 node_modules 트리를 생성해 같은 의존성을 설치할 수 있도록 package-lock.json 파일이 사용된다.

package-lock.json 파일은 node_modules 구조나 package.json 파일이 수정되고 생성될 때 당시 의존성에 대한 구체적인 정보를 명시하며 자동 생성된다.

npm install 명령어 입력 시 자동 생성된다.

 

package-lock.json 파일이 있을 경우, npm install 시 package.json 파일이 아닌 package-lock.json 파일을 사용하여 node_modules 트리를 생성한다. (** package-lock.json은 소스 저장소에 함께 저장해두는 것이 좋을 것 같다.)

 

3. 에러 대응

에러 대응에 대해서는 이건 이렇다 할만한 기준은 없다.

다만, 에러가 났을 때 가장 먼저 캐시 삭제(npm cache clean --force) 후 node_module을 삭제 후 재설치하는 것을 권한다.

(package-lock.json 파일도 함께 삭제)

대다수의 에러가 위의 방법으로 아주 어이없게 간단하게 해결되는 경우가 많았다.

 

다음으로 삭제, 재설치로 해결되지 않을 때 대부분 버전의 문제인 경우가 많았다. npm버전부터 모듈의 버전까지 이건 케바케일 수 있기 때문에 어떤것이라 콕 찝어 말하기는 어려운 것 같다.

 

기존 소스코드에는 package-lock.json 파일이 없었고 package.json 파일만 있었다. npm install 시 node_modules 트리만 생성 안된게 아니라 package-lock.json 파일도 생성되지 않았다.

그래서 무식하게 하나하나 개별 설치를 진행해 봤더랬다. (무식한 반복작업.....dependencies가 그리 많지 않았서 다행 🥲 )

 

 

---

 

 

늘 느끼는 거지만 하나도 허투루 할 수가 없는 것 같다. 점점 더 의문은 늘어가고 더불어 공부해야할 것도 늘어간다. ㅎㅎㅎㅎ

하루는 개념이 명확했다가 다른 하루는 다시 불투명해진다.

그냥 하루에 한가지씩이라도 정확하게!!!

내것으로 만들기 위해 계속 노력해야할 뿐 😭  

100세까지 공부해야지... 🤪 

 

더불어 누군가 나와 같은 의문을 가졌을 때 내가 정리해 놓은 글이 도움이 되기를 바랄 뿐이다.

 

 

참고.

• https://cheonmro.github.io/2018/12/23/package-json/#package-json%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80
• ​​https://velog.io/@songyouhyun/Package.json%EA%B3%BC-Package-lock.json%EC%9D%98-%EC%B0%A8%EC%9D%B4
• https://hoya-kim.github.io/2021/09/14/package-json/#%EC%9D%98%EC%A1%B4%EC%84%B1-%EA%B4%80%EB%A0%A8-%ED%95%AD%EB%AA%A9
• https://blog.outsider.ne.kr/1041