[생활코딩|Express #7~9] Express 미들웨어의 사용 / 미들웨어 만들기 / 미들웨어의 실행순서

---

본 게시글은 유튜브 생활코딩 온라인강의를 시청한 후 학습한 정보를 기록하는 목적의 게시글입니다.

생각의 흐름에 따라 작성된 게시글입니다. 가독성이 떨어질 수 있습니다.

생활코딩 유튜브

생활코딩

생활코딩 사이트

생활코딩

"프레임워크는 현실의 복잡함으로 부터 우리를 구원해 줄

우리의 구원자가 될 것입니다."

(생활코딩 : Web3 - express 수업소개. 중)

---

#0.

미들웨어의 개념을 알아보고 타인이 만든 미들웨어를 사용해보자.

 

#1.

express의 두가지 중요한 기능 : route와 middlewaremiddleware? 타인이 만든 (혹은 자신이 만든) 소프트웨어 부품을 이용하여 우리의 소프트웨어를 구현하자.Third-party middleware : 타인이 만든 미들웨어, non-offical오늘 사용 해볼 미들웨어인 Body-parser

Express body-parser middleware

npm install body-parser --save // body-parser 설치

var bodyParser = require('body-parser'); // body-parser 로드, 상단에 추가

//body-parser 사용, body-parser 미들웨어가 만들어내는 표현식
app.use(bodyParser.urlencoded({ extended: false })) 

사용자가 전송한 post 데이터를 내부적으로 분석해서, callback을 호출하도록 약속되어 있다.

기존의 코드와 비교해보며 사용법을 익혀보자.

// 기존코드
app.post('/create_process', (request, response) =>{
  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.redirect( `/page/${title}` );
    })
  })
})

//body-parser 미들웨어 사용
app.post('/create_process', (request, response) =>{
  var post = request.body;
  var title = post.title;
  var description = post.description;
  fs.writeFile(`data/${title}`, description, 'utf8', function(err){
    response.redirect( `/page/${title}` );
  })
})

request 객체의 body 속성에 접근하도록 구조를 변경함으로써 간결하게 코드를 바꿀 수 있게 되었다.

마찬가지로 update_process와 delete_process도 변경해주자.

app.post('/update_process', (request, response) =>{
  var post = request.body;
  var id = post.id;
  var title = post.title;
  var description = post.description;
  fs.rename(`data/${id}`, `data/${title}`, function(error){
    fs.writeFile(`data/${title}`, description, 'utf8', function(err){
      response.redirect(`/page/${title}`);
    })
  });
})

app.post('/delete_process', (request, response) => {
  var post = request.body;
  var id = post.id;
  var filteredId = path.parse(id).base;
  fs.unlink(`data/${filteredId}`, function(error){
    response.redirect(`/`);
  })
})

 

#2.

다른 미들웨어도 사용하여 미들웨어에 익숙해져보자.

Express compression middleware

웹서버가 웹 브라우저에 응답할 때 데이터를 압축하는 방법에 대하여 알아보자.

npm install compression --save
var compression = require('compression');
app.use(compression());

크롬 개발자도구의 네트워크 탭을 통해 우리 웹페이지의 용량을 확인하며 변화를 음미해보자.

---

#0.

Express의 미들웨어를 만들어보자.

 

#1.

가이드 참조

Writing middleware for use in Express apps

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

var myLogger = function (req, res, next) {
  console.log('LOGGED')
  next()
}

app.use(myLogger)

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

app.listen(3000)

미들웨어란 결국 함수, 이 함수 내부를 어떻게 구현하느냐로 미들웨어의 기능이 정의된다.

우리의 코드에도 공통적으로 사용되는 부분이 있는데, 글 목록을 출력해주는 부분이다.

이 부분을 미들웨어로 정의해보자.

 

#2.

app.use(function(request, response, next){
  fs.readdir('./data', function(error, filelist){
    request.list = filelist;
    next();
  });
});

request 객체의 list 속성에 filelist 값을 전달해주었다.

이제 request 객체의 list property를 통해 글 목록에 접근할 수 있게 되었다.

//기존 코드
app.get('/', function(request, response) { 
  fs.readdir('./data', function(error, filelist){
    var title = 'Welcome';
    var description = 'Hello, Node.js';
    var list = template.list(filelist);
    var html = template.HTML(title, list,
      `<h2>${title}</h2>${description}`,
      `<a href="/create">create</a>`
    ); 
    response.send(html);
  });
});

//우리가 만든 미들웨어를 사용한 코드
app.get('/', function(request, response) { 
  var title = 'Welcome';
  var description = 'Hello, Node.js';
  var list = template.list(request.list);
  var html = template.HTML(title, list,
    `<h2>${title}</h2>${description}`,
    `<a href="/create">create</a>`
  ); 
  response.send(html);
});

마찬가지로 body의 나머지 부분도 미들웨어를 적용해 바꾸도록 하자.

그런데 코드를 확인해보면 create_pocess, update_porcess 같은 부분은 글 목록을 읽어올 필요가 없다.

이런 비표율을 수정해주자.

app.get('*', function(request, response, next){
  fs.readdir('./data', function(error, filelist){
    request.list = filelist;
    next();
  });
});

이제 get방식으로 들어오는 모든 요청에 대해서 미들웨어가 동작하게 되었다.

즉 post방식 요청에서는 동작하지 않는다.

그런데 이 코드를 보면 지금까지 우리가 만들고 있던 코드와 상당히 유사하지 않은가..?

이때까지 우리가 만들었던 코드의 두번째 아래 인자는 사실 미들웨어 였던 것을 알 수 있다.

express의 모든 것은 미들웨어라 표현해도 과언이 아니다.

---

#0.

Express의 미들웨어가 실행되는 순서를 살펴보자.

 

#1.

해당 가이드를 참조하자.

Using Express middleware

app이란 객체에 use 혹은 get으로 등록된 미들웨어들을 Application level middleware라 부른다.

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

app.use(function (req, res, next) {
  console.log('Time:', Date.now())
  next()
})

use를 통해서 미들웨어로 등록되게 되는 것이고,

미들웨어의 핵심은 req와 res를 받아서 그것을 변형할 수 있는 것.

next를 통해서 그 다음에 실행되는 미들웨어를 실행할 지 실행하지 않을지 그 결정을 이전 미들웨어가 결정한다.

app.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()
})

또한 app.use에 경로를 주는 것처럼 특정 경로에서만 미들웨어가 동작하게 할 수 있다.

마찬가지로 use 대신 get을 사용하여 method가 get방식일때만 동작하도록 만들 수도 있다.

app.get('/user/:id', function (req, res, next) {
  console.log('ID:', req.params.id)
  next()
}, function (req, res, next) {
  res.send('User Info')
})

또한 이 처럼 인자로 함수를 넘겨주는 방식으로 여러 미들웨어를 붙일 수 있다.

app.get('/user/:id', function (req, res, next) {
  // if the user ID is 0, skip to the next route
  if (req.params.id === '0') next('route')
  // otherwise pass the control to the next middleware function in this stack
  else next()
}, function (req, res, next) {
  // send a regular response
  res.send('regular')
})

// handler for the /user/:id path, which sends a special response
app.get('/user/:id', function (req, res, next) {
  res.send('special')
})

조건문을 통하여 다음 미들웨어의 실행여부도 결정할 수 있다.