javascript 공부 1 - node.js , npm(node package manager)

 

node.js란? 

 

chorome V8 Javascript 엔진으로 빌드된 JavaScript 런타임 .(런타임이란 프로그래밍 언어가 동작하는 환경을 말한다. ) 

JS 가 돌아갈 수 있는 환경중  두가지 대표적인 것은 node.js(서버) ,  브라우저이다 . 

프런트엔드 개발에서  화면 개발을 위해 여러가지 라이브러리들을 설치해서 개발을 하게 되는데 이러한 모듈들은 브라우저 환경에서 직접

 적으로 설치하고 동작할 수 없기 떄문에 node js 를 통해  해당 라이브러리들을 사용할 수 있게 된다(html , css , js 로 변환 시켜줌). 

 

 

NVM(node version manager)

 

node.js 사이트에서 한가지 버전을 다운받아서 사용할 수도 있지만.  

프로젝트마다 node 의 버전이 다를 수 있기 때문에  

작업 환경에 따라  원하는  노드버전을 설치 사용할 수 있게 해주는 NVM을 사용하여 node js 를 사용하는 것이 좋다 ,

 

 

https://github.com/nvm-sh/nvm

GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions

 

 

맥에서의  nvm 설치 

 

https://gist.github.com/falsy/8aa42ae311a9adb50e2ca7d8702c9af1

(falsy님 깃허브  nvm 설치및 nvm을 통한 노드 js 설치 노드 js 버전 변경 등 자세히 나와 있습니다)

NVM(Node Version Manager) 맥OS에서 설치 & 사용하기

 

 

nvm 주요 명령어 

 

// 원하는 node js를 install 시켜준다.
nvm install (node js 버전)

// 인스톨한 버전중 원하는 node js 버전을 선택한다 
nvm user (node js 버전 )

// 특정 버전을 삭제한다 
nvm uninstall (node js 버전)

// nvm 명령어 정보를 출력해준다 
nvm help

 

npm(Node Package Manager)

 

node js 를 설치하면 npm 이 같이 설치 되는 걸 볼 수있는데  npm 이란 다양한 라이브러리들을 프로젝트에서 사용할 수 있게 관리해주는  자바의 maven , gradle 과 같은 패키지 매니저이다 .  npm 저장소 안에는 현재 100만개 이상의 패키지들이 저장되어 있다고 한다.

npm을 사용하면 프로젝트의 관리 효율이 커지고 손쉽게 기능을 고도화 할 수 있다. 

 

 

npm을 통한 프로젝트 생성

 

//package.json 파일 이 생성된다 해당 파일로 프로젝트를 관리한다 .  
npm init -y

 

기본 package.json 구조 

 

기본 옵션들 설명

 

프로젝트 이름 (name),

프로젝트 버전(version) ,

프로젝트 설명 (description),

메인 실행파일(main) , 

프로젝트 안에서 글로벌하게 사용할 수 있는 스크립트 정의(scripts)

프로젝트 키워드(keyword) ,

만든이 (author)

 

 

 

pacel-bundler

 

 

npm install parcel-bundler -D

 

위의 명령어를 통해 parcel-bundler라는 모듈을  프로젝트에 install 해보자 

 

parcel-bundle는 프런트엔드 개발용 서버를 띄워주고 개발시 업데이트 되는 내용을 반영해주는 모듈이다

 

아래와 같이 node_modules 폴더와 package-lock.json 파일이 생겼다 . 

 

 

 

node_modules폴더를 열어보면 pacel-bundler 외에 여러가지 모듈들이 받아졌다 . 

이유는  pacel-bundler가 의존하고 있는 패키지들까지 -D 옵션을 통해  한번에 같이 받아졌기 떄문이다 .

 

 

 

다시 프로젝트의 package.json 으로 돌아가 보면 프로젝트에서 npm install로 설치한 모듈들이 devDependencies에 남게 된다. 

아래와같이 devDependencies라는 필드에 parcel-bundler 와 버젼이 기와 벨류로 추가 되있는 것을 알 수 있다.

현재 패키지에 어떤 모듈들이 사용되고 있고 버전은 어떻게 되는지 알 수 있다.  

 

 

 

위와 같이 프로젝트의 루트  package.json 파일에 모듈들이 정의 되어 있으면 

 

프로젝트 생성시에 정의된 모듈들을 함께 설치하게 된다 . 

 

 

package-lock.json 

 

package-lock.json에는 package.json에 정의된 모듈들이 의존하고 있는 모듈들의 정보들이 들어간다 .

npm을 통해 자동으로 관리되는 파일이기 떄문에 lock 이라는 이름이 같이 붙어있다 . 

 

 

npm install -D 와 npm install 의 차이 

 

npm install -D: 옵션이 들어 간다면 개발시에만 필요한  개발용 의존성 패키지임을 의미한다. (--save-dev의 약어이다)

npm install: 브라우저에서 돌아갈때 필요한 일반 패키지 임을 의미한다.

 

 

 

package.json scripts에 스크립트 추가하기 

 

 

package.json에 정의된 모듈들은 현재 프로젝트 내부에 깔려 있는 것이지 컴퓨터 자체에 깔린것이 아니기 때문에 

 

터미널에서 위에서 다운받은 parcel_이라는 명령어를 사용하려해도 인식을 하지 못한다 . 

 

이렇게 프로젝트 개발시에 프로젝트 내부에서만 사용하는 모듈들을 사용하고 싶을때  

 

즉 로컬환경에서 개발서버를 열려고 할때 

 

package.json scripts를 추가하여 사용할 수 있다 . scripts 부분에 아래와 같이 추가하고 

 

scripts : {

      "dev": "parcel index.html"

}

 

터미널에서 npm run (스크립트에 등록해놓은 키값) 명령어를 통해 해당 스크립트를 실행시 킬 수 있다.

 

 

 

Semantic Versioning , SemVer

 

모듈들을 사용하다 보면  '12.14.1 ' 과 같이 버전이 표시되는 걸 알 수 있다 .  

 

. 으로 구분되는 3개의 숫자는 각각  major, minor  , patch 를 의미하며 이를 Semantic Versioning 혹은, 줄여서 SemVer 이라 한다 . 

 

맨앞의 major 버전은 기존 버전과 호환되지 않는 새로운 버전을 의미하고 가장 큰 범위에서의 버전이다  

중간의 minor 버전은 같은 major버전에서 새로운 기능이 추가된 버전을 의미한다 . 

마지막 pathc 는 버그 및 오타 등이 수정된 버전을 의미한다 . 

 

맨앞에 ^ (캐럿기호) 가 붙어 있기도한데 이는 Major 버전 안에서 가장 최신 버전으로 업데이트가 가능하다는 것을 의미한다 

 

버전에 ^ 가 붙어 있다면 npm update 명령어를 이용해서 최신버전으로 업데이트를 해줄 수 있다 . (major 버전은 바뀌지 않는다.)

 

 

NPM으로 생성한 프로젝트 버전관리

 

npm 으로 생성된 프로젝트에서는 package.json 파일에 정의된대로 프로젝트가 build 되며

package.json 의 devDependencies와 dependencies 에 적혀있는 모듈들이 함께 인스톨 된다 .  

또 package-lock.json 에는 위의 모듈들이 의존하고 있는 모듈들에 대한 정보들이 정의되어 있어 build 시에

의존 모듈들 까지 함께 install 하게 된다 . 

 

 때문에 프로젝트 버전관리를 위해 깃헙에 push 할때  로컬에 생성된 node_modules 폴더는 용량이 크고 버전관리가 필요하지 않기 떄문에  git ignore 해주는 것이 좋다