1. FE 개발에 Node.js가 필요한 이유
1-1. 최신 스펙으로 개발할 수 있다
최신 스펙이 브라우저에 적용되기까지는 시간이 걸리므로, 징검다리 역할을 해주는 도구가 필요한데, 대부분의 도구들이 Node.js 위에서 돌아간다.
TypeScript나 SASS 같은 고수준 프로그래밍 언어의 경우 전용 트랜스파일러가 필요하며, 이것 역시 Node.js 환경이 뒷받침 되어야 유용하게 사용할 수 있다.
1-2. 빌드 자동화
파일 압축, 코드 난독화, 폴리필 추가 등의 빌드 과정을 이해하는데 큰 역할을 한다.
1-3. 개발 환경 커스터마이징
자동화툴을 사용할 수 없는 경우 Node.js 지식이 있다면 스스로 환경을 구축할 수 있다.
2. Node.js 설치
https://Nodejs.org에서 설치 가능
LTS는 안정화 버전, 현재 버전은 최신 버전
설치 후 shell에 node를 입력하면 자바스크립트 코드를 입력할 수 있는 REPL을 실행한다. 나올 때는 .exit을 실행한다.
버전은 node -v 혹은 node --version으로 알 수 있다.
npm도 함께 설치된다.
3. 프로젝트 생성
npm init으로 패키지를 생성할 수 있다.
4. 프로젝트 명령어
npm <명령어>로 명령어를 실행한다. 설치 시 패키지에 기본 제공되는 스크립트 명령어 test를 실행하면 "Error: no test specified"와 에러코드 1번을 반환한다.
콘솔에 npm을 입력하면 가능한 명령어 리스트가 나온다. 이 중 자주 사용하는 명령어는 프로젝트를 시작하는 start와 서드파티 라이브러리를 설치하는 install 등이 있다.
명령어를 추가하고 싶다면 scripts에 추가한다. 커스텀 명령어 실행은 npm run을 입력한다. 예를 들어 build를 추가했다면 npm run build로 실행할 수 있다.
5. 패키지 설치
가장 쉬운 라이브러리 사용법은 CDN(Content Delivery Network)을 이용하는 것이다. 하지만 전송 측에서 에러가 발생한다면 우리의 프로젝트도 장애을 겪을 수밖에 없다. 이와 무관하게 해당 라이브러리를 구동하기 위해 프로젝트에 직접 설치하는 것이 낫다.
그러나 버전이 변경될 때마다 개발자가 직접 설치하는 것은 번거롭고 불편하다. 이것을 자동화한 방법이 npm install <설치할 라이브러리>을 통한 패키지 설치이다. 예를 들어, 리액트를 설치한다면 npm install react를 입력한다.
설치 후 패키지의 dependencies에 "react": "^18.2.0"이 추가된 것을 확인할 수 있다.
5-1. 유의적 버전
버전을 타이트하게 제한하면 버전업에 고전할 수 있다. 반대로 느슨하게 풀면 여러 버전별로 코드를 관리해야 하는 혼란에 빠질 수 있다.
npm은 유의적 버전 체계로 패키지 버전을 관리한다. 주 버전(major), 부 버전(minor), 수 버전(patch)의 세 가지 숫자를 조합한 것이다. "react": "^18.2.0"에서 18은 주 버전, 2는 부 버전, 0은 수 버전에 해당한다.
- 기존 버전과 호환되지 않는 경우
주 버전을 올린다. - 기존 버전과 호환되면서 기능이 추가된 경우
부 버전을 올린다. - 기존 버전과 호환되면서 버그를 수정한 경우
수 버전을 올린다.
5-2. 버전의 범위
각 버전은 기호를 사용하여 범위를 관리한다. 아무것도 없는 경우("react": "18.2.0") 해당 버전에 맞게 설치한다.
특정 버전보다 높거나 낮을 경우 부등호를 사용한다.
"react": ">18.2.0"
"react": "<18.2.0"
"react": ">=18.2.0"
"react": "<=18.2.0"틸드(~)는 부 버전이 명시되어 있으면 수 버전을 변경한다. ~1.2.3이라면 1.2.3부터 1.3.0미만 까지 포함하는 것이다. 부 버전이 없으면 부 버전을 갱신한다. ~0 표기는 0.0.0부터 1.0.0 미만까지를 의미한다.
캐럿(^)은 정식 버전에서 부 버전과 수 버전을 변경한다. ^18.2.0은 18.2.0부터 19.0.0미만 까지를 의미한다. 정식 버전 미만인 0.x 버전은 수 버전만 갱신한다. ^0 표기는 0.0.0부터 0.1.0미만 까지이다.
라이브러리의 모든 버전 보는 명령어 :
npm view <라이브러리> versions
