22.[Node.js] Express Generator

1. Express-generator란?

  Express를 통해 우리는 편리하게 서버를 구축할 수 있었다. 지금까지 배운 Express를 이용해 배운 지식을 활용해 서버를 구축하게 된다면 다음과 같은 순서를 따르게 될 것이다.

- Express 서버 구축 순서

1) express 패키지 설치

npm install express --save

2) express 객체 선언

const express = require('express');

3) 서버 요청 만들기

app.get('/', (req, res) => res.send('Hello World!'))

4) 라우팅 선언

var router = express.Router();

5) 미들웨어 선언

app.use((req, res, next) => {
  console.log('Hello World!')
  next()
});

6) 오류 미들웨어 선언

app.get('/:id', (req, res, next) => {
    let id = req.params.id
    if(id == 1){
        next('error 발생')
    }else{
        res.send('hello world')
    }
})
 
app.use((req, res, next) => {
    console.log('404')
    res.status(404).send('<h1>Not Found Page</h1>')
})

  다음과 같은 순서를 가지게 된다.

  이 처럼 Express를 통해서 우린 많은 코드를 줄일 수 있게 되었으나, 이 과정 역시 상당히 반복적인 과정이다. 우리는 위와 같이 공통적으로 사용되는 Express 객체들을 Express-generator를 통해 또 다시 줄일 수 있다. 이를 사용한다면 개발하려는 웹 서버의 방식에 맞게 알맞은 방식으로 서버를 만들어 낼 수 있다. 

2. Express-generator를 통한 Express 객체 만들기

  Express-generator는 쉽게 표현하자면 Express 애플리케이션 생성기 이다. 이를 활욯해 Express 객체를 만드는 과정은 다음과 같다.

1) Express-generator 설치

  Express-generator는 npm 패키지에서 제공된다. 아래의 npm 명령어를 통해 설치 한다.

$ npm install express-generator -g

  이 명령어를 입력하게 되면 설치가 완료된다. Express에서 사용하는 다양한 명령어 옵션을 보고 싶다면 아래의 명령어를 입력해 살펴볼 수 있다.

$ express -h

2) Express 프로젝트 생성

  이제 설치가 완료 되었으니 실제로 Express 객체를 만들어보자. 위에 나온 것 처럼 express 명령어 뒤에 디렉토리 명을 입력해서 만들 수 있다.

$ express [dir]

  gene_project_1 이라는 프로젝트를 만들면 아래와 같이 프로젝트가 생성 되었음을 알려준다.

 

  위에 명시된 디렉터리에 Express 객체에 필요한 요소들이 설치가 된 것이다. 아래의 목록이 초기에 만들어진 Express 프로젝트의 디렉토리이다. 

3) Exrpess 종속 항목 설치

  Express에 담을 종속 항목을 설치하기 위해 우선 디렉토리 안으로 들어간다.

$ cd gene_project_1

  그 다음 npm 패키지를 설치한다.

$ npm install

  이후 다음의 코드로 앱을 실행 시킨다.

$ set DEBUG=myapp:* & npm start

  이제 프로젝트 생성과 모듈 설치가 완료되었다. 프로젝트의 정보를 확인하기 위해서 package.json 파일을 살펴보자.

{
  "name": "gene-project-1",
  "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",
    "http-errors": "~1.6.3",
    "jade": "~1.11.0",
    "morgan": "~1.9.1"
  }
}
 

3. Express 구조 확인

  맨처음에 설명한 구조에 비해 훨씬 단순한 작업으로 웹 서버 구축을 마무리지었다. 기존의 Express에서는 객체를 선언한 이후 모든 요소들을 우리가 직접 만들었다. 요청 객체와 그에 따른 미들웨어 모두 우리가 직접 선언을 했다. 하지만, Express-generator를 이용한다면 이런 불편한 과정이 크게 줄어들고 더운 단순한 과정으로 웹 서버 구축을 완료 할 수 있다.

  하지만, 현재 만들어진 객체는 보편적인 구조의 객체이다. 우린 우리의 요구사항에 맞게 객체를 수정해야 한다. 현재 만들어진 기본 구조를 이해하고, 우리가 원하는 방향으로 객체를 수정할 수 있어야 한다. 이를 위해서 Express 객체에 필요한 요소들에 대해 살펴보자.

1) bin 디렉터리

  bin 디렉터리는 실제로 객체에 대한 활동을 제어하는 가장 중요한 부분이다. http 모듈을 통해 서버를 등록하고, 문제에 대해 직접 처리하는 역할을 수행한다. 서버가 제대로 등록되었는지 오류 발생시 어떻게 처리 할 것인지를 명시해준다.

#!/usr/bin/env node
 
/**
 * Module dependencies.
 */
 
var app = require('../app');
var debug = require('debug')('gene-project-1:server');
var http = require('http');
 
/**
 * Get port from environment and store in Express.
 */
 
var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);
 
/**
 * Create HTTP server.
 */
 
var server = http.createServer(app);
 
/**
 * Listen on provided port, on all network interfaces.
 */
 
server.listen(port);
server.on('error', onError);
server.on('listening', onListening);
 
/**
 * Normalize a port into a number, string, or false.
 */
 
function normalizePort(val) {
  var port = parseInt(val, 10);
 
  if (isNaN(port)) {
    // named pipe
    return val;
  }
 
  if (port >= 0) {
    // port number
    return port;
  }
 
  return false;
}
 
/**
 * Event listener for HTTP server "error" event.
 */
 
function onError(error) {
  if (error.syscall !== 'listen') {
    throw error;
  }
 
  var bind = typeof port === 'string'
    ? 'Pipe ' + port
    : 'Port ' + port;
 
  // handle specific listen errors with friendly messages
  switch (error.code) {
    case 'EACCES':
      console.error(bind + ' requires elevated privileges');
      process.exit(1);
      break;
    case 'EADDRINUSE':
      console.error(bind + ' is already in use');
      process.exit(1);
      break;
    default:
      throw error;
  }
}
 
/**
 * Event listener for HTTP server "listening" event.
 */
 
function onListening() {
  var addr = server.address();
  var bind = typeof addr === 'string'
    ? 'pipe ' + addr
    : 'port ' + addr.port;
  debug('Listening on ' + bind);
}
 

•   7~9 라인 : 서버에 필요한 객체 (http, 미들웨어)
•   15번 라인 : 서버 port 설정
•   22번 라인 : http 인스턴스 선언
•   28~30 라인 : 서버 실행
•   36~50 라인 : normalizePort 함수 ( 포트 번호 검사 )
•   56~78 라인 : 에러 핸들링 함수
•   84~90 라인 : 서버 리스닝 종료 후 핸들링 함수

 

2) app.js 디렉터리

   app.js에서는 우리가 서버에서 사용하게 될 미들웨어를 정의하게 된다. 앞어 bin 디렉터리에 있었던 var app = require('../app'); 코드와 연결된다.

var createError = require('http-errors');
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();
 
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
 
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);
 
// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});
 
// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};
 
  // render the error page
  res.status(err.status || 500);
  res.render('error');
});
 
module.exports = app;
 

•   1~5 라인 : express 객체 선언 부, 우리가 사용할 미들웨어를 비롯해 Express 제공 미들웨어 객체 선언
•   7~8 라인 : 라우터 선언
•   10 라인 : 미들웨어 등록을 위해 app 객체에 express 객체 등록
•   13~14 라인 : app.set 메서드를 통해 express 앱 설정
•   16~39 라인 : 미들웨어를 실제로 등록한 부분
•   26~39 라인 : 에러 핸들러 등록
•   47 라인 : app 객체를 사용할 수 있도록 모듈에 등록 (export)

3) routes 디렉터리

<index.js>

var express = require('express');
var router = express.Router();
 
/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});
 
module.exports = router;

app.js 에 등록된 var indexRouter = require('./routes/index'); 에 해당되는 부분 이후에 등록 될 라우터를 만들면된다.

<user.js>

var express = require('express');
var router = express.Router();
 
/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});
 
module.exports = router;

app.js 에 등록된 var usersRouter = require('./routes/users'); 에 해당되는 부분

  express의 라우터는 기본적으로 get 요청으로 만들어진다. 필요에 따라 새로 수정하여 라우터를 구현한다.