[Express] 미들웨어 사용

0. 참고자료

 

Express 미들웨어의 사용 - 생활코딩

Express 앱에서 사용하기 위한 미들웨어 작성

 

Express 미들웨어 사용

 

미들웨어 - 위키백과, 우리 모두의 백과사전

 

---

1. 미들웨어

 

express의 주요 기능은 두 가지다.

1. 라우트
2. 미들웨어

 

미들웨어(middleware)의 정의는 …

• 미들웨어(영어: middleware)는 컴퓨터 제작 회사가 사용자의 특정한 요구대로 만들어 제공하는 프로그램으로, 운영 체제와 응용 소프트웨어의 중간에서 조정과 중개의 역할을 수행하는 소프트웨어이다. 응용 소프트웨어가 운영 체제로부터 제공받는 서비스 이외에 추가적으로 이용할 수 있는 서비스를 제공하는 컴퓨터 소프트웨어이다. "소프트웨어 글루"(software glue)로 이야기된다.[1] 응용 소프트웨어는 유연하고 확장, 축소가 편리하여야 하며 이러한 장점을 충족하기에 개발자의 다른 기종 간 플랫폼을 다시 구축할 필요가 없어야 한다. 이를테면 데이터베이스 시스템, 전자 통신 소프트웨어, 메시지 및 쿼리 처리 소프트웨어를 들 수 있다.
• 미들웨어는 양 쪽을 연결하여 데이터를 주고 받을 수 있도록 중간에서 매개 역할을 하는 소프트웨어, 네트워크를 통해서 연결된 여러 개의 컴퓨터에 있는 많은 프로세스들에게 어떤 서비스를 사용할 수 있도록 연결해 주는 소프트웨어를 말한다. 3계층 클라이언트/서버 구조에서 미들웨어가 존재한다. 웹 브라우저에서 데이터베이스로부터 데이터를 저장하거나 읽어올 수 있게 중간에 미들웨어가 존재하게 된다.

 

공식 홈페이지의 설명으로는 …

 

최종 요청 핸들러 이전의 Express 라우팅 계층에 의해 호출되는 함수이며, 따라서 원시 요청과 의도된 최종 라우트 사이의 미들웨어에 위치합니다.

 

express에서 미들웨어는 양 쪽을 연결하여 데이터를 주고 받을 수 있도록 중간에서 매개 역할을 하는 소프트웨어 정도로 생각하면 될 것 같다.

 

애플리케이션이 구동될 때 순서대로 등록된 작은 프로그램들이 실행하는데, 각 프로그램이 서로와 서로를 연결해 주는 작은 소프트웨어라는 점에서 미들웨어라는 표현을 사용하는 것 같다.

 

💡 애플리케이션(application)

: 일반적으로, 특정한 목적의 연산을 수행하도록 설계된 하나 이상의 프로그램입니다. Express의 컨텍스트에서는, Node.js 플랫폼에서 실행되며 Express API를 사용하는 프로그램을 말합니다. 또한 앱 오브젝트를 지칭할 수도 있습니다.

 

---

2. 미들웨어 사용

 

Express 미들웨어 사용

 

Express 미들웨어

 

가. express 미들웨어

 

목록에 적힌 Express 미들웨어 모듈들은 Expressjs 팀이 유지보수합니다.

미들웨어 모듈	설명	내장 함수 (express 3)
body-parser	HTTP 요청 body를 파싱합니다. body, co-body, 그리고 raw-body도 참고하세요.	express.bodyParser
compression	HTTP 요청들을 압축합니다.	express.compress
connect-rid	고유한 요청 ID를 생성합니다.	없음
cookie-parser	쿠키 헤더를 파싱하고 req.cookies에 할당합니다. cookies와 keygrip도 참고하세요.	express.cookieParser
cookie-session	쿠키 기반의 세션을 만듭니다.	express.cookieSession
cors	다양한 옵션들을 이용하여 Cross-origin resource sharing (CORS)를 활성화합니다.	없음
errorhandler	개발 중에 발생하는 에러를 핸들링하고 디버깅합니다.	express.errorHandler
method-override	헤더를 이용해 HTTP method를 덮어씁니다.	express.methodOverride
morgan	HTTP 요청 로그를 남깁니다.	express.logger
multer	multi-part 폼 데이터를 처리합니다.	express.bodyParser
response-time	응답 시간을 기록합니다.	express.responseTime
serve-favicon	파비콘을 제공합니다.	express.favicon
serve-index	주어진 경로의 디렉토리 리스트를 제공합니다.	express.directory
serve-static	정적 파일을 제공합니다.	express.static
session	서버 기반의 세션을 만듭니다 (개발 전용).	express.session
timeout	HTTP 요청 처리를 위해 timeout을 만듭니다.	express.timeout
vhost	가상 도메인을 만듭니다.	express.vhost

 

나. 유명한 외부 미들웨어 모듈

 

몇몇 유명한 외부 미들웨어 모듈들입니다.

미들웨어 모듈설명 

미들웨어 모듈	설명
connect-image-optimus	이미지 제공을 최적화힙니다. 할 수 있다면 이미지를 .webp나 .jxr로 바꿉니다.
express-debug	템플릿 변수 (지역), 현재 세션, 기타 등등에 대한 정보를 제공하는 개발 도구입니다.
express-partial-response	JSON 응답을 URL의 fields를 받아서 필터링합니다. Google API의 Partial Response를 활용합니다.
express-simple-cdn	정적 요소들을 위해 CDN을 사용하도록 도와줍니다. 다양한 호스트를 지원합니다.
express-slash	구현된 루터에 맟춰서 슬래쉬 유무를 맞춰줍니다.
express-stormpath	사용자 저장소, 인증 확인, 인증, SSO, 그리고 데이터 보안에 관련된 모듈입니다. (Okta로 합쳐졌습니다)
express-uncapitalize	대문자를 포함하는 HTTP 요청들을 표준 소문자 폼으로 리다이렉트시킵니다. containing uppercase to a canonical lowercase form.
helmet	다양한 HTTP 헤더를 설정해 앱이 안전하게 도와줍니다.
join-io	요청 횟수를 줄이기 위해 파일들을 묶어줍니다.
passport	OAuth, OpenID 같은 방법들을 사용하는 인증 체계입니다. 자세한 정보는 http://passportjs.org/에서 확인하세요.
static-expiry	정적 에셋을 위해 헤더를 캐싱하거나 URL을 고유화합니다.
view-helpers	뷰 엔진들을 위한 일반적인 도움을 제공합니다.
sriracha-admin	동적으로 Mongoose의 관리 사이트를 만듭니다.

 

서드파티 미들웨어의 경우 사용할 때 조심해야 한다.

 

helmet과 passport의 경우 사용해볼 예정이다.

 

---

3. body-parser 사용하기

Node.js body parsing middleware.

Parse incoming request bodies in a middleware before your handlers, available under the req.body property.

 

입력 데이터를 쉽게 파싱하기 위해서 사용한다.

 

기존의 post에서 복잡하게 처리하는 부분을 대체할 수 있다.

exports.create_process = function (request, response) {
    let body = "";
    request.on("data", function (data) {
      body += data;
    });
    request.on("end", function () {
      let post = qs.parse(body);
      let title = post.title;
      let description = post.description;
      let sanitizedTitle = sanitizeHtml(title);
      let sanitizedDesc = sanitizeHtml(description);
      db.query(
        `INSERT INTO topic (title, description, created, author_id) 
        VALUES (?, ?, NOW(), ?)`,
        [sanitizedTitle, sanitizedDesc, post.author],
        function (error, result) {
          if (error) {
            throw error;
          }
          response.redirect(`/page/${result.insertId}`);
        }
      );
    });
}

 

가. 설치

 

Express body-parser middleware

npm install body-parser --save

 

나. 예시

var express = require('express')
var bodyParser = require('body-parser')

var app = express()

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))

// parse application/json
app.use(bodyParser.json())

app.use(function (req, res) {
  res.setHeader('Content-Type', 'text/plain')
  res.write('you posted:\n')
  res.end(JSON.stringify(req.body, null, 2))
})

• var bodyParser = require('body-parser') : 추가
• app.use(bodyParser.urlencoded({ extended: false }))
  : URL-encoded parser.
  : express의 use 메서드에 body-parser라는 미들웨어를 전달한다.
• app.use(bodyParser.json()) : 만약 파일의 형식이 JSON이라면
• req.body : body-parser가 만들어준 데이터가 들어있음.

 

다. 사용

 

app.use(bodyParser.urlencoded({ extended: false }))만 사용한다.

middleware : add body parser · ramen4598/Study_nodeJS@f144580

 

---

4. compression 사용

 

용량이 많은 파일을 보낼 때 압축하면 좋다.

 

압축하고 해제하는 시간 비용이 발생하지만 일반적으로 큰 데이터를 전송하면서 발생하는 네트워크 비용보다는 적다.

 

그래서 압축 방식을 많이 사용한다.

 

가. 설치

 

Express compression middleware

npm install compression --save

 

나. 예시

var compression = require('compression')
var express = require('express')

var app = express()

// compress all responses
app.use(compression())

// add all routes

 

다. 사용

 

middleware : add compression · ramen4598/Study_nodeJS@6459705

 

before	after

 

6 이라는 이름의 파일이 59.6kB에서 4.4kB로 줄어든 것을 확인할 수 있다.

 

 

자세히 살펴보면 gzip 방식으로 압축된 것을 확인할 수 있다.

 

참고로 캐쉬를 지우고 새로 고침 하려면 ctrl[command] + Shift + R을 하면 된다.

 

---