React 프로젝트를 시작하면서 그간 npm, yarn, package.json ,package-lock.json, gitignore... 등 전체 틀을 보지 못하고 너무 코딩만 하고 있었다는 생각이 들었다. 오늘은 이 중 package.json ,package-lock.json, node_modules 3가지의 집중해서 글을 써보려고 한다.
이것들을 알기 위해서는 기본적으로 npm이 뭔지부터 시작을 해야할 것 같다...
1. NPM(Node Package Manager)??
- 모듈(패키지) 관리(설치, 업데이트, 삭제)를 하기위한 매니저이다. node.js를 위한 패키지 매니저입니다.
- npm을 통해 수많은 개발자가 만든 패키지(재사용 가능한 코드)를 설치하고 설치한 패키지의 버전을 관리할 수 있습니다. 리액트 또한 하나의 패키지이며 현재 npm저장소에 등록된 패키지만 약 82만개가 넘는다고 합니다.
- npm 은 cli를 제공하고 명령어를 사용할 수 있어 새로운 모듈이나 패키지 설치, 관리, 업데이트, 삭제를 쉽게 할 수 있습니다.
- 이런 패키지 매니저는 npm말고도, 페이스북에서 만든 yarn도 있는데 다른 글에서 설명하도록 하겠습니다.
2. package.json이란 무엇인가?
- package.json이란, 생성한 프로젝트의 메타정보와 이 프로젝트가 의존하고 있는(설치한) 모듈과 패키지들에 대한 정보들을 json 형태로 모아놓은 파일이다.
- 실제 설치는 node_modules에서 이루어지고 package.json은 그 정보들을 보여주는 것이다.
- node.js의 버전관리 파일
- 파일내에 각 속성들의 설명은 다음을 참고하세요.
참조: https://programmingsummaries.tistory.com/385
browserlist: https://github.com/browserslist/browserslist
기본적으로는 package.json은 문서다.
개발자가 배포한 패키지에 대해, 다른 사람들이 관리하고 설치하기 쉽게 하기 위한 문서이며 협동작업시 환경설정을 통일시켜줄수 있는 아주 유용한 파일이다.
(npm에 패키지를 배포하고 npm registry에 올리기 위해서 반드시 필요한 문서파일이라고 한다.)
- 의존 관계라는 말을 정리해보자!
모듈이 다른 모듈을 사용할 수 있는 것처럼, 어떤 패키지가 다른 패키지를 사용할 수 있다. 이런 관계를 의존 관계(dependencies)라고 부르는데 package.json에 기록되는 패키지들은 사실 또 각자 그 패키지가 의존하는 모듈이나 패키지가 존재한다. 그 모든게 node_modules에 설치된다.
package.json은 왜 사용하는가?
만약 이 package.json 파일을 사용하지 않을 경우 다음과 같은 문제가 발생할 수 있다.
- 프로젝트에서 사용하는 외부 모듈들이 많아지게 되면, 관리하기가 어려워진다.
- 각 패키지들은 고유한 버전이 있기 때문에, 따로 기록해 두어야 한다. 왜냐하면, 패키지의 버전도 빈번하게 업데이트가 되기 때문이다.
- 새로운 프로젝트를 진행할 때, 필요한 모듈들이 많다면 매번 npm 명령으로 설치해야 하는 번거로움이 있다.
(예를 들어 package.json파일이 있다면 npm i한번으로 package.json파일의 의존성 패키지를 한번에 설치할 수 있다.)
!! 다시한번 package.json은 지금 우리 프로젝트가 설치한 패키지들의 의존성 및 버전을 관리하는 파일이며 그 정보들을 기록하고 있는 json파일이다.
3. node_modeules이란?
리액트 프로젝트를 생성하면 package.json파일 뿐만 아니라 node_modules파일도 같이 생성된다.
node_modules 디렉토리에는 package.json에 있는 모듈 뿐만 아니라, package.json에 있는 모듈이 의존하고 있는 모듈 전부를 포함한다. 그래서 node_modules 디렉토리안에는 정말 많은 모듈들이 들어가 있다.
npm으로 새로운 모듈(패키지)를 설치하게 되면, package.json과 node_modules에 추가된다.
- 참고로, git에 커밋할 때, node_modules을 제외해도 된다고 한다. 왜냐하면, node_modules가 없어도, package.json에 설치한 패키지들이 모두 있기 때문에, npm install로 node_modules를 언제든지 설치할 수 있기 때문이다.
- 실제로 프로젝트를 하면서 gitignore를 사용하여 node_modules의 내용은 git의 버전관리에서 제외하였다. 파일 자체 크기도 클뿐더러 결국 다른 사용자가 git clone한 후 npm i로 node_modules을 다운받는 것이 훨씬 효율적이기 때문이다.
4. 그럼 package-lock.json이란?
- package-lock.json은 자신이 생성되는 시점의 의존성 트리(node_modules)에 대한 모든 정보를 가지고 있는 파일을 말한다.
- node_modules은 package.json에 등록된 모듈과 그 모듈들이 의존하고 있는 모듈 전부를 포함하고 있다. 결국 package-lock.json은 이 모든 모듈들의 정보를 가지고 기록해 놓은 파일인 것이다.
- npm을 사용해서 node_modules나 package.json을 수정하게 되면, package-lock.json 또한 자동으로 업데이트가 된다. 한마디로 package.json과 거의 붙어다닌다고 보면 될 것 같다.
- 포인트는 package-lock.json은 실제 node_modules의 설치된 모듈들의 버전을 똑같이 모두 가지고 있으며 버전을 정확하게 기록하고 있다.
- 사실 package.json은 설치된 패키지들의 버전을 관리하고 정보를 가지고 있다고 했지만 정확한 버전을 기록하는 것이 아니라 ^4.10.3(Caret Ranges)과 같이 버전 범위를 갖게 된다.
- 예를들어 다른 사용자와 협업하거나 배포하는 상황에서 이런식의 기법은 큰 오류를 불러일으킬 수 있다. 다른 사람이 같은 package.json을 가지고 있어도 npm i 를 실행했을 때 다른 버전의 패키지를 받게 될 수 있다. 또는 그 패키지가 의존하고 있는 하위 패키지의 버전이 달라졌을 수도 있다. 이렇게 되면 기존에 가지고 있던 node_module의 모듈 버전과 달라 프로그램에서 충돌이 일어나거나 오류가 발생할 수 있다.
But
package-lock.json이 존재할 때에는 npm install의 동작방식이 조금 변하게 됩니다.
package.json을 사용하여 node_modules를 생성하지않고 package-lock.json을 사용하여 node_modules를 생성합니다. 그리하여 기존 node_modules의 정확한 버전을 똑같이 다운 받을 수 있게 되는 것 입니다.
결론 및 마무리
- package-lock.json은 package.json으로는 부족한 정보를 도와주는 파일이다.
- 만약 package.json 에 패키지 버전을 명확하게 지정 정해놓는다면,
프로젝트에서 사용하고 있는 패키지의 중요한 버그 수정이 이루어질 때 마다 프로젝트의 package.json 에 적혀있는 버전도 수정해 주어야하기 때문입니다.
내용참조:
1. https://velog.io/@songyouhyun/Package.json%EA%B3%BC-Package-lock.json%EC%9D%98-%EC%B0%A8%EC%9D%B4
2. https://cheonmro.github.io/2018/12/23/package-json/
3. 추가적인 내용중요 - 추후 글 쓸 예정
https://c17an.netlify.app/blog/node.js/npm-install-%EC%A0%95%EB%A6%AC/article/
