2. Express 기본 모듈/코드 분석

모듈 분석

이번 포스팅은 저번 포스팅에 express 명령어로 파일들을 만들었을 때, 자동으로 포함되는 모듈들에 대해 알아볼 것입니다.

express --ejs --css sass

위의 커맨드를 쳐서 만들어진 폴더입니다.

웹 템플릿으로 ejs 모듈을 사용하고, css 모듈로 sass를 사용합니다.

그럼 본격적으로 package.json 파일 분석과 기본 코드를 확인해보겠습니다.

Package.json

설치된 파일에서 package.json을 열면 다음과 같은 내용이 들어있습니다.

위에서부터 이름, 버젼, 배포 여부를 알려주는 name, version, private의 값이 있습니다.

npm scripts로는 start를 하면 bin 폴더에 있는 www.js를 실행하도록 스크립트가 짜여 있습니다.

아래의 설치 모듈들이 더 중요하겠죠?

Dependencies에 있는 모듈들에 대해 알아봅시다.(이름을 클릭하면 공식 페이지로 이동합니다.)

• body-parser : 파일들의 형식에 따라 내부 내용을 읽어서 사용할 수 있게 해주는 모듈입니다.
                  JSON, Raw, Text, URLencoded 형식의 내용들을 파싱해줍니다.
  
  
• Cookie-parser : 웹이나 네트워크에 대해 배우면 쿠키라는 개념이 나옵니다.
                   클라이언트가 서버와 통신하는 정보들에 대해 저장하는데, 그 내용을 파싱해서 사용할수 있게 해줍니다.
  
  
• debug : 말 그대로 디버그를 위한 모듈입니다.
  
  
• ejs : 웹페이지 템플릿 모듈입니다. 따로 포스팅 하나를 할애해서 설명할 예정입니다. (jade도 함께 설명합니다.)
  
  
• express : express입니다.
  
  
• morgan : express 서버가 클라이언트들과 주고받는 내용들을 log로 남깁니다.
  
  
• node-sass-middleware : sass 파일을 css로 컴파일하여 매핑해주는 모듈입니다. 
  
  
• server-favicon : favicon을 설정해줍니다. 파비콘은 웹페이지를 실행하면 위에 타이틀 옆에 뜨는 글자입니다. 
                     제 블로그 favicon 이 그림입니다.

이런 모듈들이 사용됩니다.

다음은 scripts start에 있는 ./bin/www.js 파일을 확인해봅시다.

./bin/www

bin 폴더에 들어가보면 www 파일이 있습니다. 내용은 다음과 같습니다.

app은 위 폴더에 있는 app.js 파일을 가져옵니다. app.js 파일에는 각종 express 설정들이 들어갑니다.

debug는 역시 debug를 위하여 선언해줍니다.

http는 http 서버를 열기 위해서 필요합니다. 

port는 환경변수에 PORT 이름으로 저장되어 있는 포트로 열고, 없다면 3000번으로 열게 됩니다.

express 정보와 위의 포트 정보가 담겨있는 app 변수를 이용하여 http 서버를 생성합니다.

server를 실행합니다.

그 외의 나머지 함수들은 에러 핸들링, 포트 설정 등을 위한 함수인데 건들지 않아도 무방하므로 생략하겠습니다.

./app.js

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
 
var routes = require('./routes/index');
var users = require('./routes/users');
 
var app = express();
 
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
 
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(require('node-sass-middleware')({
  src: path.join(__dirname, 'public'),
  dest: path.join(__dirname, 'public'),
  indentedSyntax: true,
  sourceMap: true
}));
app.use(express.static(path.join(__dirname, 'public')));
 
app.use('/', routes);
app.use('/users', users);
 
// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});
 
// error handlers
 
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
  app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
      message: err.message,
      error: err
    });
  });
}
 
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
  res.status(err.status || 500);
  res.render('error', {
    message: err.message,
    error: {}
  });
});
 
 
module.exports = app;
 

위의 1~6번 줄은 모듈을 사용하기 위한 객체를 선언합니다.

8~9번은 라우터를 설정하는데, 이는 다음 포스팅에서 집중적으로 다루겠습니다.

14번 15번은 Express의 설정 변경을 위한 코드입니다.

14번은 웹 페이지에 보여줄 views를 ./views 폴더로 설정하겠다는 것이며,

15번은 그 views에 있는 파일들은 ejs 템플릿으로 작성될 것이라는 뜻입니다.

19~28번은 위에 설명된 모듈들을 구체적으로 사용하는 코드입니다.

각각의 공식 사이트에 들어가면 설정하는 방식들을 알 수 있습니다. 

나중에 따로 포스팅 할 수도 있겠지만, 여기서는 너무 방대하므로 지나가도록 하겠습니다..

31번 32번은 라우터와 주소를 매핑시킵니다. 이 또한 라우터 포스팅에서 집중적으로 다루겠습니다.

그 아래 부분들은 에러 핸들링을 위한 부분입니다.

뭔가 제대로 알려줄 수가 없는 기분입니다......... 다음 포스팅부턴 직접 실행해보면서 같이 진행하도록 하겠습니다.