[Node] express-generator로 빠르게 express 프로젝트 세팅하기

 

Express

express는 Node.js 진영의 웹을 개발하기 위한 프레임워크입니다. 2010년에 발표되어 현재까지도 주축으로 사용되는 아주 보편적이고 강력한 오픈소스인데요, 최근에는 express를 만든 팀이 만든 Koa 또한 증가하는 추세입니다.

Express-generator

express를 사용하기 위해서는 바닥부터 세팅을 해도 되지만 이런 세팅과 환경에 익숙해져있는 개발자라면 처음부터 굳이 세팅하지 않아도 되는 귀찮은 일로 전락하거나, 개발 시간을 뺏어먹는 일이 될 수도 있습니다. 그래서 이런 상황을 극복하기 위해 기본적인 골격을 가지고 있는 프로젝트를 구성하는 것도 하나의 방법인데요

여러가지 Boiler-Plate를 사용하거나 express에서 제공하는 generator를 사용하면 기본적인 골격을 갖춘 프로젝트를 생성할 수 있습니다.

 

설치부터 실행까지 한 번 살펴보겠습니다.

설치

npm install express-generator -g

npm을 통해 글로벌 속성으로 전역에 express-generator를 사용할 수 있게 설치해줍니다.

프로젝트 설치

express <생성할 프로젝트명 입력> --view=<템플릿 엔진명>

설치된 express 명령어를 통해 프로젝트를 생성합니다.

여기서 템플릿 엔진명이 생소하실텐데요, 두 가지의 종류가 있습니다.

• Jade: 새로운 템플릿명 전의 템플릿 확장자
• Pug: Jade에서 새롭게 개명한 템플릿 확장자

 

만약 템플릿 엔진명을 작성하지 않고 생성하면 구 버전인 Jade로 생성하기 때문에 선언 후 프로젝트를 생성하는 것이 좋습니다.

 

설치하면 아래와 같이 골격이 갖추어진 프로젝트가 완성되었을 것입니다.

이제 패키지들을 설치하여 프로젝트를 사용할 준비를 해줍니다.

npm i

설치가 끝났으면 시작해봐야겠죠 ?

 

실행

npm run start

 

실행까지 정상적으로 된 것을 확인할 수 있습니다.

프로젝트 구조

bin/www

#!/usr/bin/env node

/**
 * Module dependencies.
 */

var app = require('../app');
var debug = require('debug')('express-example: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);
}

www는 http에 서버를 생성하고 포트를 연결해주는 가장 핵심적인 역할을 해줍니다.

특이한 점은 확장자가 없다는 것인데요! 이는 #!/usr/bin/env node 라는 첫 줄의 주석이 범인입니다.

저 줄은 콘솔로 명령어를 통해서 제어할 수 있다는 것을 의미합니다.

 

public/*

디렉토리 명의 보듯 공통으로 사용하는 이미지, JS, CSS를 관리하는 디렉토리입니다.

 

routes/index, users.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;

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;

기본적으로 generator로 생성한 프로젝트는 두 개의 GET API를 제공하고 있습니다.

즉, 설치한다면 위 두가지의 경로로 접근하여 두 도메인의 response를 받아낼 수 있다는 것이죠

아까 처음 http://localhost:3000/로 접근 했을 때 index.js에 있는 response 값이 화면에 나타난 것입니다. 이번엔 users를 확인해볼까요?

 

 

response로 보낸 문자열이 출력되네요

 

이런 도메인을 설정하는 곳으로 가보겠습니다.

 

app.js

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', 'pug');

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;

이전에 해본 API 요청이 되게끔 어떻게 세팅했는지 살펴보면,

routes 디렉토리에 있는 js파일을 가져와서 express를 호출한 app 변수에 use를 통해 담아줍니다.

이는 express의 미들웨어를 연결해주는 역할을 해주게 됩니다. 그래서 해당 파일의 API를 정해준 URL로 접근했을 때 사용할 수 있게 됩니다.

 

app.js에서는 app를 모듈화 해서 내보내주게 되는데요, 아까 처음에 살펴봤던 www에서는 이 app을 임포트해서 포트를 연결하고, 서버를 생성해주는 역할을 합니다.

 

이렇게 구조화된 프로젝트를 생성해주니 빠르게 간단한 웹 API를 만들 때 사용하면 편리합니다.