💡 이번 시간에는 package.json에 추가된, 모듈의 버전 형식(
~
,^
등)에 대해 알아보았다!
우선 package.json의 역할을 간략히 알고 본론으로 넘어가보자~
1. package.json은 어떤 역할을 할까?
package.json
은 프로젝트의 정보와 패키지 매니저(npm, yarn)로 설치된 모듈(이름, 버전)을 관리하는 파일이다.
// package.json
{
"name": "프로젝트이름", // 프로젝트 정보
"version": "1.0.0",
"private": true,
...
"dependencies": { ... }, // 설치된 모듈 정보(프로덕션 환경에서 응용 프로그램에 필요한 모듈)
"devDependencies": { ... }// 설치된 모듈 정보(로컬 개발 & 테스트에만 필요한 모듈)
}
- 그리고
package.json
에서 모듈 버전은 Semenantic Versioning(SemVer
)을 따른다.
❓
SemVer
은 무엇인가요?
SemVer
은 버저닝 방식으로, 기능 추가, 버그 수정 등 작업의 유형에 따라 버전을 붙이는 걸 말한다.SemVer
은Major.Minor.Patch
형식으로 버저닝을 하며, 각각의 의미는 아래와 같다.
버전 요소 | 설명 |
---|---|
Major | - 이전 버전보다 큰 기능 향상을 한 경우 Major 버전을 올린다. - 기능이 크게 변경되었기에, 이전 버전과 호환이 불가하다. |
Minor | - 새로운 기능이 추가된 경우 Minor 버전을 올린다. - 하위 버전과 호환이 가능하다. |
Patch | - 버그가 수정된 경우 Patch 버전을 올린다. - 하위 버전과 호환이 가능하다. |
- 이처럼 package.json의 모듈은
SemVer
방식(Major.Minor.Patch
)으로 버전을 관리된다. - 그리고 모듈 버전을 보면 아래와 같이 여러 기호(>, <, ^, ~)가 붙은 걸 봤을 것이다.
// package.json
"dependencies": {
"aaa": "1.2.3",
"bbbbb": ">1.2.3",
"cc": ">=1.2.3",
"dddd": "<1.2.3",
"eee": "<=1.2.3",
"ffff": "^1.2.3",
"gg": "~1.2.3",
}
❓ 이 기호들은 무슨 의미인가요? 데코레이션 같은 건가요?
- 기호(>, <, ~, ^)는 사실 데코가 아니라 의미가 있는 기호이다!
- 이 기호가 명시된 경우 모듈의 자동 업데이트가 가능해지는데, 아래 예시를 보자.
만약 프로젝트에 A라는 모듈이 설치되어 있다고 가정해보자. 그리고 이 A의 버전은 1.2.3이다.
그런데 A 모듈에 버그가 있었고 A 모듈 개발자가 A 모듈의 버그를 수정했다.
이 경우 버그 수정이므로 patch 버전이 올라갈 것이다.
(*최신 버전이 1.2.3이니까 1.2.4로 배포하자~*)
하지만…! A 모듈을 사용 중인 사람들은 A 모듈에 버그가 있었다는 사실은 물론,
버그가 수정되어 모듈의 버전이 업데이트됐는지 모른다.
(*모듈 개발자가 일일이 메일을 보낼 수는 없기에..;;*)
어떻게 하면 A 모듈을 사용하는 사람들이 업데이트된 버전을 사용할 수 있을까?
그 방법은 바로 기호가 명시된 버전(>, <, ~, ^)을 사용하는 것이다!
각각의 기호들은 모듈의 자동 업데이트 범위를 나타내는데,
만약 버전에 기호가 붙은 경우(ex. ^1.2.3) 특정 범위 내에서 모듈이 자동으로 업데이트된다.그렇다면 각각의 기호가 어떤 의미를 가지는 지 더 자세히 알아보자!
2. 버전 방식 살펴보기
😟 만약 버전에 어떠한 기호도 없다면, 자동으로 버전이 업데이트되지 않는다. (ex. 1.2.3)
(1) >, ≥, <, ≤
> 1.2.3
≥ 1.2.3
< 1.2.3
≤ 1.2.3
- 지정한 버전보다 초과, 이상, 미만, 이하인 버전으로 업데이트 할 수 있다.
≤ 1.2.3
은 1.2.3, 1.1.8로 업데이트할 수 있지만, 1.2.4, 1.4.0 버전으로 업데이트할 수 없다.
(2) x
1.2.x
x
로 표시된 버전만 자동 업데이트가 가능하다.1.2.x
는 1.2.9로 업데이트가 가능하지만 1.3.0으로 업데이트할 수 없다.
(3) ||
1.2.3 || >= 1.2.9 < 2.0.0
||
은 or 연산자(또는)로, 하나 이상의 범위를 명시할 수 있다.- 만약
A || B
로 버전을 명시한 경우 A, B 둘 중 하나만 충족해도 버전업이 가능하다. - 예를 들어,
1.2.3 || >= 1.2.9
은 1.2.3 또는 1.3.0으로 업데이트할 수 있다.
(4) Prerelease Tags(alpha, beta, …)
1.2.3-alpha
1.2.3-alpha.1
1.2.3-0.0.1
1.2.3-x.2.z
preRelease
태그는 빠르게 업데이트되는 경우, 혹은 정식 버전으로 적합하지 않은 경우 붙이는 태그이다.patch
버전 뒤에 (-
)을 붙여 프리릴리즈 버전을 표시한다.- 앞서 말했듯이 정식 버전으로 적합한 상태가 아니므로 정식 버전보다 우선순위가 낮다.
(5) Tilde(~)
minor
버전이 명시되었다는 가정하에patch
버전을 자동 업데이트한다.
~1.2.3 : 1.2.3 <= 업데이트버전 < 1.3.0 (patch 버전업 가능)
~1.2 : 1.2.0 <= 업데이트버전 < 1.3.0 (patch 버전업 가능)
- 단,
minor
버전이 명시되지 않은 경우,minor
버전업이 허용된다.
~1 : 1.0.0 <= 업데이트버전 < 2.0.0 (minor 버전업 가능)
(6) Caret(^)
- 기본적으로
minor
버전을 자동으로 업데이트한다.
^1.2.3 : 1.2.3 <= 업데이트버전 < 2.0
^1.2 : 1.2.0 <= 업데이트버전 < 2.0
^1 : 1.0.0 <= 업데이트버전 < 2.0
- 단, API 변동이 잦은
preRelease
단계(버전 1.0.0 미만)에서는 Caret(^)이 다르게 쓰인다. preRelease
단계에서minor
버전이 명시된 경우, Tilde(~)처럼patch
버전업이 된다.
^0.1.1 : 0.1.1 <= 업데이트버전 < 0.2.0 (patch 버전업 가능)
^0.1 : 0.1.0 <= 업데이트버전 < 0.2.0 (patch 버전업 가능)
- 그러나
major
버전만 명시된 경우,minor
버전업이 된다.
^0 : 0.0.0 <= 업데이트버전 < 1.0.0 (minor 버전업 가능)
😆 이번 시간에는
package.json
이 무엇이며, 모듈의 버전 형식에 대해 알아보았다.
우리는 모듈 버전에 여러가지 기호(>, <, ~, ^)가 붙음으로서 자동 업데이트가 가능함을 알게 되었는데,
각 기호의 의미를 안다면 모듈 버전을 이해할 때 더 도움이 될 거 같다!
끝으로 버전 관련하여 더 알고 싶다면 semver 깃헙 페이지를,
버전 형식별로 어떤 버전이 해당하는지 알고 싶다면 semver.npmjs.com을 참고해보자
'개발 기술 > 개발 이야기' 카테고리의 다른 글
[JS] 커스텀 이벤트를 만드는 2가지 방법(Event, CustomEvent) (0) | 2023.03.05 |
---|---|
[JS] AbortController로 웹 요청 취소하기(비동기, dom 이벤트) (0) | 2023.02.26 |
Storybook, UI 컴포넌트를 테스트하게 해줘!(feat. vite) (0) | 2023.01.15 |
리플로우, 리페인트와 브라우저 렌더링 알아보기 (2) | 2023.01.02 |
[CSS/JS] 웹 폰트를 최적화하는 5가지 방법 (0) | 2022.12.04 |
댓글