업데이트 21.03.31
Node.js
Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임이다.
런타임? 프로그래밍 언어가 동작하는 환경을 말한다.
원래는 웹 서버를 운영하기 위해
서버 프로그래밍 언어, 클라이언트(브라우저) 프로그래밍 언어를 공부해야 한다.
이때, Node.js를 사용하면 JavaScript로 양쪽 언어를 커버할 수 있다.
Node.js Download
1) https://nodejs.org/ko/ 접속
2) 14.16.0 LTS Download
웹 사이트 접속 시 14.16.0 LTS과 15.10.0 현재 버전이 보일 것이다.
LTS(Long Term Supported)란 장기적으로 사용하기 위해 설치하는 버전이다.
안정되고 신뢰도가 높은 지원이 보장되는 버전으로, 유지/보수와 보안에 초점을 맞춰져 있다.
그러나, 기업마다 환경이 다르기 때문에 Node.js 버전을 관리해줘야 하는 번거로움이 생긴다.
이에 따라 생겨난 것이 NVM(Node Version Manager)이다.
NVM
NVM(Node Version Manager) Download
1) https://github.com/coreybutler/nvm-windows/releases 접속
2) zip(nvm-setup.zip) 파일 다운로드
3) installer 파일 실행
NVM 명령어 확인
*(asterisks) 표시가 들어가 있는 경우, 현재 사용하고 있다는 뜻이다.
nvm --helpNVM으로 설치되어 있는 Node Version 확인
*(asterisks) 표시가 들어가 있는 경우, 현재 사용하고 있다는 뜻이다.
nvm lsNVM을 이용한 특정 Node Version 설치
// 12.14.1 이외에 자기가 원하는 버전 설치 가능
nvm install 12.14.1Node 버전 전환
nvm use 12.14.1Node 버전 확인
node --version설치되어 있는 Node 버전 삭제
// 12.14.1 이외에 자기가 원하는 버전 삭제 가능
nvm uninstall 12.21.0NPM
NPM(Node Package Manager)이란
NPM이란 전 세계의 개발자들이 만든 다양한 기능(패키지, 모듈)들을 관리하는 매니저이다.
수 많은 개인, 기업, 팀들이 패키지를 NPM 생태계에 업로드한 기능, 모듈, 패키지 등을 다운로드 받을 수 있다. 처음으로 NPM을 사용하면 구성이 복잡하지만, 관리 효율이 증가하며 손쉬운 기능을 고도화할 수 있다.
NPM 버전 확인
npm --versionNPM를 이용한 설치
npm install PACKAGE_NAME -D
*Flag Comment
-D, --save-dev : 개발용 의존성 패키지 설치
[부연 설명]
개발용 의존성 패키지란 서버 단에서 개발할 때만 사용되고, 클라이언트(웹 브라우저)에서는 직접적으로 사용되지 않는다.
만약, -D 플래그를 사용하지 않으면 일반 의존성 패키지 설치로 진행된다.
이는 서버 단에서 뿐만 아니라, 클라이언트 단인 웹 브라우저까지 영향을 준다.node_modules에서 정상적으로 설치되었는 지 확인이 가능하다.
package.json에서 NPM으로 설치한 패키지 확인이 가능하다.
"패키지명": "버전" 형식으로 기재되어 있는 것을 확인할 수 있다.
한번 설치된 패키지들은 package.json의 "devDependencies" { } 에 남게 되고,
이를 기반으로 삭제한 모듈을 다시 설치할 수 있다.
모듈 관련 json 파일은 package.json과 package-lock.json으로 나뉜다.
우리가 직접 관리할 수 있는 json 파일은 package.json 파일이다.
package-lock 파일은 node에서 자동으로 관리하는 파일임으로 수정하는 것을 권장하지 않는다.
(이는 package.json 파일도 마찬가지이나, 필요없는 모듈은 파일 내에서 제거 해도 된다.)
Package.json에 기재되어 있는 package 불러오기
npm install // npm i로 축약 가능Node.js의 Parcel를 이용하여 local 웹 서버 열기
1) Package.json으로 이동 > 아래와 같이 script 'dev' 등록 > 저장
2) NPM을 이용하여 dev 스크립트 실행
npm run dev아래와 같이 스크립트가 실행 된 후,
Server가 Running(Active) 상태로 변했다는 알림이 출력되는 지 확인
- 왜 scripts로 등록해야 될까?
우리가 설치한 Parcel의 패키지가 개발 의존형 패키지이기 때문이다.
사용할 수 있는 범위가 Package.json이 포함되어 있는 프로젝트 안으로 한정되어 있다.
즉, local Terminal에서는 Parcel를 사용할 수 없고, scripts로 등록하여 사용해야 한다.
Node.js의 Parcel를 이용하여 index.html build 하기
1) Package.json으로 이동 > 아래와 같이 script 'build' 등록 > 저장
2) NPM을 이용하여 build 스크립트 실행
npm run builddist 폴더가 생성되며, 파일들이 난독화된 것을 확인할 수 있다.
코드 난독화란 작성된 코드를 용량을 축소화 하기 위해,
브라우저에서만 해석할 수 있도록 코드 최적화를 거치는 것을 말한다.
들여쓰기, 띄어쓰기 등이 생략되어 나오는 모습을 위 사진을 통해 확인할 수 있다.
유의적 버전(Semantic Versioning, SemVer)
유의적 버전이란?
직역 그대로, 버전에 의미를 더한 것을 말한다. 아래 예시를 통해 이해를 도울 수 있다.
Major.Minor.Patch -> 12.14.1
Major인 12 : 기존 버전과 호환되지 않는 새로운 버전을 말한다.
Minor인 14 : 기존 버전과 호환되는 새로운 '기능'이 추가된 버전이다.
Patch인 1 : 기존 버전에서 성능 개선 또는 오류(오타) 개선이 된 버전이다.
Mijor Version에 한해 업데이트
프로그램들은 계속해서 개선-수정되기 때문에 수시로 업데이트 된다.
다른 Major Version 일 경우 호환되지 않기 때문에 가급적 여러 테스트를 거쳐 시스템을 변경해 줘야하지만, Minor Version 같은 경우는 기존 버전과 호환되기 때문에 주기적으로 시스템을 업데이트 하는 것이 좋다.
1) package.json > version 앞에 ' ^(carrot) ' 추가
*대부분 기본 값으로 들어있음
2) npm 업데이트
package.json 파일안에 ' ^ ' 이 들어가 있어야 적용된다.
npm update lodash
만약, 따로 원하는 버전이 있다면 아래와 같은 형식으로 다운로드 받을 수 있다.
npm install PACKAGE_NAME@VERSION
예) npm install lodash@4.17.20수동으로 Module Version 확인하는 방법
실제 Module Version이 package.json에 기재된 버전과 다를 수 있다.
따라서, 수동으로 Module Version을 확인하는 방법을 알고 있어야 한다.
1) node_modules 폴더로 이동
2) package.json > 찾기 'version'
NPM과 버전 관리
NPM을 이용하면 버전 관리의 부담을 크게 줄일 수 있다.
실제로, GitHub에 프로젝트에 사용된 모든 파일(Module 등)을 업로드 한다면 큰 용량을 차지할 것이다.
따라서 Module 및 코드 난독화 파일 및 캐시 파일은 git에서 무시하도록 설정하는 것이 좋다.
- git에서 특정 폴더를 무시하도록 '.gitignore'를 이용하면 된다.
.gitignore 사용
1) 루트 폴더에 아래와 같이 .gitignore 파일 생성 > 무시할 폴더(파일) 기재
2) bash에 git init을 통해 버전 관리 시작
git initnpm을 이용한 환경 구성
만약, git init 말고 로컬 환경에 node_modules 등을 불러오고 싶다면,
아래와 같이 진행하면 된다.
npm i // node_modules 불러오기 (package.json, package-lock.json)
npm run build // index.html 코드 난독화 (용량 축소)