[React] package.json과 의존(dependency)

유형: Study/React

---

학습 계기

git을 통해 협업했을 때, 모두가 다른 패키지 혹은 같은 패키지의 다른 버전을 사용하면 오류가 나는 것이 아닌지 의문이 생겼다.

---

 

서론(배경지식)

1) 패키지(package)
: 라이브러리와 비슷한 개념으로 라이브러리가 코드의 묶음이라면, 패키지는 코드의 배포를 위해 사용되는 코드의 묶음이다. 일반적으로 라이브러리나 실행파일(.exe)을 포함한다. 다음 세가지 정보를 가지고 있다.
- 컴파일한 소프트웨어의 바이너리(실행 가능한 형식의 데이터 파일) ex) 메모장, 계산기
- 환경설정에 대한 정보 
- 의존(dependency)에 대한 정보 

 

2. 패키지 매니저 ex) npm, yarn
: 패키지의 의존 정보를 통해 패키지의 설치, 업데이트, 수정, 삭제 등을 보조한다.

3) 의존(dependency)
: 대부분의 패키지는 패키지를 제대로 동작시키기 위해서 다른 패키지를 설치해야 한다. 이 경우 기존 패키지를 동작시키기 위해 필요한 다른 패키지를 의존(dependency)이라고 부른다. 

: 하지만 의존(dependency)의 의존(dependency)가 필요한 경우가 생기며, 이 경우 사용자가 수동으로 패키지를 관리하는 것은 불가능에 가깝다. 이러한 상황을 dependency hell이라고 부른다. 

: 각각의 패키지가 자신의 dependency에 대한 정보를 가지게 한다면, 사용자가 사용하고자 하는 패키지의 의존을 패키지 매니저를 통해 쉽게 설치하도록 도울 수 있다. 

 

---

본론(핵심 내용)

1) package.json / package-lock.json

: npm이나 yarn과 같은 패키지 매니저를 이용해 프로젝트에 추가할 패키지를 설치하게 되면, 루트에 위치한 package.json이라는 파일에 프로젝트 실행에 필요한 패키지(의존)와 패키지 버전의 범위가 자동으로 기록된다. package-lock.json에는 정확한 버전 정보가 기재된다. 그래서 만약 이 프로젝트를 누군가가 클론한다면 패키지 설치 시, package.json과 package-lock.json의 의존 목록을 바탕으로 패키지를 설치한다.

 

2) dependencies 
: package.json 파일 내 field로 서비스 중(번들 이후)에 사용되는 일반적인 의존성 패키지가 위치한다.

: dependencies에서 관리하는 라이브러리의 예시로는 서비스 로직과 관련된 라이브러리인 React, 상태 관리 라이브러리(Recoil, Redux 등)이 있다.

 

3) devDependencies
: package.json 파일 내 field로 개발 혹은 테스트 시에만 필요한 의존성 패키지가 위치한다. 

: devDependencies에서 관리하는 라이브러리의 예시로는 webpack, testing libraries, 타입 관련 라이브러리(typescript, @types/*), eslint, storybook 등이 있다.
: 특정 패키지를 devDependencies 필드에 기록하려면, 아래와 같이 --save-dev(또는 축약-D)옵션을 넣어주면 된다. 

$ npm install 이름 --save-dev
$ npm install 이름 -D

 

4) hyunjun19님의 github

 

*시나리오 1) package-lock.json 파일을 소스 저장소에 커밋하지 않은 경우

   - 박과장이 npm으로 프로젝트를 만들어서 git에 소스코드를 push 합니다. 이 때 node_modules 폴더를 제외하고 package.json 파일만 커밋합니다.

   - 김대리는 소스 코드를 pull 하고 npm install을 실행합니다.

   - 의존성 트리의 일부 버전이 박대리와 다르게 설치됩니다.

   - 프로그램 실행시 오류가 발생합니다.

   - 김대리는 오늘도 야근을 합니다.

 

*시나리오 2) package-lock.json 파일을 소스 저장소에 커밋한 경우

   - 박과장이 npm으로 프로젝트를 만들어서 git에 소스코드를 push 합니다. 이 때 node_modules 폴더를 제외하고 package.json 파일과 package-            lock.json 파일을 같이 커밋합니다.

   - 김대리는 소스 코드를 pull 하고 npm install을 실행합니다.

   - 의존성 트리가 박대리가 셋팅한 환경과 동일하게 설치됩니다.

   - 프로그램이 정상적으로 실행됩니다.

   - 김대리는 정시 퇴근을 합니다.

 

+ nodemodules
  node_modules 디렉토리 안에는 package.json에 있는 모듈과, 그 모듈들이 의존하고 있는 모든 모듈들을 포함하고 있다. 그래서 node_modules 디렉토리 안에는 모듈들의 의존성에 의해 정말 많은 모듈들이 포함되게 된다. npm으로 새로운 모듈을 설치하게 되면 자동으로 package.json과 node_modules에 추가된다. git에 커밋할 경우, node_modules는 제외할 수도 있다. node_modules가 없어도 package.json에 설치한 패키지들의 정보가 모여있기 때문에, npm install 명령어로 node_modules를 언제든지 추가할 수 있기 때문이다.

---

결론(요약 및 꼬리질문)

•  터미널에서 패키지 매니저를 통해 패키지를 설치하면 package.json 파일의  dependencies/ devDependencies 항목에 자동으로 반영된다. 이를 바탕으로 정확한 버전이 기록된다!
•  깃으로 소스 코드를 pull/clone 하고 npm install을 실행하기!
• React 프로젝트 기본 구성 요소에 대한 상세한 정보.

 

---

 

참고한 자료(출처)

 

https://velog.io/@bada308/%ED%8C%A8%ED%82%A4%EC%A7%80-%EB%A7%A4%EB%8B%88%EC%A0%80Package-Manager%EB%9E%80

패키지 매니저(Package Manager)란?

https://velog.io/@sisofiy626/dependencies%EC%9D%98-%EC%A2%85%EB%A5%98%EC%99%80-%EC%B0%A8%EC%9D%B4%EC%A0%90-dev-peer

dependencies의 종류와 차이점 (dev, peer)

https://velog.io/@songyouhyun/Package.json%EA%B3%BC-Package-lock.json%EC%9D%98-%EC%B0%A8%EC%9D%B4

Package.json과 Package-lock.json의 차이를 아시나요?

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

package-lock.json은 왜 필요할까?