자바스크립트 '유의적 버전'은 영어로 Semantic Versioning, 줄여서 SemVer 이라고 부르기도 한다. 프로젝트가 개발되는 특정한 시점 상태에다가 의미를 부여해서 숫자를 매기는 방법이다. Node.js를 설치하거나 parcel 이나 lodash 같은 패키지를 설치할 때도 전부 다 버전이 명시되어져 있던 것을 확인할 수 있었다. 그래서 그 버전을 어떻게 해석할 수 있는지에 대해 살펴볼 수 있었다.
Major.Minor.Patch
4.17.21

이렇게 마침표로 구분해서 나타나는 총 3개의 숫자를 우리가 어떤 기준으로 부여하고, 반대로 어떻게 해석을 해야하는지 살펴보았다. 직전에 우리가 lodash 라는 패키지는 이렇게 4.17.21 버전을 가지고 있었는데 마침표로 구분되는 각각의 숫자는 Major.Minor.Patch 라는 이름으로 순서대로 부를 수 있다. 이렇게 lodash 라는 패키지는 Major 버전이 4, Minor 버전이 17, Patch 버전이 21 인 상태이다.
Major 버전은 기존 버전과 호환되지 않는 새로운 버전이다. 여기서 이야기하는 기존 버전은 현재 숫자가 4 이니까 그 직전에 3 버전을 얘기하는 것이다. 그래서 우리가 어떤 프로젝트에서 새로운 기능을 추가했는데 그렇게 추가된 기능이 추가되기 전에 프로젝트 상태와 전혀 호환되지 않는다고 한다면 그것은 당연하게 새로운 Major 버전으로 만들어야 하는 것이다. 그래서 Major 버전 같은 경우는 프로젝트에서 크게 변경사항이 있는 경우에 보통 숫자가 올라가는 편이다.
Minor 버전은 Major는 다르게 기존 버전과 호환되는 기능이 추가된 버전이다. 호환이 가능한 범위 안에서 새로운 기능이 추가된 버전이다. 그래서 Major 버전은 수정하지 않고 두번째 Minor 버전의 숫자만 한 단계 올려주는 것이다. 그래서 Major와 Minor의 차이는 기존 버전과 호환이 되는 기능이 추가 됐느냐, 그렇지 않은 기능이 추가 됐느냐 차이가 있다.
Patch 버전은 Minor와 동일하게 기존 버전과 호환되는 버그 및 오타 등이 수정된 버전이다. 그런데 새로운 기능이 아니고 간단하게 버그라던가 오타가 수정된 버전이다. 새로운 기능이 추가된 것이 아니기 때문에 Minor 버전은 그대로 유지한 상태에서 어떤 특정한 버그나 오타를 수정하는 등의 기능이 추가되지 않은 개념이라면 Patch 버전의 숫자가 증가할 수 있다. 예를 들면, 현재 버전에서 어떤 특정 버그가 수정되기 전이라면 4.17.20 버전이였겠다.
=> 실제로 프로젝트를 개발하면서 버전을 부여하기도 하고, 혹은 반대로 이미 개발이 되어져있는 프로젝트에 우리가 버전을 확인해서 기존 버전과 어떻게 달라졌는지 이해하는 용도로도 이렇게 유의적 버전이라는 각각의 Major.Minor.patch 라는 각 숫자의 의미를 우리가 이해를 해야겠다.
^Major.Minor.Patch
^4.17.21
기존에 작업했었던 프로젝트에 package.json 파일을 열어서 내용을 보면 lodash나 parcel 번들러가 패키지로 설치가 되어져있는데 각각의 명시된 버전의 앞쪽을 보면 Major 버전 앞에 ^ 캐럿(caret) 기호를 확인할 수 있다. ^Major.Minor.Patch (^4.17.21) 이 캐럿이라는 기호는 Major 버전 안에서 가장 최신 버전으로 업데이트 가능하다는 의미다. Major 버전 안 이라는 것은 일단 Major 버전이 4 버전이니까 4 버전은 변동사항이 없는 상태에서 Minor와 Patch는 언제든지 숫자가 최신으로 바뀔 수 있다는 것이다. 그래서 Major 버전의 숫자는 바뀌지 않고, 17은 18이라는 숫자로, 21은 22라는 숫자로 바뀔 수 있다는 것이다. ^4.17.21 → ^4.18.22 그래서 Major 버전은 기존과는 호환이 되지 않는 버전의 숫자니까 결과적으로 이 내용은 기존 버전과 호환이 가능한 선에서 가장 최신 버전을 의미하는 것이다.

현재는 이렇게 설치가 되어있는데 우리가 특정한 버전을 명시하지 않고 설치했기 때문에 지금 현재 설치된 버전이 가장 최신 버전일 것이다. 그래서 그 내용을 확인하려면 터미널에서 npm 명령어를 시작할 수 있다. npm info 내가 확인하고자 하는 패키지명 (npm info lodash) 입력면 해당하는 패키지의 정보를 볼 수 있다. 그러면 이렇게 latest (가장 최신 버전) 명시가 되어있다. 그래서 현재 우리의 프로젝트에 설치된 lodash 라는 패키지는 가장 최신 버전으로 설치가 되어져있는 것을 확인했다.

이번에는 lodash 라는 패키지를 다른 버전으로 한 번 설치를 해봤다. npm install lodash 여기서 최신 버전이 아닌 다른 버전을 명시하기 위해서 @ (At Sign, 앳 사인) 기호를 붙여서 npm install lodash@4.17.19 설치하고자 하는 패키지 버전을 적어 명령어를 작성했다. 그러면 설치가 완료되고, package.json 파일에서도 lodash 부분이 마지막 patch 버전의 숫자가 19로 바뀐 것을 볼 수 있다. 설치된 버전에는 이렇게 ^4.17.19 캐럿의 기호가 붙어있는데 이것은 언제든지 Major 버전 안에서 언제든지 가장 최신 버전으로 업데이트가 가능하다.

다시 터미널에서 npm update 업데이트 할 패키지 명 lodash를 다시 최신 버전으로 업데이트 할 수 있다. 이렇게 캐럿 기호가 붙어있으면 언제든지 Major 버전 안에서 최신 버전으로 업데이트가 가능하다. 나는 npm update lodash 입력했는데 변화가 없어서 다시 npm info lodash 입력 후 latest 최신 버전 4.17.21 임을 확인한 후에 npm install lodash@4.17.21 명령어를 입력하여 최신 버전으로 재설치 해주었다.

그런데 만약에 캐럿 기호가 없다고 가정해보면 package.json 안에 lodash 부분에 ^ 캐럿 기호를 지우고 저장을 한다. 캐럿 기호가 없기 때문에 Major 버전 안에서 최신 버전을 유지하겠다는 의미가 사라졌다. 그렇기 때문에 다시 터미널에서 npm update lodash 명령어 입력해서 눌러도 명령이 끝나긴 했지만 실제로 package.json 파일에 해당 버전은 바뀌지 않은 것을 볼 수 있다. 그래서 정확하게 설치된 버전으로만 사용하겠다고 명시된 부분으로 의미가 바뀐다.
그래서 우리가 설치하는 패키지들은 기본적으로 캐럿이라는 기호가 앞에 붙어있어서 언제든지 최신 버전으로 업데이트가 가능하지만 만약에 현재 프로젝트에서 특정한 패키지의 버전이 꼭 필요하다면 앞쪽에 있는 캐럿 기호를 제거해서 업데이트가 되지 않도록 만들어줄 수도 있다.
~Major.Minor.Patch
~4.17.21
이번에는 버전의 가장 앞쪽에 물결표시 ~ (틸드, Tilde) 라는 기호가 붙어있는 개념은 기존에 캐럿 기호가 있는 경우에는 Major 버전 안에서 가장 최신 버전으로 업데이트를 하는건데 이것은 Minor 버전 안에서 가장 최신 버전으로 업데이트 가능하다. 기존에 캐럿이라는 기호는 Major 버전은 건드리지 않고 Minor나 Patch가 업데이트가 될 수 있었는데 이렇게 틸드 기호 같은 경우는 Major나 Minor도 건드리지 않고, Patch 버전만 가장 최신 버전으로 업데이트가 된다는 개념이다. 그래서 자주 사용되는 방법은 아니긴 하지만 특정한 Minor 버전을 유지하고자 한다면 이 ~ 틸드 기호를 임의로 붙여줄 수 있다.


기존 ^4.17.21 버전에서 ~4.16.1 버전으로 변경하고 앞에 틸드 기호를 붙인 후에 npm update lodash 명령어를 입력하니 ~4.16.1 버전에서 마지막 Patch만 6 버전으로 업데이트가 된 것을 볼 수 있다. Major나 Minor 버전은 건드리지 않고 Patch 버전만 가장 최신으로 업데이트 하는 방법이 앞에 틸드 기호를 추가하는 개념이다.
일반적으로는 마지막 Patch 뿐만 아니라, 두번째 있는 Minor 버전도 기존 버전과 호환이 가능한 버전이기 때문에 보통은 틸드 기호보다는 캐럿 기호를 이용해서 특정한 패키지들의 버전을 유지하게 된다. 그래서 통상적으로는 캐럿 기호를 사용하고, 방금 이해한 내용을 바탕으로 해서 Patch 버전만의 업데이트가 필요하다면 이렇게 ~ 틸드 기호도 사용할 수 있다는 것이다. 이렇게 package.json 파일에서 각각의 package들이 가지고있는 기본적인 유의적 버전의 사용법에 대해 살펴봤다.
'( ´・・) > 개발' 카테고리의 다른 글
| [JavaScript] 원시형 - String, Number (문자, 숫자 데이터) (0) | 2023.04.27 |
|---|---|
| [JavaScript] 자바스크립트 개요 (JS=ES) 및 npm 프로젝트 구성 (1) | 2023.04.27 |
| [React] State - Counter 호출 (0) | 2023.04.02 |
| [JSX] CSS 적용하기 (1) | 2023.04.01 |
| [JSX] 최상위 컴포넌트 정의, React.Fragment (0) | 2023.04.01 |