패키지 설치
1) CDN을 이용한 방법
외부 패키지를 가져오는 가장 간단한 방법은 CDN(컨텐츠 전송 네트워크)으로 제공하는 라이브러리를 직접 가져오는 방식이다. 리액트의 주소를 html에서 로딩하면 된다.
1
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
하지만 네트워크를 통해 받아오는거기에 CDN 서버 장애가 발생하면 이를 사용하는 웹 애플리케이션에 장애가 발생하게 될 것이다.
2) 직접 다운로드하는 방법
해당 라이브러리 코드를 직접 프로젝트에 다운 받아 넣는 것이다.
CDN을 사용할때의 문제는 없겠지만, 라이브러리가 업데이트 될때마다 프로젝트에서도 최신 버전으로 교체해줘야 한다. 매번 직접 다운로드하는 것은 매우 귀찮은 일이 될 것이다. 버전에 따라 하위 호환성 여부까지 확인하려면 실수할 여지가 많다.
3) NPM으로 의존성을 관리하는 방법
npm을 사용하면 위 2번의 단점을 해결할 수 잇다.
npm install 명령어를 이용하면 프로젝트에 react 라이브러리를 설치할 수 있다. 해당 명령어를 실행할때마다 네트워크를 통해 라이브러리 코드를 다운받아와서 최신 코드를 항상 유지할 수 있게 된다.
유의적 버전
Node.js가 버전을 관리하는 방법에 대해 알아보자. package.json을 보면 “^17.0.2” 이런식의 버전을 볼 수 있을 것이다.
만약 프로젝트에서 사용하는 패키지 버전을 매우 엄격하게 제안한다면 프로젝트를 버전업하는데 매우 힘들 수 있다. 반대로 사용하는 패키지의 버전을 느슨하게 풀어놓으면 오히려 버전별로 코드를 관리해야하는 혼란스러움을 겪게 될 수도 있다.
버전 번호를 관리하기 위한 규칙이 필요한데 이 체계를 유의적 버전 이라 하며 이에 대해서는 별도 포스팅에 정리해놓았으니 참고하면 좋다.
짧게 정리하면 주(Major), 부(Minor), 수(Patch) 세 가지 숫자를 조합해서 버전을 관리하는 방법인데. 위에 설치한 react의 버전은 v16.12.0인데 주 버전이 17, 부 버전이 0, 수 버전이 2인 셈이다.
- 주 버전(Major Version): 기존 버전과 호환되지 않게 변경한 경우
- 부 버전(Minor version): 기존 버전과 호환되면서 기능이 추가된 경우
- 수 버전(Patch version): 기존 버전과 호환되면서 버그를 수정한 경우
버전의 범위
NPM이 버전을 관리하는 방식은 유의적 버전 명세 뿐만아니라 버전의 범위를 Nodejs만의 규칙으로 관리한다. 가장 단순한 것이 특정 버전을 사용하는 경우다.
1
1.2.3
특정 버전보다 높거나 낮을 경우는 다음과 같이 명시한다.
1
2
3
4
>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 미만 까지를 포함한다.
과거에는 Node.js가 틸트를 이용해서 버전을 명시했는데 지금은 캐럿(^) 을 사용한다. 이렇게 바뀐 이유는 다음과 같다.
보통 라이브러리 정식 릴리즈 전에는 패키지 버전이 수시로 변한다. 0.1에서 0.2로 부버전이 변하더라도 하위 호환성을 지키지 않고 배포하는 경우가 빈번하다. ~0로 버전 범위를 표기한다면 0.0.0부터 1.0.0미만까지 사용하기 때문에 하위 호완성을 지키지 못하는 0.2로도 업데이트 되어버리는 문제가 생길수 있다.
반면 캐럿을 사용해 ^0.0으로 표기한다면 0.0.0부터 0.1.0 미만 내에서만 버전을 사용하도록 제한한다. 따라서 하위 호완성을 유지할 수 있다. (자세한 내용은 여기를 참고)
^와 ~ 의 차이를 알아볼 수 있는 간단한 실습
1
npm view react versions
위 명령어를 터미널에 입력하면 react의 모든 버전을 확인할 수 있다.
아래와 같이 package.json 파일의 react 버전을 ~0으로 적어 두고 npm install 명령어를 실행 후 cat node_modules/react/package.json 명령어를 실행해서 실제 설치된 react 버전을 확인해보면 0.14.10 까지 다운 받아진 것을 확인할 수 있다. 마이너버전까지 업데이트하기때문에 정식버전 전인 0.14.0 까지
설치되게 되고 부버전이 변경되면서 하위 호완성이 깨지게 된다.
이것을 방지하기 위해 캐럿(^) 방식을 사용하는데 직접 확인해보면 마이너버전이 변경되지 않은채 패치 버전만 가장 최신 걸로 적용된 것을 확인할 수 있다.
Note: 그리 중요한건 아니지만 npm이 패키지를 관리할때 어떤식으로 관리하는지 알아두면 좋다.