Node.js를 사용하기 위해서는 Node.js와 NPM이 컴퓨터에서 설치되어 있어야 한다.
그리고 이 도구들에 대해 어느 정도 배경 지식이 있으면 개발을 하는데 많은 도움이 된다.
Node.js는 브라우저 밖에서도 자바스크립트를 실행할 수 있는 환경을 의미한다.
간단하게 줄여서 Javascript 런타임(자바스크립트가 구동되는 환경)이라고도 한다.
Node.js가 나오기 전까지는 자바스크립트가 브라우저의 동작을 제어하는데 사용되었고 브라우저에서만 실행할 수 있었지만 이제는 Node.js로 자바스크립트를 브라우저 밖에서도 실행할 수 있게 되었고 javascript로 파일을 조작하고 서버까지 개발을 할 수 있게 되었다. Node.js 짱
Node.js를 이해할 수 있는 가장 간단한 방법은 아래와 같은 파일을 만들고 실행해보는 것이다.
// app.js
console.log('hi');
위와 같이 app.js
라는 파일을 하나 만들고 내용을 추가한 뒤 터미널(명령어 실행 창)에서 아래 명령어를 입력한다.
node app.js
그러면 자바스크립트 파일이 실행되면서 명령어 입력 창에 hi
라는 텍스트가 출력된다.
NPM(Node Package Manager)는 명령어로 자바스크립트 라이브러리를 설치하고 관리할 수 있는 패키지 매니저이다.
NPM 공식 사이트에서도 안내가 되어 있지만 전 세계 자바스크립트 개발자들이 모두 자바스크립트 라이브러리를 공개된 저장소에 올려놓고 npm 명령어로 편하게 다운로드 받을 수 있다.
NPM은 Node.js를 설치하면 자동으로 같이 설치된다.
NPM을 맛보기 위해 새 폴더를 하나 만들고 그 폴더에서 아래와 명령어를 실행한다.
npm init -y
명령어가 실행되면 package.json
파일이 생성되고 생성된 파일의 모습은 아래와 같다.
{
"name": "demo"
"version": "1.0.0",
"description" "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
위 구조는 가장 기본적인 구조이며 실제 애플리케이션을 만들 때 자주 사용되는 속성은 다음과 같다.
NPM에서 가장 많이 사용되는 명령어인 npm install
에 대해 알아보겠다.
NPM 초기화 명령어로 package.json
파일을 생성하고 나면 해당 프로젝트에서 사용할 자바스크립트 라이브러리를 설치하게 된다.
이 때 명령어는 아래와 같다.
npm install jquery --save-prod
그리고 지역 설치 명령어의 경우 명령어 옵션으로 --save-prod
를 붙이지 않아도 동일한 효과가 난다.
또한 install
대신 i
를 사용해도 된다.
# 위 명령어와 동일한 효과
npm i jquery
위 명령어로 라이브러리를 설치하면 해당 프로젝트의 node_modules
라는 폴더가 생긴다.
그리고 그 폴더 아래에 해당 라이브러리 파일들이 설치되어 있는 것을 확인할 수 있다.
NPM 전역 설치는 위와 같이 프로젝트에서 사용할 라이브러리를 불러올 때 사용하는 것이 아니라 시스템 레벨에서 사용할 자바스크립트 라이브러리를 설치할 때 사용한다.
npm install gulp --global
라이브러리가 설치되고 나면 이제 명령어 실행 창에 해당 라이브러리 이름을 입력했을 때 명령어를 인식한다.
gulp
전역 설치 명령어 옵션
--global
대신-g
를 사용해도 된다.
이렇게 설치된 자바스크립트 라이브러리는 어느 위치에서 해당 명령어를 실행했던지 간에 OS별로 아래와 같은 폴더 경로에 설치된다.
# window
%USERPROFILE%\AppData\Roaming\npm\node_modules
# mac
/usr/local/lib/node_modules
NPM 지역 설치에 자주 사용되는 2가지 옵션은 다음과 같다.
npm install jquery --save-prod
npm install jquery --save-dev
위 명령어는 아래와 같이 각각 축약할 수 있다.
npm i jquery
npm i jquery -D
여기서 설치 옵션에 아무것도 넣지 않은 npm i jquery
는 package.json
의 dependencies
에 등록된다.
// package.json
{
"dependencies": {
"jquery": "^3.4.1"
}
}
설치 옵션으로 -D
를 넣은 경우에는 해당 라이브러리가 package.json
의 devDependencies
에 등록된다.
// package.json
{
"devDependencies": {
"jquery": "^3.4.1"
}
}
-D
를 넣을 때와 넣지 않을 때의 차이점을 알아보자
NPM 지역 설치를 할 때는 해당 라이브러리가 배포용(dependencies)인지 개발용(devDependencies)인지 꼭 구분해주어야 한다.
예를 들어, jquery
와 같이 화면 로직과 직접적으로 관련된 라이브러리는 배포용으로 설치해야 한다.
# 배포용 라이브러리 설치
npm i jquery
{
"dependencies": {
"jquery": "^3.4.1"
}
}
이렇게 설치된 배포용 라이브러리는 npm run build
로 빌드를 하면 최종 어플리케이션 코드 안에 포함된다.
그런데 만약 반대로 설치 옵션에 -D
를 주었다면 해당 라이브러리는 빌드하고 배포할 때 어플리케이션 코드에서 빠지게 된다.
따라서, 최종 애플리케이션에 포함되어야 하는 라이브러리는 -D
로 설치하면 안된다.
개발할 때만 사용하고 배포할 때는 빠져도 좋은 라이브러리의 예시는 다음과 같다.
webpack
: 빌드 도구
eslint
: 코드 문법 검사 도구
imagemin
: 이미지 압축 도구
NPM 커스텀 명령어란 사용자가 임의로 명령어의 이름과 동작을 정의해서 사용할 수 있는 기능을 의미한다.
// package.json
{
...
"scripts": {
"hello": "echo hi"
}
}
NPM 패키지 관리 파일인 package.json
에 위와 같이 scripts
라는 속성을 추가할 수 있다.
그리고 아래의 명령어를 실행하면 콘솔에 hi가 출력된다.
npm run hello
이처럼 명령어는 실행 창에 매번 긴 명령어를 입력할 필요 없이 커스텀 명령어를 이용해 원하는 동작을 실행 할 수 있다.
NPM 커스텀 명령어는 모두
npm run 명령어 이름
형식으로 실행할 수 있다.
NPM 커스텀 명령어는 웹팩 같은 도구 뿐만 아니라 Node.js 등을 사용할 때도 유용하다.
앞에서 배운 내용으로 실제 커스텀 명령어 사례를 몇 가지 살펴보겠다.
"scripts": {
"dev": "node server.js",
"build": "webpack --mode=none"
}
위 코드는 서버를 실행하는 dev
명령어와 웹팩으로 빌드하는 build
명령어를 정의한 코드이다.
사용자는 매번 node server.js
와 webpack --mode=none
를 칠 필요 없이 npm run dev
와 npm run build
를 입력하면 된다.
아래와 같이 실행하려는 명령어가 길수록 더 빛을 발휘합니다.
"scripts": {
"build": "cross-env NODE_ENV=production webpack --progress --hide-moduels"
}
매번 긴 명령어를 실행하는 것보다 커스텀 명령어를 사용하는 것이 편리성과 속도면에서 더 우수하다.
커스텀 명령어의 또 다른 장점은 해당 명령어에 실행 옵션 뿐만 아니라 다른 커스텀 명령어를 조합할 수 있다는 점이다.
"scripts": {
"build": "webpack",
"deploy": "npm run build -- --mode production"
}
위와 같은 scripts
속성을 정의하고 아래 명령어를 실행해보자
npm run deploy
먼저 build
에 정의한 webpack
명령어가 실행되면서 명령어 뒤쪽에 붙은 실행 옵션들이 수행된다.
이 후 webpack
이란느 도구의 mode
에 production
이라는 값을 넘겨주게 된다.
이렇게 package.json
안에 scripts
에 명령어를 정의하면 쉽고 간단하게 명령어를 실행할 수 있다.