Express Basic Essentials - init,middleware

Summary

MEAN STACK 으로 개발을 하면서 그간 정리 하지 못한 내용 중에 하나인

Express 에 대해서 정리하고자 한다.

사실 요즘 가상돔을 제어하는 React 에 빠져서 MEAN STACK 을 온전히 쓰고 있다고

보긴 어려울것 같다. 경량 서비스를 제작 한다고 해도 webpack 과 함께 express

는 필수라는 생각이 들었다.

조만간 블로그에서 MEAN STACK 카테고리를 정리해야할 필요성을 느낀다.

뭐 아무튼..

정리에 앞서 간단한 개요를 정의 한다.

익스프레스는 Application, Request, Response 3개의 객체로 이루어져있다.

각 객체가 가진 레퍼런스가 궁금하다면 여기를 참고 하기 바란다.
express 를 전역으로 설치한뒤 express-generator 설치를 통해서

express -옵션 으로 간단하게 boilerplate 를 만들수 있다.
manifest 파일인 package.json 에 대해선 설명하지 않는다.

Basic App

var http    = require('http');
var express = require('express');
var app     = express();

http.createServer(app).listen(3000, function() {
        console.log('Express app started');
    });

app.get('/',function(req, res) {
        res.send('Hello!');
    });

가장 기본적인 형태의 Express 서버 앱이다.

Express 는 서버 파일 이기 때문에 변경이 발생되면 서버를 재시작 해야 하는

번거로움이 있다. 이를 해결하기 위해선 Supervisor 모듈을 사용하면 된다.

서버 파일이 변경되면 재시작을 자동으로 수행해준다.

위에 정의한 기본 형태에서 조금씩 살을 붙여 나갈것이다.

define view engine

app.set('view engine','jade'); 
app.set('views', './views');

Express 는 기본적으로 jade 라는 템플릿 엔진을 사용하고 있다.

jade는 들여쓰기 형식과 <> 생략으로 코드가 간결해 질수 있으나 협업엔 부적합 하기 때문에

ejs 를 사용하는것을 추천한다. 특히 JSP 를 했던 사람이라면 EJS 가 상당히 친숙할 것이다.

물론 html도 사용 가능하나 html 은 템플릿 엔진이 아니기 때문에 html 사용을 위해선

별도의 설정이 필요하다.

여기선 consolidate 와 swig 모듈이 필요하다.

var cons = require('consolidate');

// view engine setup
app.engine('html', cons.swig)
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');

define static folder

app.use(express.static('./public'));

정적인 파일 전송 및 호출을 위해 서버단에서 해당 폴더를 정적으로 설정해주는 것이 가능하다.

예를 들어 앞단에 view engine 을 정의했을때 view 가 가르치는 폴더를 views 라고 정의를 해줬다.

-public
 ㄴ image
-views
 ㄴ index.ejs

이러한 폴더 트리를 가지고 있다 라고 가정 하고 static 을 통해 public 을 정적 폴더로 지정해주면

index.ejs 에서 이미지를 호출할때 src='../public/image/1.jpg' 이런 방식에서

src='/image/1.jpg 이런방식으로 호출이 가능하게 된다.

정적 폴더를 설정 했기 때문이다. 정적 폴더는 public 뿐만 아니라 다중으로도 지정 가능하다.

A well-used Middleware

실제 상용 서비스를 만들면서 compress,vhost 외엔 전부 사용해 봤다.

그말인즉 모두 중요하니 한번씩은 써보는게 좋을듯 하다.

미들웨어명	설명
router	라우팅 시스템
logger	서버에 전달되는 요청 기록
compress	gzip/deflate 압축 포맷
basicAuth	기본 HTTP 인증
json	application/json 타입의 데이터를 파싱
urlencoded	application/x-www-form-urlencoded 타입의 데이터를 파싱
multipart	multipart/form-data 타입의 데이터를 파싱
bodyParser	요청 바디를 파싱 json, urlencoded, multipart/form-data 와함께 그룹핑
timeout	타임아웃 요청
cookieParser	쿠키파싱
session	세션지원
cookieSession	쿠키기반의 세션
methodOverride	HTTP함수(GET, POST, PUT) 지원
responseTime	서버 응답시간 표시
static	웹 사이트에서 사용되는 정적 assets 폴더를 설정
staticCache	정적 미들웨어를 위한 캐시
directory	폴더 목록화
vhost	vhost 활성화
favicon	웹사이트가 사용하는 파비콘
limit	요청 바디크기의 제한
query	GET 쿼리 파셔
errorHandler	서버에서 발생한 에러를 html 형태의 스택 트레이스 생성

logger

가장 필요한 logger에 대해서 소개 하고자 한다.

사용법은 간단하다

 app.use(express.logger(options));

options 는 객체 형태로 format 이란 키값을 통해 벨류값을 설정 할수 있다.

토큰	설명
:req[header]	요청의 특정헤더
:res[header]	응답의 특정헤더
:http-version	http version
:response-time	응답 생성에 걸리는 시간
:remote-addr	클라이언트 브라우저의 IP주소
:date	요청이 발생한 시간과 날짜
:method	요청을 만드는데 호출한 함수
:url	클라이언트가 요청한 URL
:referrer	이전에 사용한 url
:user-agent	유저 에이전트 서명
:status	HTTP상태 코드

실제 옵션의 적용은 이렇게 한다.

 app.use(express.logger({ format: ':method :url :referrer :status' }))

다음 포스팅엔 가장 중요한 라우트에 대해서 포스팅 한다.