Node.js Express 어플리케이션 생성기(express-generator) 사용하기

Express는 Node.js의 웹 어플리케이션 프레임워크입니다.

하얀 백지 위에 막상 웹 코딩을 시작하려면 어디서부터 시작해야 할지 참 막막하죠.

요럴 때 express-generator를 사용하면 웹 어플리케이션의 기본 구조를 빠르고 쉽게 만들 수 있습니다.

아래 순서는

https://expressjs.com/ko/starter/generator.html

이 사이트를 참고하여 작성하였습니다.

1. 다음 명령어로 express-generator를 설치합시다.

  '-g'는 global 설치 옵션이죠.

$ npm install express-generator -g

2. 어떤 명령어들이 있는지 볼까요.

$ express -h

  Usage: express [options] [dir]

  Options:

        --version        output the version number

    -e, --ejs            add ejs engine support

        --pug            add pug engine support

        --hbs            add handlebars engine support

    -H, --hogan          add hogan.js engine support

    -v, --view <engine>  add view <engine> support (dust|ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)

        --no-view        use static html instead of view engine

    -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

    -h, --help           output usage information

3. 자, 잘 설치된 것 같으니 'myapp'이라는 프로젝트를 생성해보겠습니다.

  여기서는 pug 템플릿 엔진을 사용하도록 생성하였습니다. 위 명령어들을 참고하여 입맛에 맞게 옵션을 설정하여 생성하시면 됩니다.

$ express --view=pug myapp

   create : myapp\

   create : myapp\public\

   create : myapp\public\javascripts\

   create : myapp\public\images\

   create : myapp\public\stylesheets\

   create : myapp\public\stylesheets\style.css

   create : myapp\routes\

   create : myapp\routes\index.js

   create : myapp\routes\users.js

   create : myapp\views\

   create : myapp\views\error.pug

   create : myapp\views\index.pug

   create : myapp\views\layout.pug

   create : myapp\app.js

   create : myapp\package.json

   create : myapp\bin\

   create : myapp\bin\www

   change directory:

     > cd myapp

   install dependencies:

     > npm install

   run the app:

     > SET DEBUG=myapp:* & npm start

4. 생성된 프로젝트로 들어가서 package.json의 종속 항목들을 설치합니다.

$ cd myapp

$ npm install

5. 앱을 실행하고 브라우저에서 'localhost:3000'을 입력하여 접속해볼까요.

$ npm start

6. 자동으로 생성된 디렉토리 구조는 아래와 같습니다. 이 구조는 사용자의 입맛에 맞게 수정하셔서 사용하시면 됩니다.

.

├── app.js

├── bin

│   └── www

├── package.json

├── public

│   ├── images

│   ├── javascripts

│   └── stylesheets

│       └── style.css

├── routes

│   ├── index.js

│   └── users.js

└── views

    ├── error.pug

    ├── index.pug

    └── layout.pug

7 directories, 9 files

7. 끝.