프론트엔드 개발환경의 이해와 실습 - #3

프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) - 인프런 | 강의

 

3. 외부 패키지를 관리하는 방법

 

1. CDN을 이용한 방법

 CDN으로 외부 패키지를 가져오면 간단하지만 가져온 라이브러리에 이상이 있거나 제대로 불려 오지 않는다면 우리가 만든 애플리케이션에도 문제가 생길 수 있다.

 

2. 직접 다운로드하는 방법

 우리 프로젝트 폴더에 직접 다운로드 받아 사용하면 장애와 독립적으로 사용할 수 있다. 하지만 라이브러리는 계속 업데이트될 것이고 그때마다 우리 프로젝트에서도 최신 버전으로 바꿔줘야 한다. 매번 귀찮기도 하고 버전에 따라 하위 호환성 여부까지 신경 쓰려면 휴먼 에러가 날 수도 있다.

 

3. NPM을 이용한 방법

라이브러리를 어느 한 곳에 업데이트 하고 하위 호환되는 안전한 버전만 다운로드하여 사용할 수 있도록

NPM을 이용하여 설치할 수 있다.

 

 

npm install 명령어로 외부 패키지 react를 우리 프로젝트 폴더로 다운로드 한다.

 

package.json에는 설치한 패키지 정보를 기록한다.

package.json

 

4. 유의적 버전

버전 16.12.0 앞에 ^ 표시는 무슨 뜻일까❔

 

버전 번호를 관리하기 위한 규칙을 '유의적 버전'이라 한다. 유의적 버전은 주, 부, 수 세 가지 숫자를 조합하여 버전을 관리한다. npm은 유의적 버전을 따르는 전제 하에 패키지 버전을 관리한다.

 

버전 변경 기준

• 주 버전(Major Version) : 기존 버전과 호환되지 않게 변경한 경우
• 부 버전(Minor version) : 기존 버전과 호환되면서 기능이 추가된 경우
• 수 버전(Patch version) : 기존 버전과 호환되면서 버그를 수정한 경우

5. 버전의 범위

NPM은 유의적 버전 명세뿐 아니라 버전의 범위를 자신만의 규칙으로 관리한다.

 

가장 간단한 방법이 특정 범위를 사용하는 것이고, 특정 버전보다 높거나 낮은 경우 다음과 같은 기호로 명시한다.

1.2.3 >1.2.3 >=1.2.3 <1.2.3 <=1.2.3

 

마지막으로 틸드(~)와 캐럿(^)으로 명시한다.

~1.2.3 ^1.2.3

 

틸드(~)

마이너 버전이 명시되어 있으면 패치 버전만 변경한다.

예 ) ~1.2.3 이면 1.2.3부터 1.3.0 미만 까지를 포함

 

마이너 버전이 없으면 마이너 버전을 갱신한다.

예 ) ~0 표기는  0.0.0부터 1.0.0까지를 포함

 

캐럿(^)

정식버전에서 마이너와 패치 버전을 변경한다.

예 ) ^1.2.3이면 1.2.3부터 2.0.0 미만 까지를 포함

 

정식버전 미만은 0.x 는 패치만 갱신한다.

예 ) ^0 표기는 0.0.0부터 0.1.0 미만 까지를 포함

 

 

npm은 캐럿 방식을 사용한다. 그래서 설치한 리액트는  ^17.0.2 표기로 범위를 기록한 것이다.

 

---

참고 사이트

https://jeonghwan-kim.github.io/series/2019/12/09/frontend-dev-env-npm.html