프론트엔드 개발 환경의 이해 - NPM

본 글은 "프론트엔드 개발환경의 이해와 실습(webpack, babel, eslint..)" 강좌를 토대로 작성되었습니다.

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

 

 

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

 

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

JS 스펙은 빠르게 발전하는 반면에 브라우저의 지원 속도는 항상 뒤쳐진다.

따라서 Webpack, Babel, NPM 같은 Node.js로 만들어진 도구를 사용하여 자동화된 프론트엔드 개발 환경을 갖출 필요가 있다.

TypeScript, SASS  같은 고수준 프로그래밍 언어를 사용할 때도 전용 트랜스파일러가 필요한데, 이것 역시 Node.js 환경이 뒷받침되어야 한다.

 

2. 빌드 자동화 

과거처럼 코딩 결과물을 바로 브라우저에 올리는 경우는 점점 줄어들고 있다.

파일 압축, 코딩 내용 난독화, 브라우저에 따라 polyfill을 추가하는 등 개발 이외의 추가 작업을 거친 후 배포한다.

Node.js는 이러한 일련의 빌드 과정을 이해하는데 도움을 준다. 또한 라이브러리 의존성을 해결하고, 각종 테스트를 자동화하는데도 사용된다.

 

3. 개발 환경 커스터마이징

CRA(create-react-app), vue-cli 를 사용하면 손쉽게 개발 환경을 갖출 수 있지만, 직접 환경을 구축해야하는 경우 Node.js 지식이 필요하다.

 

 

프로젝트 초기화

 

npm init 명령어로 package.json에 프로젝트의 메타 정보를 기록하고 프로젝트를 초기화한다.

 

위 샘플 명령어는 Error: no test specified를 echo 명령어로 출력하고, 에러 코드 1번을 반환하는 쉘 스크립트다.

 

 

패키지 설치 방법

 

1. CDN(컨텐츠 전송 네트워크)으로 외부 라이브러리를 직접 가져와 라이브러리 주소를 html에서 로딩한다.

→ CDN 서버 장애 발생 시 외부 라이브러리를 가져오지 못해 웹 어플리케이션이 정상적으로 동작하지 않을 수 있다.

 

2. 외부 라이브러리 코드를 프로젝트 폴더에 다운받아 놓는다.

→ 매번 라이브러리가 업데이트될 때마다, 프로젝트에 받아 놓은 라이브러리를 최신 버전으로 교체하기 위해 매번 직접 다운로드하는 것은 매우 귀찮은 일이다. 버전에 따라 하위 호환성 여부까지 확인해야 한다.

 

3. NPM 사용

→ 라이브러리를 어느 한 곳에서 업데이트하고 하위 호환되는 안전한 버전만 다운받아 사용할 수 있게 해준다.

NPM은 Semantic Version에 따라 패키지 버전을 관리하며, 버전의 범위를 자신만의 규칙으로 관리한다.

 

각 버전을 변경하는 기준은 다음과 같다. 

 

Major Version : 기존 버전과 호환되지 않게 변경.

Minor Version : 기존 버전과 호환되면서 기능이 추가됨.

Patch Version : 기존 버전과 호환되면서 버그를 수정함.

 

틸트(~) : 마이너 버전이 명시되어 있으면 패치 버전만 변경하고, 명시되어 있지 않으면 마이너 버전을 갱신한다. ~1.2.3 표기는 1.2.3부터 1.3.0 미만까지 포함하고, ~0 표기는 0.0.0부터 1.0.0 미만까지 포함한다.

 

캐럿(^) : 정식 버전이 아닌 0.x 버전은 패치 버전만 갱신하고, 정식 버전에서는 마이너와 패치 버전을 갱신한다. ^1.2.3은 1.2.3부터 2.0.0 미만까지 포함한다.