Node.js :: express-generator 로 개발환경 세팅

---

1. express-generator란?

이제는 거의 정형화 되어 있는 프로젝트의 구성을 자동으로 생성해주고, 이 구성을 잡아줄 때 필요한 패키지를 package.json을 통해 제공하기 때문에 빠르게 노드 프로젝트 구성을 할 수 있습니다.

---

2. express-generator 전역에 설치하기

window라면 powershell을, linux 환경이면 터미널을 열어주세요.

$ npm i -g express-generator

expree-generator 패키지를 전역에 설치합니다.

전역에 설치하는 이유는 보통 단일 프로젝트에만 쓰는 게 아니라 각종 프로젝트를 만들 때 사용하기 때문입니다.

---

3. express로 프로젝트 생성하기

$ cd C:\expert\node-express-generator

우선 프로젝트가 생성되어야 하는 경로로 이동하세요.

$ express ex-gen --no-view --git

express [name] [option]

express로 프로젝트를 생성합니다. 위 명령어는 제가 만들 때 직접 실행한 명령어입니다.

express로 ex-gen 이라는 이름의 프로젝트를 만들었고, 템플릿엔진은 사용하지 않았으며, 프로젝트에 맞게 .gitignore을 자동생성했습니다.

• [option]에 아래 옵션들을 통해 다양하게 환경을 구성할 수 있습니다.

  • -version
    현재 express-gennerator 버전을 확인

  • -e 또는 --ejs
    템플릿엔진을 ejs로 설정

  • --pug
    템플릿엔진을 pug로 설정

  • --hbs
    템플릿엔진을 hbs(handlebar)로 설정

  • -H 또는 --hogan
    템플릿엔진을 hogan으로 설정

  • -V <engine> 또는 --view <engine>
    템플릿엔진을 <engine>에 입력한 엔진으로 설정

  • --no-view : 템플릿엔진 사용 안함
    이 옵션을 주면 views 디렉터리도 생성이 안 됩니다.

  • -C <engine> 또는 --css <engine>
    스타일 엔진을 설정 (css, scss, sass, less 등), 기본은 css

  • --git
    .gitignore 파일을 추가로 생성합니다.

  • -f 또는 --force
    비어있지 않은 디렉토리를 강제로 사용합니다.

  • -h 또는 --help
    express의 옵션들에 대한 설명

잘 모르겠다면 express [name] -h 를 입력하시면 아래와 같이 화면으로 도움말을 볼 수 있습니다.

---

4. express 구조 분석

이제 프로젝트를 생성했으니 만들어진 구조를 보고 분석을 해 볼게요.

루트 내에 디렉터리는 bin, public, routes 가 생성이 되었고, 파일은 .gitignore, app.js, package.json 이 생성이 되었어요.

파일을 먼저 살펴볼게요.

• .gitignore
  express로 프로젝트 생성 시 --git 옵션을 주었기 때문에 자동으로 .gitignore이 생성되었어요. 아마 --git 옵션을 주지 않았으면 생성되지 않았을 거예요!

• package.json
  프로젝트의 이름, 버전, 그리고 프로젝트를 구동하기 위한 의존 패키지들이 포함되어 있어요. 자동으로 npm install 이 된 것은 아니기에 express 프로젝트 생성 후 npm install 을 반드시 해야 합니다! (아래 5번 순서에 내용이 포함되어 있어요~)

• app.js
  제일 중요해요! 소스를 한 번 열어서 볼게요.

var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

module.exports = app;

• express() 로 app 객체를 만들고 각 미들웨어를 연결했어요. 그리고 라우팅도 연결했네요.

  • bin/www
    서버를 실행하는 스크립트입니다. 아마 거의 수정할 일은 없을 거예요. (인증서 관련 이슈가 생길 경우?)

  • public
    리소스를 보관하는 곳입니다. 예를 들어 iamge, javascript, stylesheet 파일들을 저장합니다.

  • routes
    라우터를 관리하는 곳입니다. index.js가 루트가 되어 라우팅 관리를 하면 됩니다.
    프로젝트 생성 시 --no-view 옵션으로 인해 생성되지는 않았지만, 템플릿 엔진을 사용하시는 분들은 views 폴더도 같이 생길 거예요.

  • views
    템플릿 엔진을 활용해 화면에 보여질 코드를 작성하는 부분입니다.

    
    

그 외에 자신이 필요한 모듈이 있다면 (예를 들면 db) 디렉터리를 추가해 보관하는 것이 좋습니다.

---

5. npm install

4번에서 구조 분석 시 package.json이 생성된 것을 보았습니다.

express가 의존 패키지를 package.json에 자동으로 저장해주지만, 자동으로 설치해 주지는 않습니다.

npm install로 의존 패키지를 설치합니다.

$ npm install

---

6. 프로젝트 실행

기본 실행법부터 보여드리고 pm2를 통해서도 실행시킬 수 있다는 걸 보여드릴게요. (저는 pm2를 사용해요!)

기본 실행법

{
  "name": "ex-gen",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "morgan": "~1.9.1"
  }
}

package.json 파일을 보면 start 부분에 node ./bin/www 를 확인할 수 있어요.

만약 명령어 npm start 로 프로젝트를 실행시키면 bin/www 스크립트를 실행시킬 수 있게 해줘요.

그럼 이제 원리를 알았으니 실행시켜볼게요.

$ npm start

bin/www 에서 별도로 포트를 변경하지 않았다면 포트는 3000번일 거예요.

이제 브라우저를 열고 http://localhost:3000 을 입력하세요.

이 화면을 만났다면 프로젝트 실행 성공입니다.

pm2로 실행시키는 방법

$ pm2 start bin/www --name "ex-gen" --watch

bin/www 를 ex-gen 이라는 서비스 이름을 주어 실행시킨다는 뜻입니다.

자세한 pm2 사용법은 아래 글을 참고해 주세요.

Node.js :: PM2 기본 간단 정리

---

참고자료

1. express-generator

---