NPM - 프론트엔드 개발환경 이해 [1/3]

1. Node.js 란 무엇일까

기존 웹에서는 정적인 html 파일에 다이나믹한 변화를 주기 위해 JavaScript가 쓰이고 있었다.

이 언어를 해석하는 주체는 브라우저로 각 브라우저 마다 JS 해석 엔진이 있다. 예로 크롬은 V8, 익스플로러는 Chakra 등.

브라우저에서만 동작하던 JS를 V8엔진에 살을 붙여서 브라우저가 아닌 다른 환경에서도 쓸 수 있게 만든 것이 Node.js이다.

쉽게 말해 자바스크립트 실행 환경이라고 볼 수 있다. 따라서 Node.js만 있으면 브라우저 없이도 자바스크립트 문법을 실행할 수 있다.

 

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

최신 스펙으로 개발 가능

빌드 자동화

개발 환경 커스터마이징

 

3. Node의 REPL 기능

REPL(read-eval-print loop)은 단일 사용자의 입력을 받아 이를 평가(실행)하고 결과를 사용자에게 반환시키는 단순한 상호작용 컴퓨터 프로그래밍 환경이다. REPL 환경으로 작성된 프로그램은 구간마다 실행된다.

node의 REPL 기능

 

4. NPM 으로 프로젝트 생성

Node를 설치하면 node package manager인 npm도 설치가 된다.

npm init

 

npm init 실행시 생성된 pakcage.json

• name: 프로젝트 이름
• version: 프로젝트 버전 정보
• description: 프로젝트 설명
• main: 노드 어플리케이션일 경우 진입점 경로. 프론트엔드 프로젝트일 경우 사용하지 않는다.
• scripts: 프로젝트 명령어를 등록할 수 있다.초기화시 test 명령어가 샘플로 등록되어 있다
• author: 프로그램 작성자
• license: 라이센스

 

5. NPM 기본 명령어 확인

npm의 기본 명령어를 확인할 수 있다.

npm

npm 기본 명령어

 

 

6. 커스텀 명령어 추가하기

위와 같이 package.json에 build 명령어를 추가하고, 커스텀으로 등록한 명령어는 아래 형식으로 run을 추가해서 실행한다.

npm run build

위 명령어 실행시 커스텀하게 작성한 명령어가 실행 된다.

 

7. 외부 패키지 설치하기

아래 명령어로 리액트 라이브러리를 설치할 수 있다.

npm install react

 

 

최신 버전의 react를 NPM 저장소에서 찾아 우리 프로젝트로 다운로드 하는 명령어다. package.json에는 설치한 패키지 정보를 기록한다.

 

 

8. NPM의 버전 관리 방법

유의적 버전 : npm에서 버전 번호를 관리하기 위한 방법

 

1.2.3 버전일 때, 주 버전 = 1, 부 버전 = 2, 수 버전 = 3 이다.

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

 

오직 특정한 버전만 사용할 경우

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 미만 까지를 포함한다.

 

package.json 파일에서 react의 버전을 ~0 으로 변경 후 npm install으로 다시 설치해 본다.

cat node_modules/react/packatge.json

위 명령어로 설치된 리액트 버전을 확인해 본다.

~(틸드)는 마이너 버전까지 변경된 것을 확인할 수 있다.

 

 

캐럿(^)

마이너와 패치버전 변경까지 포함

^1.2.3

캐럿은 정식버전에서 마이너와 패치 버전을 변경한다. 예를 들어 ^1.2.3 표기는 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 미만 내에서만 버전을 사용하도록 제한한다. 따라서 하위 호완성을 유지할 수 있다. (자세한 내용은 여기를 참고)

 

 

^(캐럿) 표시를 이용해서 리액트 버전을 ^0.0으로 명시 후 다시 설치해보면

마이너 버전은 그대로고 패치 버전까지만 최신으로 설치된 것을 확인할 수 있다.