[React] package.json, package-lock.json, node_modules

React 공부를 시작을 하기에 앞서 리엑트를 처음 install 하였을 때 내부 파일에 대해 공부하고 정리를 하겠습니다.

 

package.json

프로젝트의 의존성(Dependency) 정의하는 파일입니다.

기본적인 프로젝트의 정보와 의존성 목록을 정의하는 중심 파일입니다.

의존성이란 이 프로그램이 다른 프로그램의 기능을 빌려 쓰는 관계를 말합니다. 즉, 내 프로그램이 제대로 실행되기 위해 꼭 필요한 외부 도구라고 생각하시면 될 것 같습니다.

 

package-lock.json

의존성 버전이 달라져서 문제가 생기지 않게 현재 설치된 정확한 버전을 잠궈두는 파일입니다.

package.json 파일은 이 프로젝트는 React 18버전대 아무거나라고 저장되어 있습니다.

"dependencies": {
  "react": "^18.0.0"
}

 

하지만 개발자마다 설치된 시점이 다를 경우 각자 다른 세부버전이 설치될 수도 있습니다.

 

• 내 컴퓨터: react 18.3.1
• 다른 사람 컴퓨터: react 18.4.0

또한 package-lock.json 파일은 package.json에 정의된 의존성뿐 아니라, 그 의존성의 의존성(하위 패키지)도 함께 정의됩니다.

내 프로젝트 → React → (다른 패키지들에 의존) → 또 다른 패키지들…

 

node_modules

npm install을 실행하면 실제로 다운로드되어 저장되는 모든 패키지(의존성)가 들어 있는 폴더 입니다.

프로젝트가 실행되기 위해 필요한 외부 라이브러리들이 전부 모여있는 창고라고 생각하시면 될 것 같습니다.

 

여기서 주의해야할 점은 git과 같은 공간에 node_modules를 올리지 말아야 한다는 것입니다.

 

올리면 안되는 이유

1. 엄청난 파일 크기

모든 의존성을 저장하고 있으며 해당 의존성에 관련된 의존성 또한 들고 있기에 매우 크기가 큽니다.

 

2. 굳이 올릴 이유가 없음

package.json, package-lock.json 파일에 의존성에 대한 정보가 명시되어 있으며 npm install 한 번으로 정의된 의존성을 다시 다운로드 받을 수 있으므로 올릴 이유가 없습니다. 실제로 교수님이 캡스톤 프로젝트를 진행할 때 react를 사용하는 그룹에서 node_modules를 git 추적 하고 있을 경우 해당 프로젝트를 보는 사람들의 표정이 매우 안좋을 것이라고 말씀하셨던 기억이 있습니다.

 

 

정리

package.json : 개발자가 필요한 패키지(의존성)을 명시하는 곳

package-lock.json : 패키지의 정확한 버전 및 패키지의 의존성 또한 명시되어 있는 곳

node_modules : 실제 패키지가 있는 곳