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

웹팩을 설정해서 프로젝트를 다루고 있지만 빌드할 때 새로운 문제에 직면하면 원인을 예측하기 어려워 해결하는 데에 시간이 많이 들곤 했다. 프론트엔드 빌드 시스템에 대해 처음부터 정리하고 싶어서 김정한님의 '프론트엔드 개발환경의 이해와 실습' 강의를 들으며 주요 개념을 익혀보기로 했다.

 

Node가 필요한 이유

- 최신 스펙 사용: 자바스크립트 스펙에 비해 브라우져 지원 속도는 뒤쳐지므로 바벨 웹팩 등의 도구가 필요하다. 이것들은 Node환경에서 돌아가는 도구들이다.

- 빌드 자동화: 최근엔 코딩한 것을 그대로 브라우져에 올리기보다는 파일 압축, 코드 난독화, 폴리필 추가 등 개발 이외의 작업을 거친 후 배포한다. Node는 이 빌드 과정을 이해하는 데에 도움이 된다.

- 개발환경 커스터 마이징: 자동화된 도구 이외에 환경을 구축해야 하는 경우 Node 지식이 필요하다.

 

프로젝트 생성

LTS는 장기간 지원해주는 안정적인 버전이며 주로 Node로 서버를 운영할 때 사용

불안정 할 수 있지만 LTS보다 최신 기술을 포함해주는 버전이며 개발환경을 구축할 때 사용

 

설치 후 터미널에 node라고 입력하면 노드 터미널 도구가 실행된다.  REPL(read-eval-print loop)라고 하는데 자바스크립트를 입력하고 결과를 바로 확인할 수 있다.

 

프로젝트 초기화

npm init 명령을 사용하여 프로젝트를 생성한다. npm init -y으로 질문을 스킵 후 package.json 파일을 생성할 수 있다.

 

프로젝트 명령어

package.json에 등록한 scripts를 이용해 실행한다. 애플리케이션의 빌드, 테스트, 배포, 실행 등의 명령어를 등록한다.

npm에서 기본적으로 사용할 수 있는 명령어는 npm 명령어를 쳐서 아래와 같이 확인할 수 있다.

Usage: npm <command>

where <command> is one of:
    access, adduser, audit, bin, bugs, c, cache, ci, cit,
    clean-install, clean-install-test, completion, config,
    create, ddp, dedupe, deprecate, dist-tag, docs, doctor,
    edit, explore, get, help, help-search, hook, i, init,
    install, install-ci-test, install-test, it, link, list, ln,
    login, logout, ls, org, outdated, owner, pack, ping, prefix,
    profile, prune, publish, rb, rebuild, repo, restart, root,
    run, run-script, s, se, search, set, shrinkwrap, star,
    stars, start, stop, t, team, test, token, tst, un,
    uninstall, unpublish, unstar, up, update, v, version, view,
    whoami

커스텀 명령어를 추가 할 수 있다. 

package.json:

{
  "scripts": {
    "build": "next build"
  }
}

커스텀으로 등록한 명령어는 run을 추가해서 실행한다.

$ npm run build

 

패키지 설치

- CDN을 이용하는 방법: CDN 서버 장애로 외부 라이브러리를 사용할 수 없는 경우, 우리 애플리케이션도 정상 작동하지 않을 수 있는 단점이 있다.

- 직접 다운로드: CDN을 사용하지 않기 떄문에 장애와 독립적으로 웹 애플리케이션을 제공한다. 그러나 계속 업데이트되는 라이브러리를 매번 직접 다운로드하는 것은 번거롭다.

- NPM을 이용한 방법: npm install 명령어로 외부 패키지를 프로젝트 폴더에 다운로드 한다. 최신 버전의 패키지를 NPM 저장소에서 찾아 우리 프로젝트에 다운로드하는 명령어이다.

package.json에서 확인할 수 있다.

{
  "dependencies": {
    "react": "^16.12.0"
  }
}

 

유의적 버전(Sementic Version)

버전 번호를 관리하기 위한 규칙이 필요한데 그 체계를 말한다. NPM은 이 유의적 버전(Sementic Version)을 따르는 전제 아래 패키지 버전을 관리한다.

유의적 버전은 Major, Minor, Patch 세가지 숫자를 조합해서 관리한다.

 

버전 변경 기준

- 주 버전(Major Version): 기존 버전과 호환되지 않게 변경한 경우

- 부 버전(Minor Version): 기존 버전과 호환되면서 기능이 추가된 경우

- 수 버전(Patch Version): 기존 버전과 호환되면서 버그를 수정한 경우

 

버전의 범위

특정 버전 명시 or 특정 버전 보다 높거나 낮을 경우의 표현

1.2.3
>1.2.3
>=1.2.3
<1.2.3
<=1.2.3

틸트(~)와 캐럿(^)으로 이용범위 명시

~1.2.3
^1.2.3

틸트(~)

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

ex) ~1.2.3: 1.2.3 부터 1.3.0 미만까지 포함

 

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

ex) ~0: 0.0.0 부터 1.0.0 미만까지 포함

 

캐럿(^)

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

ex) ^1.2.3: 1.2.3 부터 2.0.0 미만까지 포함

 

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

ex) ^0: 0.0.0 부터 0.1.0 미만까지 포함

 

정식버전 릴리즈 전에는 부버전이 변하더라도 하위 호환성을 지키지 않고 배포하는 경우가 빈번하다. 이럴 때 캐럿을 사용하면 하위 호환성을 유지할 수 있으므로 npm은 초기에 틸트를 사용하다가 현재는 캐럿을 기본 동작으로 사용하고 있다.

 

cf) 패키지의 모든 버전을 확인하는 명령어

$ npm view react version