NPM 패키지 설치와 Express, Nodemon

NPM(Node package manager)은 이름에서 알 수 있듯이, Node.js 개발의 편의를 위해 다양한 모듈들을 모아둔 패키지이다. 대부분의 Node.js 백엔드 개발자들인 이 NPM 패키지를 설치해서 사용하고 있다.

설치

우선 NPM을 설치하기 위한 임의의 폴더 하나를 생성한다. 터미널 창에서 아래의 코드를 입력한다.

npm init

설치가 끝나면 package.json이라는 파일이 생성된 것을 볼 수 있다. 설치 과정 중 터미널에서 name을 비롯한 몇 가지를 물어보는데 입력하지 않고 엔터를 쳐도 무방하다.

package.json

{
  "name": "npm-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "hello": "echo hello",
    "설명": "echo 여기에 서버 실행을 위한 명령어를 넣음"
  },
  "author": "나야나",
  "license": "ISC"
  }

package.json은 Node.js NPM의 버전과 의존성을 관리하기 위한 파일이다.

이 중 나중에 서버를 운영하게 된다면, 생성된 오브젝트의 scripts라는 키에 서버 실행을 위한 명령어를 넣는다.
이제 다시 터미널 창에 npm run test라는 명령어를 입력하면, scripts의 test 키를 가진 값이 실행된다.

여기서 echo는 JavsScript에서 console.log()의 개념으로 이해해도 무방하다.

npm run hello를 입력하면 hello가 나올 것이고,
npm run 설명을 입력하면 여기에 서버 실행을 위한 명령어를 넣음이 나올 것이다.

Express

이제 Express를 설치해보자.

Express는 Node.js에서 웹 서비스를 쉽게 해주는 웹앱 프레임워크이다. Node.js와 Express로 강력한 웹 서비스를 쉽게 개발할 수 있다.

npm install express
npm install -D nodemon
npm install -g express-generator

nodemon은 -D를 붙여 개발환경에서만 사용할 수 있게 설치하였고, express-generator는 Express의 기본 구조를 만들어주는데 -g를 붙여 전역에서 이 패키지를 사용할 수 있도록 설치했다.

프로젝트 시작

이제 본격적으로 간단한 프로젝트를 시작해보자.

밑 작업

터미널 창에서 아래 명령어를 입력하여, NPM-Express, NPM-Express-Generator, Nodemon을 설치한다.

npm install -g express express-generator nodemon

그리고 아래 명령어를 입력하여 first-project란 이름의 프로젝트를 생성할 수 있다. 해당 명령어를 실행하면, 현 위치에 first-project라는 폴더가 생긴 것을 확인할 수 있다.

express --ejs first-project

터미널에서 first-project로 디렉토리를 옮긴 후 npm install을 입력하면, first-project 안에 내용이 채워지고 모든 준비가 끝난 것이다.

여기서, package.json을 살펴보자.

{
  "name": "first-project",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "ejs": "~2.6.1",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "morgan": "~1.9.1"
  }
}

scripts 키의 오브젝트 안에 start라는 키에 "node ./bin/www"라는 값이 있는 것을 볼 수 있다. 이제 아까 배웠던 것처럼, 터미널 창에 npm run start라고 입력해서 서버를 실행한다. 그리고 브라우저에서 localhost:3000으로 접속해보자.

설치를 마친 후 localhost:3000에 접속한 모습

nodemon

지금 보고 있는 페이지는 first-project 안의 views\index.ejs가 보여지는 것이다.

이 파일을 수정해 웹 서버를 실행할 수 있다. 그런데 파일을 수정하고 저장해도 바로 반영되지 않는다. 서버를 껐다가 다시 켜야 반영되기 때문이다. 터미널 창에서 Ctrl+C를 눌러 서버를 종료하고, 다시 서버를 실행하면 변경된 모습을 볼 수 있다. 하지만 작업마다 서버를 끄고 켜서 수정 내용을 확인한다는 것은 매우 불편한 일일 수 밖에 없다.

이를 해결하기 위해, Nodemon을 설치한 것이다.

Nodemon은 서버를 껐다 켜지 않아도 변경된 내용을 반영하게 해주는 패키지이다.

이제 터미널 창에 npm start 대신, nodemon ./bin/www을 입력해보자.
브라우저에서 마찬가지로 서버가 실행 중인 것을 볼 수 있으며, index.ejs를 수정하고 저장한 뒤 바로 브라우저에서 새로고침을 하면 저장 내용이 반영된 모습을 볼 수 있다.

 

 

하지만 매번 nodemon으로 실행하기 위해 복잡한 명령어를 입력하기란 귀찮은 일이다.

package.json에서 scripts key 부분을 아래와 같이 바꿔주면, npm start만으로도 nodemon으로 서버를 실행시킬 수 있다.

  "scripts": {
    "start": "nodemon ./bin/www"
  },