Nodejs/Server

Session #2 - 미들웨어

Sila 2022. 2. 13. 17:25

express를 이용해 session 기능을 이용하기 전에 라우터와 미들웨어에 대해 좀 더 알아보자.

 

1. 미들웨어, next

express의 주요 기능 중 하나인 미들웨어는 요청과 응답의 중간에 있기 때문에 'middle'ware라고 부르며,

 

중간에서 요청과 응답을 조작해 이런 저런 기능을 조정해주는 역할을 한다.

 

지금까지 사용했던 것과 비슷하게 app.use와 함께 사용해주면 된다.

 

매개변수는 최대 4개를 가질 수 있는데, 4개를 다 사용하는 경우는 에러가 있을 때뿐이고,

 

보통은 3개 이하를 사용한다.

 

next는 여러 개의 미들웨어를 순차적으로 실행시켜주는 역할을 한다. 예시를 보며 이해해보자.

 

다음과 같이 server.js 파일을 작성해보자.

 

/*  server.js  */

// set up

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

const nunjucks = require('nunjucks')

app.use(express.urlencoded({extended:true}))

app.set('view engine', 'html')
nunjucks.configure('views', {express:app})

// 라우터

app.use((req,res) => {
    console.log('모든 요청에서 실행')    
})

// 서버 구동

app.listen(3000, () => {
    console.log('서버 구동')
}

 

이렇게 작성한 후, 서버를 실행하고 웹 페이지로 들어가보면 콘솔에 다음과 같이 텍스트가 출력될 것이다.

 

응답에 대한 코드를 작성하지 않았으므로 브라우저에 다른 새로운게 렌더링되지는 않는다.

 

이제 여기서 응답을 줄 코드를 1번째 라우터 아래에 추가해보자. (순서 중요)

 

/*  server  */

app.get('/', (req,res) => {
    console.log('2번째 라우터의 1번째 미들웨어 실행')
    res.render('index.html')
})
/*  index1.html  */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    index1.html입니다.
</body>
</html>

 

이렇게 추가하고 다시 서버를 실행해봐도 여전히 서버가 응답을 주지 않는 것을 확인할 수 있다.

 

텍스트도 출력이 되지 않는다. 

 

이것은 두 번째 라우터는 아예 실행이 되지 않고 넘어갔다는 것을 의미한다.

 

이는 이미 미들웨어가 하나 실행이 되었으므로 다른 미들웨어가 중복되어 실행될 수가 없어서 그렇다.

 

 

이런 문제를 해결하기 위한 방법이 next라는 함수를 매개변수로 추가해주는 것이다.

 

next는 미들웨어를 실행한 후, 다음에 오는 미들웨어를 이어서 실행하도록 해주는 기능이다.

 

다음과 같이 코드를 수정해보자.

 

/*  server.js  */

// set up 

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

const nunjucks = require('nunjucks')

app.use(express.urlencoded({extended:true}))

app.set('view engine', 'html')
nunjucks.configure('views', {express:app})

// 라우터

app.use((req,res, next) => {
    console.log('모든 요청에서 실행')
    next()
})

app.get('/', (req, res) => {
    console.log('2번째 라우터의 1번째 미들웨어 실행')
    res.render('index1.html')
})

// 서버 구동

app.listen (3000, ()=> {
    console.log('서버 실행')
})

서버를 구동하면 이번엔 index1.html을 제대로 불러와 렌더링해주는 것을 확인할 수 있다.

 

콘솔에도 실행을 확인해줄 텍스트들이 차례로 (라우터 순서에 맞게) 출력되었다.

 

여기서 다시 한 번 2번쨰 라우터에 2번째 미들웨어를 추가해보자.

 

/*  server.js  */

// set up

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

cost nunjucks = require('nunjucks')

app.use(express.urlencoded({extended:true})

app.set('view engine', 'html')
nunjucks.configure('views', {express:app})

//  라우터

app.use((req, res, next) => {
    console.log('모든 요청에서 실행')
    next()
})

//

app.get('/', (req, res, next) => {
    console.log('2번째 라우터의 1번째 미들웨어 실행')
    res.render('index1.html')
    next()
},
    (req,res) => {
    console.log('2번째 라우터의 2번째 미들웨어 실행')
    res.render('index2.html')
})


// 서버 구동

app.listen (3000, ()=> {
    console.log('서버 실행')
})

 

/*  index2.html  */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    index2.html입니다.
</body>
</html>

 

이렇게 한 후, 실행해보면 index1.html이 렌더링되고, index2.html은 렌더링되지 않는다.

 

콘솔을 보면 다음이 출력된 것을 볼 수 있다.

 

 

 

결과를 통해 알 수 있는 것은 

 

1. 모든 라우터, 미들웨어는 실행 됨. (next가 있는 경우)

 

2. 단, 응답은 라우터당 하나밖에 있을 수 없다. 여러 개가 있다면 그 중 먼저 오는 것이 실행됨.

 

3. 응답을 또 만날 경우 에러 출력

 

에러 메시지를 간략히 해석해보자면 서버에 응답을 준 후, 또 응답을 줄 수 없다는 말이다.

 

 

 

'Nodejs > Server' 카테고리의 다른 글

파일 업로드 #1  (0) 2022.03.16
비동기 통신 - AJAX #1  (0) 2022.03.16
Session #1  (0) 2022.02.13
Server의 이해 - Cookie #2  (0) 2022.02.08
Server의 이해 - Cookie #1  (0) 2022.02.07