[express] - 미들웨어 뽀개기

 

미들웨어를 사용하는데, 미들웨어 자체에 대한 이해도가 떨어져어려움을 겪고 있어서 쓰는 글

참고자료

Writing middleware for use in Express apps

---

🍳 미들웨어

미들웨어는 req, res, next를 가진 함수입니다.

• req
  클라이언트에서 오는 요청 정보가 담긴 객체
• res
  서버가 응답해주는 응답 정보가 담긴 객체
• next
  next 함수를 호출하면 현재 미들웨어에 이어서 다음 미들웨어를 실행합니다.

미들웨어의 종류

• app에서 사용하는 미들웨어
  내 어플리케이션 전반에서 사용하는 미들웨어다.
• router에 사용하는 미들웨어
  app에서 사용하는 미들웨어와 같지만 사용 범위가 라우터로 정해진다.
• 에러 처리 미들웨어
  다른 미들웨어와 다르게 4개의 매개변수를 가진다.
  에러를 처리하는 목적으로 만들어진 미들웨어다.
• 빌트 인 미들웨어
• 서드 파티 미들웨어
  npm으로 설치하는 미들웨어들을 말한다.

미들웨어 함수가 하는 일

• 어떤 코드든지 실행하기
• 리퀘스트와 리스폰 객체를 수정하기
• 리퀘스트-리스폰의 순환을 끝내기
• 다음 미들웨어를 호출해서 스택에 넣기 = next( )

출처 - express 공식 사이트

🥐 미들웨어 만들어보기

미들웨어 만들어보기1

app.사용할 상황( 미들웨어를 사용할 경로 , 미들웨어가 할 일 )

기본 라우터 상태 app.js

var express = require('express')
var app = express()
// app에서 사용하는 미들웨어
// HTTP GET 요청에서 사용한다.
// 루트 '/' 경로에서 사용하는 미들웨어
// 하는 일 - 응답으로 'hi'라는 문자를 보낸다.
app.get('/', function (req, res) {
  res.send('Hello World!')
})

app.listen(3000)

localhost:3000/ 에 접근하면 Hello World! 가 출력됩니다.

여기에 매번 리퀘스트를 받을 때마다, 콘솔창에 LOOOOGED라는 문자가 출력되는 미들웨어를 만들어봅니다.

// 나만의 미들웨어 만들기
const myLogger = (req,res,next)=>{
  console.log('LOOOOOGED');
  next();
}
// 미들웨어 사용하기
app.use(myLogger);

위 코드를 추가하고 다시 localhost:3000/ 에 접근하면 새로고침을 할 때마다, LOOOOOGED 문자가 서버 콘솔에 찍히는 걸 확인할 수 있습니다.

미들웨어 만들어보기2 - 데이터를 함께 넘겨주기

미들웨어에서 req 객체 프로퍼티를 추가해서 다음 미들웨어에 전달해 줄 수있습니다.

// 나만의 미들웨어 만들기2 - req객체의 프로퍼티로 데이터 넘기기
const reqTime = (req,res,next)=>{
  req.reqTime = Date.now();
  next();
}

app.use(reqTime);

app.get('/',(req,res)=>{
  let resText = 'Hello World!';
  resText += req.reqTime; // req에 미들웨어에서 전달한 데이터가 들어있다.
  res.send(resText);
})
app.listen(5500);

req.Time값이 찍혀있다.

나만의 미들웨어 만들어보기3 - 옵션설정이 가능한 미들웨어

미들웨어에 옵션 설정을 만들수 있다

my-middleware.js

module.exports = (option)=>{
  return (req,res,next)=>{
    console.log(option);
    next();
  }
}

app.js

// 나만의 미들웨어 만들기3 - 옵션을 사용하는 미들웨어
const mw = require('./my-middleware');

app.use(mw({opt1:'hi', opt2:'bye'}));

옵션을 사용할 수 있다.

---

🍜 미들웨어 사용하기

1. 가장 기본적인 사용 방법

app.사용할 상황( 사용할 경로 , 미들웨어가 할 일);

// app에서 사용하는 미들웨어
// HTTP GET 요청에서 사용한다.
// 루트 '/' 경로에서 사용하는 미들웨어
// 하는 일 - 응답으로 'hi'라는 문자를 보낸다.
app.get('/',(req,res)=>{
  res.send('hi');
})

2. 와일드카드를 사용할 수 있다.

URL 경로에서 파라미터 or 쿼리스트링으로 값을 가져와 사용할 수 있다.

파라미터 방식

app.use('/user/:id', (req,res,next)=>{
	const id = req.params.id;
	console.log(id);
	next();
});

쿼리스트링 방식

app.use('/user', (req,res,next)=>{
	const id = req.query.id;
	console.log(id);
	next();
});

3. 미들웨어를 여러개 사용할 수 있다

미들웨어를 여러개 사용할 수있다. next()를 하면 바로 다음 미들웨어로 이동한다.

만약 next('route')라고 사용한다면 다음 미들웨어가 아닌 다음 라우터로 바로 이동한다.

app.get('/user',(req,res,next)=>{
  console.log('Requset URL:', req.originalUrl);
  next('route'); // next안에 route를 쓰면 다음 라우터로 이동한다.
},(req,res,next)=>{ // 다음 미들웨어는 실행되지않는다.
	// 로그와 응답을 보내지 않는다.
	console.log('Requset Type', req.method);
  res.send('hi'); 
});

// 다음 라우터 얘가 실행된다.
app.get('/user',(req,res)=>{
  res.send('is OK?');
})

4. 에러처리 미들웨어

다른 미들웨어와 다르게 4개의 매개변수를 가진다.

다른 미들웨어에서 next를 사용할 때, next(인수)로 'route'외에 다른 것을 넣는다면 에러처리 미들웨어로 이동하게 된다.

app.get('/user',(req,res,next)=>{
  console.log('Requset URL:', req.originalUrl);
  // next('route');
  next(error); // 'route'를 제외한 인수를 던지면 에러처리 미들웨어로 바로 가버린다..
},(req,res,next)=>{ // 무시됨
  console.log('Requset Type', req.method);
  res.send('hi');
});

// 에러처리 미들웨어
app.use((err,req,res,next)=>{
  console.error(err);
  res.status(500).send('에러 처리 미들웨어에 도달했습니다..');
})

에러처리 미들웨어에 도달한 모습

5. 빌트-인 미들웨어

4.x버전부터 내장된 미들웨어들이다.

• express.static정적인 파일 - html, css, image 등
• 정적 파일을 사용하기 위한 경로를 설정하는 미들웨어
• express.json
• JSON 형식의 리퀘스트 데이터를 파서(해석)할 수 있도록 하는 미들웨어
• express.urlencodedURL-encoded형식의 리퀘스트 데이터를 파서(해석)할 수 있도록하는 미들웨어참고자료req