express(1)

2020-07-14

express
TIL

express.js

express는 자신이 갖고 있는 기능을 크게 두 가지로 분류한다.

routing
middleware

미들웨어란, 쉽게 말하자면 다른 사람(혹은 자신)이 만든,
전체 소프트웨어를 이루고 있는 부품이라고 볼 수 있다.

그 중에서도 Third-party middleware는 express가 만든 게 아닌,
다른 사람들이 만든 미들웨어.
body-parser, cookie-session cookie-parser 등 많은 미들웨어들이 존재.

body-parser

body는 웹브라우저에서 요청한 정보의 본체를 의미한다.
(그 본체를 설명하는 데이터는 header)
그 본체 데이터를 분석해서 우리가 필요한 형태로
가공해주는 프로그램이 바로 body-parser.

post 방식의 데이터는 get 방식의 데이터와는 다르게,
데이터의 크기가 큰 경우가 종종 있다.

때문에, 원래는 body 변수를 따로 만들어서, 데이터가 도착할 때마다
request.on(‘data’)를 활용해서 body 변수에다가 데이터를 계속 더해주다가
데이터가 더 이상 도착하지 않으면 request.on(‘end’)로 끝내주는 형식이었다.

하지만 body-parser를 사용하면 그럴 필요 없이, 자동으로 body를 분석해준다.
npm install body-parser --save

const express = require('express');
const bodyParser = require('body-parser');

const app = express();

// 폼 데이터의 경우
app.use(bodyParser, urlencoded({ extended : false });
// json 데이터의 경우
app.use(bodyParser, json());

이렇게 app.use로 bodyParser를 호출해주면
그 코드가 실행된 결과로 미들웨어가 들어오게 된다.
해당 node.js 파일이 실행될 때마다 저 코드에 의해
해당 미들웨어가 실행되는 것이다.

사용자가 전송한 post 데이터를 내부적으로 분석해서 body 부분을 인식
-> request.body라는 키워드로 body에 접근할 수 있게 됨.
(원래는 request의 parameter에는 body라는 property가 없지만,
body-parser가 그걸 만들어줘서, 쉽게 접근할 수 있게 된다.)

// body-parser를 사용하기 전
var body = '';
request.on('data', function(data){
    body = body + data;
});
request.on('end', function(){
    var post = qs.parse(body);
    var title = post.title;
    var description = post.description;
    fs.writeFile(`data/${title}`, description, 'utf8', function(err){
        response.writeHead(302, {Location: `/?id=${title}`});
        response.end();
    });
});

// body-parser를 사용하고난 후
var post = request.body;
var title = post.title;
var description = post.description;
fs.writeFile(`data/${title}`, description, 'utf8', function(err) {
    response.writeHead(302, {Location: `/?id=${title}`});
    response.end();
});

우리가 명시적으로 body 변수를 만들어서 해당 부분의 데이터를
request.on으로 받을 필요가 없고, 그로 인해 코드가 제법 깔끔해진다.

compression

compression 또한 middleware.
웹사이트에 데이터가 오고갈 때, 그 데이터의 크기가 너무 크면
시간도 오래걸리고 소모되는 자원의 양도 엄청나다.
이는 압축을 통해서 해결할 수 있다.

웹서버가 웹 브라우저에게 응답할 때 데이터를 압축시켜서 보내주면 되는 것.
“얘는 ~방식으로 압축했으니까, 데이터 받고 나서 ~방식으로 압축 해제하면 돼!”
라고 함께 첨부해주면, 그 데이터를 정확하게 받아볼 수 있게 됨.

그러면 데이터를 전송할 때만 압축이 되어 전송되므로
오고가는 데이터의 크기가 획기적으로 줄어들게 된다.
npm install compression

const express = require('express');
const compression = require('compression');

const app = express();
app.use(compression());

이렇게만 해주면 된다.

compression()이라는 함수를 통해 compression middleware가 반환되고
그렇게 반환된 middleware가 app.use를 통해서 장착된다.
그러면 우리 application은 요청이 들어올 때마다 매번 위에서 장착했던
body-parser와 compression이라는 middleware를 실행시키게 된다.

Tip) ctrl + shift + R을 누르면 캐시가 사라지는 강제 리로드.
(Mac의 경우는 cmd + shift + R)
캐시를 삭제하고 다시 데이터를 받아보면, 압축으로 인해
용량이 엄청나게 줄어든 것을 확인할 수 있다.

 Bootstrap express(2) 