React - package.json 과 package-lock.json 이란

 

 

 

Updated 08/02/2022  

 

오늘은 내부 라이브러리를 업데이트할 일이 있어, package.json 에서 버전을 올려주고 commit 하였다. 

build 하는데 자꾸 에러가 나는 것이었다.

알고보니 package-lock.json 도 같이 commit 해줘야 한다는 것을 알았다.

 

package.json 은 프로젝트를 위해 사용되는 npm 프로그램(모듈)들의 버전 관리을 위한 세팅파일 정도로 알고 있었다.

(팀원들과 동일한 환경에서 다같이 작업하려면 버전이 모두 똑같아야 하기 때문이다. a.k.a 의존성 )

또한 요 파일은 한번 세팅 하면 딱히 건드릴 일이 없었기 때문에, 큰 관심을 두지 않았던 것 같다.

 

이런 일을 겪고 나니 package.json 이랑 package-lock.json 의 정체가 무엇인지 궁금해졌다.

그럼 얘네들이 누군지 알아보러 가보자

 

 

---

 

React - package.json 과 package-lock.json 이란

 

package.json 

npm 으로 어떤 모듈을 설치하면,

node_modules 에 추가가 되고, package.json 에도 뭐가 자꾸 추가 된다.

( + dependencies 안에 해당 모듈의 버전과 이름 등 기본 정보들이 추가 )

 

여기서 쓰인 package.json 파일의 버전은 고정이 아니라 version range 를 사용한다.

그래서 다른 팀원들과 버전이 다르더라도 폭넓게 맞출 수(?) 있게 된다.

예를 들면 1.1.2 이상의 web-vitals 를 사용할 거라는 의미이다.

 

 

package-lock.json

package-lock.json 은 

node_modules 구조나 package.json 가 업데이트 되면 (즉, npm install 하게되면)

package.json 와 똑같지만 좀더 정확한 정보를 가지고 자동 생성된다.

 

자, 파일을 살펴보자.

package.json 에는 "^1.1.2" 로 범위로 표현되지만,

package-lock.json 에는 "1.1.2" 로 정확한 버전명이 적혀있다.

범위를 나타내는 캐럿(^)이 쓰이지 않았다.

 

 

 

package-lock 파일이 만들어진 후, npm install 을 하게 되면,

 

원래는 package.json 을 사용하여 node_modules 를 생성했는데,

이제는 package-lock.json 을 사용하여 node-modules 를 생성한다.

 

그래서 어떤 라이브러리 버전 업을 해줄때,

package.json 만이 아닌 package-lock.json 도 같이 커밋을 해줘야

 

나중에 다른 팀원이 npm install 을 했을 때,

package-lock 파일의 정보를 바탕으로 인스톨된 동일한 버전이 되는 것이다.

 

 

(package.json 은 버전이 범위로 표현되어 1.0.0 이상인 애들은 다 용납하기 떄문에

package.json만 가지고 npm install 하면 1.4.0, 1.6.24 이런 애들도 문제없이 실행이 되긴 한다.

그렇지만 간혹 운이없어 오류가 나게 되는 상황이 올 수도 있다는게 함정(•_•)

허나 package-lock.json 은 정확한 범위를 콕찝어줘서 그 시점의 정확한 버전정보들을 가지고 있기 떄문에 

필요하다는 것이 아닌가 하는 생각을 해보았다)

 

 

 

$ npm install 시 

package-lock.json 파일이 생성 되며 node_modules 가 생성되고

 

$ npm install 패키지이름 시,

package-lock.json 파일이 생성될떄  해당 패키지에 대한 node_modules/패키지 파일들만 생성된다. 

 

 

 

 

 

ref:

https://junwoo45.github.io/2019-10-02-package-lock/

https://hyunjun19.github.io/2018/03/23/package-lock-why-need/