프로젝트를 하다보면 package.json에 dependencies, devDependencies가 항상 보인다.
이번 글에서는 dependencies, devDependencies 그리고 peerDependencies와 버전 명시 방법까지 알아보겠다.
dependencies
dependencies는 package 이름과 버전 범위를 매핑해놓은 객체이다.
dependencies에는 테스트에 사용되는 것들과 트랜스파일러들, 즉 개발할 때만 필요한 것들이 들어가면 안된다.
여기에는 아래처럼 배포 시 사용하게 될 것들만 들어가야한다.
"dependencies": {
"@tanstack/react-query": "^5.51.1",
"axios": "^1.7.2",
"next": "14.2.5",
"react": "^18",
"react-dom": "^18",
"recoil": "^0.7.7"
},버전
구조
먼저 버전의 구조를 보겠다.
"version": "MAJOR.MINOR.PATCH"각각은 다음을 의미한다.
MAJOR
아키텍처 수정, 기존 기능 제거와 같은 큰 변화가 있을 때마다 변경된다.
해당 버전이 바뀌게 되면 하위 버전과 호환이 되지 않을 수 있다.
MINOR
기존의 기능을 중단하지 않고 성능을 향상시킬 때 변경된다.
해당 버전이 바뀌어도 호환에는 문제가 없다.
PATCH
버그 수정 혹은 안정성 향상 시 변경된다.
해당 버전이 바뀌어도 호환에는 문제가 없다.
명시 방법
버전을 명시하는 방법도 여러가지가 있는데, 자주 보이는 몇 가지에 대해서만 알아보겠다.
1.2.x
1.2.1, 1.2.2 등 1.2의 버전을 지원하지만 1.3.0부터는 지원하지 않는다.
*
모든 버전을 지원한다.
version
version에 매칭된 값과 정확히 일치해야한다.
>version
<version
version에 매칭된 값보다 커(작)아야한다.
≥version
≤version
version에 매칭된 값보다 크(작)거나 커(작)아야한다.
~version
- ~1.2.3 → ≥1.2.3 < 1.3.0
- 1.2.3 이상 1.3.0 미만의 버전이어야한다.
- ~1.2 → ≥1.2 < 1.3.0
- 1.2.x와 같은 의미로 1.2로 시작하는 버전 중 하나여야한다.
- ~1 → ≥1.0.0 < 2.0.0
- 1.x와 같은 의미로 1로 시작하는 모든 버전을 지원한다.
^version
- ^1.2.3 → ≥1.2.3 <2.0.0
- 1.x와 같은 의미로 1로 시작하는 모든 버전을 지원한다.
- ^0.2.3 → ≥0.2.3 <0.3.0
- 0.2.x와 같은 의미로 0.2로 시작하는 모든 버전을 지원한다.
- ^0.0.3 → ≥0.0.3 <0.0.4
- 0.0.3 이상 0.0.4 미만의 버전을 지원한다.
devDependencies
누군가 우리가 만든 모듈을 사용할 때 우리가 사용한 테스트 도구나 문서 프레임워크를 사용하고 싶지 않을 것이다.
devDependencies에는 이렇게 우리가 개발할 때만 사용되는 것들(Jest, tailwindcss)이 들어가야한다.
"devDependencies": {
"eslint": "^8.57.0",
"storybook": "^8.2.2",
"tailwindcss": "^3.4.1",
"typescript": "^5",
...
}tailwindcss는 왜 devDependencies에 있는가?
tailwindcss를 이용한 스타일링이 어플리케이션을 사용할 때 필요하다고 생각하여 dependencies에 있을 것이라고 생각했는데 devDependencies로 들어갔다.
stackoverflow에 있는 글에 의하면 tailwindcss는 컴파일할 때 일반 css로 변환되기 때문에 devDependencies로 설치해야하는 것이었다.
styled-components는 런타임에 css를 주입하기 때문에 devDependencies가 아닌 dependencies에 설치된다.
peerDependencies
peerDependencies는 특정 패키지가 다른 패키지와 호환되는 버전의 존재를 명시할 때 사용한다. 주로 라이브러리나 플러그인 개발 시 사용된다.
{
"name": "tea-latte",
"version": "1.3.5",
"peerDependencies": {
"tea": "2.x"
}
}예시로 tea-latte라는 라이브러리를 설치할 때 tea 라이브러리의 major의 버전이 2인 라이브러리만 호환한다는 것을 명시한다.
peerDependencies는 dependencies나 devDependencies처럼 npm install을 하면 자동으로 설치가 되지 않으니 수동으로 설치해야하며 버전이 맞지 않으면 경고 메시지가 나타난다.
마무리하며
프로젝트를 하며 자주 마주하는 package.json의 dependencies에 대해 알아보았다.
항상 공식문서에서 설치하라는 대로만 설치했어서 왜 dependencies로 설치하는지, devDependencies로 설치하는지 무심코 지나갔었는데, 공부하고 나니 어느정도 알 것 같다.
참고
