[Node.js 교과서] #20. 익스프레스 웹 서버 만들기 - 미들웨어

미들웨어

미들웨어는 익스프레스의 핵심이다. 요청과 응답의 중간(middle, 미들)에 위치하여 미들웨어라고 부른다. 미들웨어는 요청과 응답을 조작하여 기능을 추가하기도 하고, 나쁜 요청을 걸러내기도 한다.

 

미들웨어는 주로 app.use와 함께 사용된다.

 

 

app.use의 인자로 들어 있는 함수가 미들웨어이다. 미들웨어는 use 메서드로 app에 장착한다. 제일 위의 logger('dev')부터 시작하여 미들웨어들을 순차적으로 거친 후 라우터에서 클라이언트로 응답을 보낸다.

 

1. 커스텀 미들웨어 만들기

요청이 들어올 때 콘솔에 메시지를 찍는 단순한 미들웨어를 만들어보자. app.js에서 logger보다 위에 다음 코드를 적어준다.

 

 

app.js 파일을 저장하고 서버를 실행한다.

 

서버 실행 시

 

localhost:3000 접속 시

 

localhost:3000 접속 시 콘솔 확인

 

요청 두 개, 즉 GET /와 GET /stylesheet.style.css가 서버로 전달되었다. 각각의 요청이 모두 방금 만든 커스텀 미들웨어를 작동시켰다. 이렇게 서버가 받은 요청은 미들웨어를 타고 라우터까지 전달된다.

주의해야할 점이 있다. 반드시 미들웨어 안에서 next()를 호출해야 다음 미들웨어로 넘어간다. logger나 express.json, express.urlencoded, cookieParser, express.static 모두 내부적으로는 next()를 호출하므로 다음 미들웨어로 넘어갈 수 있다. next()는 미들웨어의 흐름을 제어하는 핵심적인 함수이다.

확인을 위해 next()를 빼보자.

 

 

next()를 주석처리한 후 localhost:3000 접속했을 시 콘솔

 

next()를 주석처리한 후 localhost:3000 접속했을 시 응답이 완료되지 않음

 

재실행 후 다시 접속하면 아무런 응답이 없다. 브라우저에서도 계속 로딩 표시가 뜬다. next()를 넣지 않아 커스텀 미들웨어에서 요청의 흐름이 끊겨버린 것이다.

next() 함수에는 몇 가지 기능이 더 있다. 인자의 종류로 기능이 구분된다. 인자를 아무것도 넣지 않으면 단순하게 다음 미들웨어로 넘어가고, 인자로 route를 넣으면 특수한 기능을 한다. (추후 다룰 예정) route 외의 다른 값을 넣으면 다른 미들웨어나 라우터를 건너뛰고 바로 에러 핸들러로 이동한다. 넣어준 값은 에러에 대한 내용으로 간주된다.

익스프레스가 생성해주는 에러 핸들링 미들웨어를 보면 이해하기 쉽다. 가장 흔한 에러가 404 에러이다. 라우터에 등록되지 않는 주소로 요청이 들어올 때 발생한다. 이 경우에는 404 NOT FOUND 상태 코드를 응답해주어야 한다.

 

 

라우터 다음에 나오는 이 부분이 404 에러를 만들어내는 미들웨어이다. 라우터에서 요청이 처리되지 않으면(일치하는 주소가 없다면) 요청은 라우터 다음에 위치한 이 미들웨어로 오게 된다. http-errors(createError) 패키지가 404 에러를 만들어내고, 이 에러를 next에 담아 에러 핸들러로 보내고 있다. 에러 핸들링 미들웨어는 다음과 같이 생겼다.

 

 

다른 미들웨어와 다르게 함수의 매개변수가 네 개이다. req 전에 err라는 매개변수가 추가되었다. next 함수에 넣어준 인자가 err 매개변수로 연결된다. 에러 핸들링 미들웨어는 일반적으로 미들웨어 중 제일 아래에 위치하여 위에 있는 미들웨어에서 발생하는 에러를 받아서 처리한다.

이번에는 app.user의 응용 방법에 대해서 알아보자. 하나의 use에 미들웨어를 여러 개 장착할 수 있다. 순서대로 실행된다.

 

 

이 성질을 활용하여 Express-generator가 생성한 코드도 다음과 같이 줄일 수 있다.

 

 

next를 호출하지 않으면 다음 미들웨어로 넘어가지 않는다는 성질을 사용해서 다음과 같은 미들웨어도 만들 수 있다.

 

 

2. morgan

현재 콘솔에 나오는 GET / 200 51.267 ms - 1539 같은 로그는 모두 morgan 미들웨어에서 나오는 것이다. 요청에 대한 정보를 콘솔에 기록해준다.

morgan 미들웨어는 다음과 같이 사용한다.

 

...
var logger = require('morgan');
...
app.use(logger('dev'));
...

 

함수의 인자로 dev 대신 short, common, combined 등을 줄 수 있다. 인자에 따라 콘솔에 나오는 로그가 다르다. dev인 경우 GET / 200 51.267 ms - 1539 의 의미는 순서대로 HTTP 요청(GET) 주소(/) HTTP 상태코드(200) 응답속도(51.267ms) - 응답바이트(1539) 이다.

보통 개발 시에는 short나 dev를 많이 쓰고, 배포 시에는 common이나 combined를 많이 사용한다. 

 

 

 

 

 

콘솔뿐만 아니라 파일이나 데이터베이스에 로그를 남길 수도 있다. 이러한 작업을 할 때는 winston 모듈을 더 많이 사용한다.

3. body-parser

요청의 본문을 해석해주는 미들웨어이다. 보통 폼 데이터나 AJAX 요청의 데이터를 처리한다.

 

...
var bodyParser = require('body-parser');
...
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false});
...

 

우리가 생성한 app.js에서는 body-parser를 사용하지 않았다. 익스프레스 4.16.0 버전부터 body-parser의 일부 기능이 익스프레스에 내장되었기 때문이다. 그래서 body-parser를 설치하지 않고도 다음과 같이 할 수 있었다.

 

 

단, body-parser가 필요한 경우도 있다. body-parser는 JSON과 URL-encoded 형식의 본문 외에도 Raw, Text 형식의 본문을 추가로 해석할 수 있다.

Raw는 본문이 버퍼 데이터일 때, Text는 본문이 텍스트 데이터일 때 해석하는 미들웨어이다. 서비스에 적용하고 싶다면 body-parser를 설치한 후 다음과 같이 추가한다.

 

app.use(bodyParser.raw());
app.use(bodyParser.text());

 

JSON은 JSON 형식의 데이터 전달 방식이고, URL-encoded는 주소 형식으로 데이터를 보내는 방식이다. 보통 폼 전송이 URL-encoded 방식을 주로 사용한다. urlencoded 메서드를 보면 { extended: false }라는 옵션이 들어 있다. 이 옵션이 false면 노드의 querystring 모듈을 사용하여 쿼리스트링을 해석하고, true면 qs 모듈을 사용하여 쿼리스트링을 해석한다. qs 모듈은 내장 모듈이 아니라 npm 패키지이며, querystring 모듈의 기능을 조금 더 확장한 모듈이다.

이전에 POST와 PUT 요청의 본문을 전달받으려면 req.on('data')와 req.on('end')로 스트림을 사용해야 했었는데 body-parser를 사용하면 그럴 필요가 없다. 이 패키지가 내부적으로 본문을 해석해 req.body에 추가해준다.

예를 들어 JSON 형식으로 {name: 'zerocho', book: 'nodejs'}를 본문으로 보낸다면 req.body에 그대로 들어간다. URL-encoded 형식으로 name=zerocho&book=nodejs를 본문으로 보낸다면 req.body에 {name: 'zerocho', book: 'nodejs'}가 들어간다.

body-parser가 모든 본문을 해석해주는 것은 아니다. multipart/form-data 같은 폼을 통해 전송된 데이터는 해석하지 못한다. 이는 다른 모듈을 사용해서 해석해야 한다.

4. cookie-parser

cookie-parser는 요청에 동봉된 쿠키를 해석해준다. 

 

...
var cookieParser = require('cookie-parser');
...
app.use(cookieParser());
...

 

해석된 쿠키들은 req.cookies 객체에 들어간다. 예를 들어, name=zerocho 쿠키를 보냈다면 req.cookies는 { name: 'zerocho' }가 된다.

 

app.use(cookieparser('secret code');

 

이와 같이 첫 번째 인자로 문자열을 넣어줄 수 있다. 이제 쿠키들은 제공한 문자열로 서명된 쿠키가 된다. 서명된 쿠키는 클라이언트에서 수정했을 때 에러가 발생하므로 클라이언트에서 쿠키로 위험한 행동을 하는 것을 방지할 수 있다.

5. static

static 미들웨어는 정적인 파일들을 제공한다. 익스프레스를 설치하면 따라오므로 따로 설치할 필요는 없다.

 

...
app.use(express.static(path.join(__dirname, 'public')));
...

 

함수의 인자로 정적 파일들이 담겨 있는 폴더를 지정하면 된다. 현재 public 폴더가 지정되어 있다. public/stylesheets/style.css는 http://localhost:3000/stylesheets/style.css로 접근할 수 있다. 

실제 서버의 폴더 경로에는 public이 들어 있지만, 요청 주소에는 public이 들어 있지 않다는 점을 주목해야 한다. 서버의 폴더 경로와 요청 경로가 다르므로 외부인이 서버의 구조를 쉽게 파악할 수 없다. 이는 보안에 큰 도움이 된다.

또한, 정작 파일들을 알아서 제공해주므로 이전 예제처럼 fs.readFile로 파일을 직접 읽어서 전송할 필요가 없다.

 

app.use('/img', express.static(path.join(__dirname, 'public')));

이와 같이 정적 파일을 제공할 주소를 지정할 수도 있다. public 폴더 안에 abc.png가 있다고 가정하면 앞에 /img 경로를 붙인 http://localhost:3000/img/abc.png 주소로 접근할 수 있다.

static 미들웨어는 요청에 부합하는 정적 파일을 발견한 경우 응답으로 해당 파일을 전송한다. 이 경우 응답을 보냈으므로 다음에 나오는 라우터가 실행되지 않는다. 만약 파일을 찾지 못하면 요청을 라우터로 넘긴다.

이렇게 자체적으로 정적 파일 라우터 기능을 수행하므로 최대한 위쪽에 배치하는 것이 좋다. 그래야 서버가 쓸데없는 미들웨어 작업을 하는 것을 막을 수 있다.

기존 코드에서는 morgan, json, urlencoded, cookie-parser 미들웨어를 거쳐야 static 미들웨어에 도달한다. 요청을 기록하는 morgan을 제외하고 정적 파일을 제공하는 데 영향을 끼치지 않는 json, urlencoded, cookie-parser를 거치는 것은 낭비이다. 따라서 순서를 바꿔주는 것이 좋다. 참고로 서비스에 따라 쿠키 같은 것이 정적 파일을 제공하는 데 영향을 끼칠 수도 있다. 그러므로 자신의 서비스에 맞는 위치를 선택해야 한다.

6. express-session

세션 관리용 미들웨어이다. 로그인 등의 이유로 세션을 구현할 때 매우 유용하다. express-generator로는 설치되지 않으므로 다음과 같이 직접 설치해야 한다.

 

 

설치 후 app.js에 express-session을 연결한다.

 

...
var session = require('express-session');
...
app.use(cookieParser());
app.use(session({
  resave: false,
  saveUninitialized: false,
  secret: 'secret code',
  cookie: {
    httpOnly: true,
    secure: false
  }
}));
...

 

express-session 1.5 버전 이전에는 내부적으로 cookie-parser를 사용하고 있어서 cookie-parser 미들웨어보다 뒤에 위치해야 했지만, 1.5 버전 이후부터는 사용하지 않게 되어 순서가 상관 없어졌다. 그래도 현재 어떤 버전을 사용하고 있는지 모른다면 cookie-parser 미들웨어 뒤에 놓는 것이 안전하다.

express-session은 인자로 세션에 대한 설정을 받는다.

• resave : 요청이 왔을 때 세션에 수정사항이 생기지 않더라도 세션을 다시 저장할지에 대한 설정이다.
• saveUninitialized : 세션에 저장할 내역이 없더라도 세션을 저장할지에 대한 설정이다. 보통 방문자를 추적할 때 사용된다.
• secret : 필수 항목으로 cookie-parser의 비밀키와 같은 역할을 한다. express-session은 세션 관리 시 클라이언트에 쿠키를 보낸다. 이를 세션 쿠키라고 부른다. 안전하게 쿠키를 전송하려면 쿠키에 서명을 추가해야 하고, 쿠키를 서명하는 데 secret의 값이 필요하다. cookie-parser의 secret과 같게 설정해야 한다.
• cookie : 세션 쿠키에 대한 설정이다. maxAge, domain, path, expires, sameSite, httpOnly, secure 등 일반적인 쿠키 옵션이 모두 제공된다.

express-session은 req 객체 안에 req.session 객체를 만든다. 이 객체에 값을 대입하거나 삭제해서 세션을 변경할 수 있다. 나중에 세션을 한 번에 삭제하려면 req.session.destroy() 메서드를 호출하면 된다. 현재 세션의 아이디는 req.sessionId로 확인할 수 있다.

7. connect-flash

상대적으로 중요도가 떨어지는 미들웨어이다. 하지만 일회성 메시지들을 웹 브라우저에 나타낼 때 좋다. express-session과 마찬가지로 직접 설치해주어야 한다.

 

 

connect-flash 미들웨어는 cookie-parser와 express-session을 이용하므로 이들보다는 뒤에 위치해야 한다.

 

...
var session = require('express-session');
var flash = require('connect-flash');
...
app.use(session({
  resave: false,
  saveUninitialized: false,
  secret: 'secret code',
  cookie: {
    httpOnly: true,
    secure: false
  }
}));
app.use(flash());
...

 

flash 미들웨어는 req 객체에 req.flash 메서드를 추가한다. req.flash(키, 값)으로 해당 키에 값을 설정하고, req.flash(키)로 해당 키에 대한 값을 불러온다. 

 

routes/users.js

 

일회성 메시지라는 성질을 이용하여 로그인 에러나 회원가입 에러 같은 일회성 경고 메시지는 flash 미들웨어로 보내면 좋다.