[Node.js] Express Middleware의 Types

저번 포스팅에서 app.get , app.post , app.use ...와 같이 사용되어지는 미들웨어를 썼다. 이는 어플리케이션 단에서 동작하는 미들웨어이다. 다음과 같이 미들웨어는 몇 가지의 종류가 존재한다.

• Application Level Middelware
• Router Level Middleware
• Error Handling Middelware
• Built in Middelware
• Third party Middleware

# Application Level Middleware

2021/01/08 - [Programming/Node.js] - [Node.js] Middleware 생성

[Node.js] Middleware 생성

 

 

이전에 다뤘던 포스팅도 어플리케이션 레벨 미들웨어이다.

 

app.use()나 app.get, app.post, app.put 과 같이 HTTP 메서드를 사용하여 app의 인스턴스에 결합시킨다. 미들웨어를 어플리케이션 레벨에서 설정한 경로(URL)에 대해 작동하도록 한다.

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

app.get('/', function(request, response, next) {
	console.log('first middleware');
    next();
})
//first middleware

//미들웨어의 args로 Request객체, Response객체, next 값이 오는데,
//next는 다음 미들웨어 함수를 실행시킬 수 있다.
//next()가 실행되면 다음 미들웨어를 실행시킨다.

app.use(function(request, response, next) {
	console.log('secone middleware');
    next();
}, function(request, response, next) {
	console.log('third middleware');
    response.end("Hello World");
})
//second middleware
//third middleware

 

# Router Level Middleware

라우터 미들웨어는 express.Router() 인스턴스에 바인드되는 방식으로 동작한다. 조금 더 부가설명 하자면, express.Router() 인스턴스에 바인드된다는 점을 제외하면 어플리케이션 레벨 미들웨어와 동일하게 작동한다.

 

Router 객체를 이용해 router.use() 나 router.get() .post() .put() ...등 HTTP Method 함수를 사용하여 라우터 레벨 미들웨어를 로드할 수 있다. 또한 Router 객체는 그 자체로 미들웨어이다. app.use()나 router.route()의 arg로 사용될 수 있다.

 

const router = express.Router()

 

위처럼 Router 객체를 반드시 생성한 뒤에 app.use()같은 메서드를 이용해 마운트 시켜야 사용할 수 있다.

다음은 Express Doc에 명시된 라우터 레벨 미들웨어의 예시 코드이다.

var express = require('express')
var app = express()
var router = express.Router()

//미들웨어 함수에 경로를 지정하지 않았으므로, 모든 라우터 요청에 대해 동작한다. (현재 시간이 콘솔에 찍힌다)
router.use(function (req, res, next) {
  console.log('Time:', Date.now())
  next()
})

//'/user/10'이라는 URL로 GET/POST 등 요청이 오면
//Request URL : /user/10
//Request Type : GET(혹은 POST)
//와 같이 콘솔에 찍힌다.
router.use('/user/:id', function (req, res, next) {
  console.log('Request URL:', req.originalUrl)
  next()
}, function (req, res, next) {
  console.log('Request Type:', req.method)
  next()
})

//'/user/:id' URL에 대해 GET요청이 오면, :id의 값에 따라 분기가 나뉜다.
//0일 경우 : 밑의 router.get()으로 넘어간다(skip) ==> 'special'을 렌더링 한다.
//0이 아닐 경우 ==> regular를 렌더링 한다.
router.get('/user/:id', function (req, res, next) {
  // if the user ID is 0, skip to the next router
  if (req.params.id === '0') next('route')
  // otherwise pass control to the next middleware function in this stack
  else next()
}, function (req, res, next) {
  // render a regular page
  res.render('regular')
})

// handler for the /user/:id path, which renders a special page
router.get('/user/:id', function (req, res, next) {
  console.log(req.params.id)
  res.render('special')
})

// mount the router on the app
app.use('/', router)

라우터를 사용하는 이유는 특정 Root URL을 기점으로 기능이나 로직 별 라우팅을 나누어 관리할 수 있다는 장점이 있기 때문이다.

 

# Error Handling Middleware

에러 핸들링 미들웨어는 항상 4개의 인자를 갖는다.  에러 핸들링 미들웨어로서 확인시켜주기 위해 4개의 인자를 반드시 제공해야 한다. 비록 next가 필요 없더라도(사용되지 않더라도), 이 특색을 유지하기 위해 명시해주어야 한다. 그렇지 않으면 next 객체가 일반 미들웨어로 해석되어 에러 핸들링에 실패할 것이다.

 

app.use(function (err, req, res, next) {
  console.error(err.stack)
  res.status(500).send('Something broke!')
})

(1) err : 상위 미들웨어에서 next() 통해 넘긴 err를 받을 인자

(2) request

(3) response

(4) next 

 

에러 핸들링은 웹 어플리케이션을 개발하는 것에 있어 굉장히 중요하기 때문에 추후 더 자세한 내용으로 다루도록 한다.

 

# Built-in Middleware

Built-in Middleware는 말 그대로 내장된 미들웨어이다. Java의 lang.util.List 같은 느낌..?

 

Express 4.x 버전을 시작하며, Express는 더 이상 Connect에 의존하지 않는다. 이전 Express에 포함되었던 미들웨어 함수들은 이제 모듈들로 분리되었다. Express는 다음과 같은 미들웨어 함수들이 내장되어 있다.

 

• Express.static : HTML 파일, Images 같이 정적인 도움을 준다.
• Express.json : JSON을 담은 요청을 파싱할 수 있다.
• Express.urlencoded : URL인코딩을 해준다.

사용하기 위해 선언해야 할 것은 다음과 같다.

//public 디렉토리 안에서 static 파일을 찾겠다는 뜻
app.use(express.static('public'))

그럼 Static한 이미지 파일을 다루는 내장 미들웨어 함수를 사용해보자.

 

resources/images 디렉토리 안에 이미지파일을 하나 넣는다.

resources 디렉토리에서 정적 이미지 파일을 찾겠다고 에디터한테 말해줍니다.

app.use(express.static('resources'));

이 상태에서 /images/11.png를 입력해보면 다음과 같이 이미지 파일이 나온다.

어라 url을 호출했더니 이미지 파일을 출력해준다? 그럼 <img>의 src 속성에다가 /images/11.png 해줘도 나오겠네?

바로 실행에 옮긴다.

app.use(express.static('resources'));

app.get('/', (request, response) => {

  const fileList = request.list;
  console.log(fileList);  

  const title = 'Welcome';
  const description = `Hello Node.js!
                      
                      `;
  const list = template.list(fileList);
  const html = template.html(title, list, description,
    `<a href="/create">Create</a>
    <img src="/images/11.png"> //추가된 img태그
    `);

  response.send(html);
})

역시 잘 나옴을 확인했다. 이와 같이 정적인 파일을 서비스 하는 방법은 매우 간단하다.

# Third-party Middleware

써드 파티 미들웨어..? 남들이 만든 미들웨어이다. 우리의 입장에서는 모두가 남이 만든 미들웨어지만. 예로 body-parser나 compression, cookie-parser 등 수많은 서드파티 미들웨어가 존재하고, 우리는 그것들을 다양하게 활용함으로써 좀더 간편하고, 완성도가 높은 어플리케이션을 개발할 수 있는 것이다.

 

 

<참고>

opentutorials.org/course/3370/21399

opentutorials.org/course/3370/21423

adrian0220.tistory.com/215

psyhm.tistory.com/8

expressjs.com/en/guide/using-middleware.html