정말 자주 쓰지만 항상 헷갈리는 node.js 서버 환경 세팅을 정리해 봤습니다.

1. node.js & npm 설치

npm 은 Node Package Manager 의 약자로 node.js 관련 패키지 설치 및 버전 관리를 용이하게 해 줍니다. 전세계 개발자들이 node.js 기반의 오픈소스 패키지를 공유하는 거대한 플랫폼이기도 합니다. node.js 를 설치하면 npm 도 같이 설치되니까 node.js 홈페이지나 npm 홈페이지에서 설치하면 됩니다. 내 컴퓨터에 node.js 와 npm 이 설치되어 있는지 확인하고 싶다면, 터미널에 아래 명령어를 입력해보면 됩니다. 설치된 버전정보를 확인하는 명령어입니다.

$ npm -v

$ node -v

요즘은 npm보다 yarn을 많이 쓰는 것 같긴 한데, 저는 귀찮아서 npm을 쓰고 있습니다.

2. Express Generator

Express.js 에서는 Express 기반의 프로젝트를 쉽게 생성할 수 있게 도와주는 Generator를 제공하고 있습니다. npm을 통해 설치할 수 있습니다.

$ npm install express-generator -g

Express-generator 는 다양한 옵션을 제공하고 있습니다. 제너레이터 설치가 완료되었다면, express -h 명령을 이용해 옵션을 확인할 수 있습니다. 뷰 엔진(ejs, pug 등) 과 스타일시트 엔진(css, sass 등)을 설정할 수 있네요. 깃을 사용하신다면 .gitignore 파일도 한번에 생성할 수 있겠습니다.

$ express -h

  Usage: express [options][dir]

  Options:

    -h, --help          output usage information
        --version       output the version number
    -e, --ejs           add ejs engine support
        --hbs           add handlebars engine support
        --pug           add pug engine support
    -H, --hogan         add hogan.js engine support
        --no-view       generate without view engine
    -v, --view <engine> add view <engine> support (ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
    -c, --css <engine>  add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css)
        --git           add .gitignore
    -f, --force         force on non-empty directory

Generator 를 이용해 프로젝트를 만들려면, 원하는 디렉토리에서 express [project명] 명령을 실행하면 됩니다. generator의 기본 뷰 엔진 옵션은 jade 이므로 따로 옵션을 주지 않으면 jade를 사용하도록 설정됩니다. 저는 ejs를 사용하고 싶으므로 설정을 추가하여 프로젝트를 만들어 주었습니다.

$ express --view=ejs myProject && cd myProject

css 대신 sass를 사용하거나 .gitignore 파일을 함께 만들고 싶다면 다음과 같이 옵션을 추가해서 명령어를 실행하면 됩니다. 명령어를 실행하면 아래와 같은 화면이 뜨고 생성된 파일 디렉토리 구조를 확인할 수 있습니다.

$ express --view=ejs --css=sass --git myProject && cd myProject

   create : myProject
   create : myProject/package.json
   create : myProject/app.js
   create : myProject/.gitignore
   create : myProject/public
   create : myProject/routes
   create : myProject/routes/index.js
   create : myProject/routes/users.js
   create : myProject/views
   create : myProject/views/index.ejs
   create : myProject/views/error.ejs
   create : myProject/bin
   create : myProject/bin/www
   create : myProject/public/javascripts
   create : myProject/public/stylesheets
   create : myProject/public/stylesheets/style.sass

   install dependencies:
     $ cd myProject && npm install

   run the app:
     $ DEBUG=myproject:* npm start

   create : myProject/public/images

3. package.json, 모듈 설치

package.json은 쉽게 말해서, 패키지 정보 파일입니다. 패키지명, 버전, 제작자, 의존성 모듈 등의 정보를 포함하고 있으며, npm은 이 파일을 바탕으로 프로젝트를 관리합니다. package.json 파일을 볼까요?

{
  "name": "myProject",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.18.2",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.9",
    "ejs": "~2.5.7",
    "express": "~4.15.5",
    "morgan": "~1.9.0",
    "serve-favicon": "~2.4.5"
  }
}

먼저, scripts 필드에 등록된 명령어는 npm 명령어를 이용해 실행할 수 있습니다. 예를 들어, “start” 스크립트에 “node ./bin/www”가 등록되어 있으면, npm start 명령어로 node ./bin/www를 실행할 수 있습니다. (서버를 실행하는 명령어입니다.)

dependencies 필드에는, 프로젝트를 실행하는 데 필요한 모듈명과 버전이 명시되어 있습니다. npm install 명령어를 실행하면, npm 이 package.json 파일의 dependencies에 명시된 모듈들을 자동으로 설치해 줍니다.

$ npm install

모듈을 설치하고 나면 프로젝트 디렉토리 내의 node_modules 디렉토리에 각종 모듈이 설치된 것을 확인할 수 있습니다.

4. 서버 실행

1) node로 실행

여기가지가 express 를 기반으로 한 가장 기본적인 서버 세팅입니다. express generator를 사용하면 쉽게 만들 수 있습니다. 다 만들었으니 실행해 볼까요! 서버를 실행하려면 터미널에서 node ./bin/www 명령어를 입력하면 됩니다. www 파일을 실행시키는 명령어입니다. www 파일 내부에는 포트번호 등 서버 설정에 대한 코드가 있습니다.

$ node ./bin/www

2) npm으로 실행

혹은 package.json 파일에 start 스크립트가 등록되어 있으므로 npm 명령어로 실행할 수 있습니다.

$ npm start

실행 결과

> myProject@1.0.0 start /Users/futurehandsup/Documents/myProject
> node app.js

5. 서버 접속

서버에 접속하려면 브라우저를 열어 http://localhost:3000에 접속하면 됩니다. 아래와 같이 Welcome to Express가 보이면 성공입니다.