npm

프론트엔드 개발에 Node.js가 필요한 이유

최신 스펙으로 개발할 수 있다.

js 스펙의 빠른 발전에 비해 브라우저의 지원 속도는 항상 뒤쳐진다. 아무리 편리한 스펙이 나오더라도 이것을 구현해 주는 징검다리 역할, 바벨과 같은 도구의 도움 없이는 부족하다. 웹팩, NPM 같은 노드 기술로 만들어진 환경에서 사용할 때 비로소 자동화된 프론트엔드 개발환경을 갖출 수 있다.

Typescript, SASS 같은 고수준 프로그래밍 언어를 사용하려면 전용 트랜스파일러가 필요. Node.js 환경이 뒷받침 되어야 프론트엔드 개발환경을 만들 수 있다.

빌드 자동화

코딩 결과물을 브라우저에 바로 올리는 경우는 흔치 않다. 파일을 압축하고, 코드 난독화하고, 폴리필을 추가하는 등 개발 이외의 작업을 거친후 배포한다. Node.js는 이러한 일련의 빌드 과정을 이해하는데 적지 않은 역할을 한다. 뿐만 아니라 라이브러리 의존성을 해결하고, 각종 테스트를 자동화 하는데도 사용한다.

개발 환경 커스터마이징

React.js의 CRA, Vuejs의 vue-cli를 사용하지 못하는 경우 개발환경을 커스터마이징 하려면 Node.js 지식이 필요하다.

프로젝트 생성

npm init

패키지 설치

CDN을 이용하는 방법

외부 라이브러리르 가져다 쓰는 것은 무척 자연스러운 일이다. 간단한 방법은 CDN(컨텐츠 전송 네트워크)으로 제공하는 라이브러리를 직접 가져 오는 방법이다.

직접 다운로드하는 방법

CDN을 사용하다 보면 CDN 서버에 문제가 생기는 등의 에러가 발생하면 CDN으로 가져온 서비스 자체에 문제가 생길 수 있기 때문에 이러한 장애와 독립적으로 웹 어플리케이션을 제공하기 위한 방법이 될 수 있다.

하지만 라이브러리는 계속 업데이트가 되고 우리 프로젝트에서도 최신버적으로 교체해야하는 상황이 발생한다면 이를 직접 다운로드하는 과정은 매우 번거로운 일이다. 버전에 따라 하위 호환성 여부까지 확인하려면 휴먼에러가 발생할 여지가 있다.

NPM을 이용하는 방법

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

유의적 버전

“^x.x.o” 표기의 뜻

프로젝트에서 사용하는 패키지의 버전을 엄격하게 제한한다면 프로젝트를 버전업 하는데 꽤 힘들 수 있다. 사용하는 패키지를 전부 버전업해야 하기 때문이다.

패키지 버전을 느긋하게 풀어 놓으면 여러 버전별로 코드를 관리해야하는 혼란스러움을 겪을 수 있다.

버전 번호를 관리하기 위한 규칙이 필요한데 이 체계를 “유의적 버전" 이라고 한다. NPM은 이 유의적 버전을 따르는 전제 아래 패키지 버전을 관리한다.

유의적 버전은 주(major), 부(minor), 수(patch) 세 가지 숫자를 조합해서 버전을 관리한다.

• 주 버전: 기존 버전과 호환되지 않게 변경할 경우
• 부 버전: 기존 버전과 호환되면서 기능이 추가된 경우
• 수 버전: 기존 버전과 호환되면서 버그를 수정한 경우

버전의 범위

특정 버전 사용

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부터 2.0.0 미만 까지를 포함한다. 정식버전 미만인 0.x 버전은 패치만 갱신한다. ^0 표기는 0.0.0 부터 0.1.0 미만 까지를 포함한다.

보통 라이브러리 정식 릴리즈 전에는 패키지 버전이 수시로 변한다. 0.1에서 0.2로 부버전이 변하더라도 하위 호환성을 지키지 않고 배포하는 경우가 빈번하다. ~0으로 버전 범위를 표기한다면 0.0.0 부터 1.0.0미만 까지 사용하기 때문에 하위 호환성을 지키지 못하는 0.2로도 업데이트 되어버리는 문제가 생길 수 있다.

반면 캐럿을 사용해 ^0.0으로 표기한다면 0.0.0 부터 0.1.0미만 내에서만 버전을 사용하도록 제한한다. 따라서 하위 호환성을 유지할 수 있다.

NPM으로 패키지를 설치하면 package.json에 설치한 버전을 기록하는데 캐럿 방식을 이용한다. 초기에는 버전 범위에 틸트를 사용하다가 캐럿을 도입해서 기본 동작으로 사용했다.