dependencies의 종류와 차이점
npm이나 yarn과 같은 패키지매니저를 이용해 프로젝트에 추가할 패키지를 설치하게 되면 루트에 위치한 package.json이라는 파일에 패키지명과 함께 Semver라고 불리는 형태로 패키지의 버전이 표기됩니다.
이 파일은 버전관리를 위해 사용하는 git과 같은 VCS를 이용할 때 패키지를 포함하게 되면 프로젝트의 사이즈가 커질 수 있기 때문에 대신 이 파일을 포함하게 됩니다.
그래서 만약 이 프로젝트를 누군가가 클론한다면 패키지 설치시 이 package.json의 목록을 바탕으로 패키지를 설치하게 됩니다.
package.json내부에는 패키지의 목록을 dependencies, devDependencies, peerDependencies 3가지로 분류하여 나타내고 있습니다.
그래서 오늘은 이 3가지의 차이점이 무엇인지 알아보겠습니다.
dependencies
npm install <packageName>
yarn add <packageName>어떤 옵션도 사용하지 않고 패키지 설치를 위한 명령어를 사용했을 때 이 dependencies영역에 패키지가 기록됩니다.
여기에 속하게 되는 패키지들은 프로젝트의 런타임(실행)시에 필요한 패키지들이 속하게 되며 번들링 후에도 필요한 패키지 일 경우 여기에 속합니다.
대표적으로 Lodash, React, ImmutableJS 등의 패키지들이 해당됩니다.
devDependencies
npm install -D <packageName>
yarn add -D <packageName>
// -D는 --dev로 대체해서 사용할 수 있습니다.devDependencies의 경우 이름 그대로 개발과정 혹은 테스트과정에서만 필요한 패키지를 말합니다.
여기에 속한 패키지들은 번들링 이후에는 사용되지 않고 번들링 이전에 쓰이는 패키지만 포함되어야 합니다.
대표적으로 포맷팅(ESLint, Prettier), 번들러(Webpack, gulp, Parcel), 바벨과 플러그인, 테스트툴(Jest), 그 외에도 Storybook, Bootstrap, TS(JS로 변환된 코드가 제품에 사용되기 때문에) 등이 포함됩니다.
peerDependencies
yarn add -P <packageName>
// --peer로 대체할 수 있습니다.
// npm의 경우 install 후 package.json에서 직접 수정해 peerDependencies로 변경해주어야 합니다.peerDependencies는 프로젝트를 패키지 형태로 배포하는것이 목적일 때 사용합니다.
우리가 사용하는 패키지들도 내부에서는 또 다른 하위 패키지를 사용하는 경우가 많은데
특정 하위 패키지에 대한 의존성이 높은 경우 위에서 말했던것처럼 보통 Semver형태로 버전명을 표기하는 특성상 특정 범위에서 가장 최신 버전의 패키지를 설치하기 때문에 하위 패키지 버전과의 충돌로 인해 패키지가 정상적으로 동작하지 않을 수 있습니다.
그래서 이렇게 특정 하위 패키지에 대한 의존성이 높은 경우 해당 하위 패키지의 정확한 버전명을 peerDependencies에 표기하게 됩니다.
만약 다른 버전의 패키지를 설치 할 경우 npm6까지는 경고, npm7은 에러를 발생시킵니다.
그래서 패키지가 비정상적으로 동작하는 경우를 방지하기 위해 정확한 버전을 표기하는 목적으로 사용됩니다.
정리
| dependencies | devDependencies | peerDependencies | |
|---|---|---|---|
| 대상 | 제품의 실행 과정에서도 사용되는 패키지 | 개발 단계 혹은 테스트 과정에서만 필요하며 런타임에서 사용되지 않는 패키지 | 프로젝트를 패키지로 배포 시 특정 하위 패키지에 대해 의존성이 높은 경우 |
| 명령어 | npm install yarn add | npm install -D yarn add -D | yarn add -P |
| 예시 | Lodash, React, ImmutableJS | ESLint, Prettier, Webpack, Jest, Bootstrap, TS 등 | 필요에 따라 적용 |
