[TIL]2022_06_29 Middleware next 함수

hyomin·2022년 6월 28일
0

TIL

목록 보기
3/14

  • Middleware

    미들웨어는 요청이 이루어지는 단계와 단계 사이에서 작업을 하는 것을 말한다.
    즉 서버쪽에 request가 와서 response를 내보내주려 하는 그사이에 일어나는 작업들을 말한다.

?? 그래서 그게 뭔데

app.get('/',(req,res)=>{
  res.send('hi');
})

분석해보면 app에서 사용하는 milddleware인데 루트 경로에서 사용한다.
하는 일은 응답으로 hi를 보내는 일을 한다.

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

근데 next()는 또 뭐야

현재 라우터에서 판단하지 않고 다음 라우터로 넘기겠다.
next()를 하면 다음 미들웨어로 넘어가고, next(인수)를 하면 에러 핸들러로 넘어가게 된다.
또한, 한가지 특별한 기능이 있는데, next('route')를 하게 되면 다음 미들웨어가 아닌 다음 라우터로 넘어가게 된다.
출처: https://inpa.tistory.com/entry/EXPRESS-📚-미들웨어-💯-이해-정리 [👨‍💻 Dev Scroll:티스토리]

/user/:id 경로에서 사용하고 app.use 니까 하위 모든 url을 사용할 수 있다.
하는 일은 요청의 parameter인 id 값을 console 로 찍고
응답을 보낸다

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?');
})

/user 경로에서 get method request는 console로 출력하고,
next('route') 를 쓰면 다음 라우터로 이동한다

같은 경로의 다음 라우터인

app.get('/user',(req,res)=>{
  res.send('is OK?');
})

이 아이를 실행한다. response 로 isOk를 보낸다.
그러면 requesty type은??? 다음 라우터는 실행되지 않아요

  • 에러처리 미들웨어
app.get('/user',(req,res,next)=>{
  console.log('Requset URL:', req.originalUrl);;
  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('에러 처리 미들웨어에 도달했습니다..');
})

연습해보자

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

app.use(reqTime);
//1.나는 reqTime 이라는 미들웨어를 사용할거에요. 모든 url에서!!

app.get('/',(req,res)=>{
  let resText = 'Hello World!';
  resText += req.reqTime; // req에 미들웨어에서 전달한 데이터가 들어있다.
  res.send(resText);
})
//2.루트 위치에서 받으면 미들웨어를 통해 request에 현재 시간을 넣고
//next로 중단할거에요  res를 사용해서 결과를 내지 않고 next를 사용해서 판단을 유보시킨다. 다음은 response로 요청 reqTime을 붙여 출력합니다.

app.listen(5500);

연습 2

app.use('/', function (req, res, next) { // 1   어떤 HTTP메소드에도 호출되는 로직
  console.log('First');
  next();
})

//루트 아래로 모든 미들웨어에서 실행된다. First 출력하고 다음 라우터로 던짐.

app.get('/', function (req, res, next) { // 2
  console.log('res.end')
  res.send("next end")
})

//만약 호출된 것이 get method라면 이 코드가 실행됩니다.

총정리

const express = require('express');

/* 1. 앱을 만든다. */
const app = express();
 
 
/* 2. 앱에 관련 설정 속성들을 만든다. */
app.set('port', process.env.PORT || 3000);
 
 
/* 3. 공통 미들웨어를 만든다. */
app.use((req, res, next) => {
    console.log('모든 요청에 다 실행됩니다.');
    // next라는 세 번째 매개변수는 다음 미들웨어로 넘어가는 함수이다.
    // next를 실행하지 않으면 다음 미들웨어가 실행되지 않는다.
    next(); 
})
 
 
/* 4. 라우터들을 만든다. */
 
// /error 요청 올때 동작
app.get('/error', (req, res, next) => {
    next(); // next()에 인수가 없다면, 바로 다음 미들웨어 함수로 넘어가게 된다. 
    
}, (req, res) => { // 미들웨어를 여러개 넣어줘도 된다. 위에서 next()되면 실행 된다.
	try {
    	// .. 에러 발생 코드
    } catch(err) {
    	error(err); // next()에 인수가 있다면, 에러 처리 미들웨어로 점프하게 된다. 
    }  
});
 
// /about 요청 올때 동작
app.get('/about', (req, res) => {
   res.send('Hello, about');
});
 
// 주소 부분에는 정규표현식, : (콜론)을 사용한 와일드 카드도 적용이 가능하다 :변수명 정도로 생각하면 된다.
// 와일드 카드를 사용할때는 다른 라우터 보다 뒤에 적어주는 것이 좋다
app.get('/category/:name', (req, res) => {
   res.send(`Hello, ${req.params.name}`);
});
 
// 모든 종류의 get요청이 올때 동작
app.get('*', (req, res) => {
   res.send('Hello, get !!');
});
 
// post 요청 올때 동작
app.post('/', (req, res) => {
   res.status(200).send('Hello, Post');
});
 
 
/* 5. 에러 처리 미들웨어를 만든다. */
app.use((err, req, res, next) => { // 에러 미들웨어는 인자는 반드시 4개 선언
    console.error(err);
    res
    	.status(500)
        .send(err.message); 
})
 
 
/* 6. 포트를 연결하여 서버를 실행한다. */
app.listen(app.get('port'), () => {
    console.log(app.get('port'), '번 포트에서 대기 중.');
});
profile
🌱

0개의 댓글