[Node.js 교과서] #21. 익스프레스 웹 서버 만들기 - Router 객체로 라우팅 분리하기

이전 예제에서 라우터를 만들 때 요청 메서드와 주소별로 분기 처리르 하느라 코드가 매우 복잡했다. if 문으로 분기하여 코딩하여 보기에도 좋지 않고 확장하기도 어려웠다. 익스프레스를 사용하는 이유 중 하나가 바로 라우팅을 깔끔하게 관리할 수 있다는 점 때문이다.

 

app.js의 라우터 부분을 살펴보자.

 

 

익스프레스 앱과는 app.use('/', indexRouter)와 app.use('/users', userRouter)로 연결되어 있다. app.use를 사용하므로 라우터도 일종의 미들웨어라고 볼 수 있다. 다른 미들웨어와는 다르게 앞에 주소가 붙어있다. 이와 같이 라우팅 미들웨어는 첫 번째 인자로 주소를 받아서 특정 주소에 해당하는 요청이 왔을 때만 미들웨어가 동작하게 할 수도 있다. 주소가 /로 시작하면 routes/index.js를, /users로 시작하면 routes/users.js를 호출하라는 의미이다.

use 대신 get, post, put, patch, delete 같은 HTTP 메서드를 사용할 수도 있다.

 

app.use('/', function(req, res, next) {
	console.log('/ 주소의 요청일 때 실행됩니다. HTTP 메서드는 상관 없습니다.');
    next();
});

app.get('/', function(req, res, next) {
	console.log('GET 메서드 / 주소의 요청일 때만 실행됩니다.');
    next();
});

app.post('/data', function(req, res, next) {
	console.log('POST 메서드 /data 주소의 요청일 때만 실행됩니다.');
    next();
});

 

use 메서드는 모든 HTTP 메서드에 대해 요청 주소만 일치하면 실행되지반, get, post, put, patch, delete 같은 메서드는 주소 뿐만 아니라 HTTP 메서드까지 일치하는 요청일 때만 실행된다. 

이제 라우터를 살펴보자. 라우터 파일들은 routes 폴더에 들어 있다. index와 users 라우터는 다음과 같다.

 

routes/index.js

 

routes/users.js

 

router 객체는 express.Router()로 만들었다. 마지막에는 module.exports = router;로 라우터를 모듈로 만든다. router에도 app처럼 use, get, post, put, patch, delete 같은 메서드를 붙일 수 있다. use를 제외하고는 각각 HTTP 요청 메서드와 상응한다.

또한, app.use처럼 router 하나에 미들웨어를 여러 개 장착할 수도 있다. 실제 라우터 로직이 실행되는 미들웨어 전에 로그인 여부 또는 관리자 여부를 체크하는 미들웨어를 중간에 넣어두곤 한다. 다음과 같은 것이 가능하다는 것이다.

 

router.get('/', middleware1, middleware2, middleware3);

 

다시 코드 설명으로 돌아가서, router.get('/')이면 / 주소로 GET 요청을 하는 것과 같다. res.render 메서드로 클라이언트에 응답을 보낸다. 익스프레스가 응답 객체에 새로 추가한 메서드이다. 이 메서드는 템플릿 엔진을 사용하는 부분이다.

users.js에서도 router.get('/') 부분이 있다. app.js에서 app.use('/users', usersRouter)로 연결했기 때문에 /users와 /이 합쳐져 /users/로 GET 요청을 했을 때 이 라우터의 콜백 함수가 실행된다. 

사실 라우터(express.Router())를 사용할 필요 없이 app.js에서 app.get('/', 미들웨어), app.get('/users', 미들웨어)를 해도 기능은 동일하다. 하지만 코드 관리를 위해 라우터를 별도로 분리하는 것이다.

라우터에서는 반드시 요청에 대한 응답을 보내거나 에러 핸들러로 요청을 넘겨야 한다. 응답을 보내지 않으면 브라우저는 계속 응답을 기다린다. 응답에 제한 시간이 있으므로 영원히 기다리지는 않지만, 기다리는 동안 다른 동작을 수행할 수 없을 수도 있다. res 객체에 들어 있는 메서드들로 응답을 보낸다.

next 함수에는 라우터에서만 동작하는 특수 기능이 있다. next('route')이다. 라우터에 연결된 나머지 미들웨어들을 건너뛰고 싶을 때 사용한다.

 

router.get('/', function(req, res, next) {
	next('route');
}, function(req, res, next) {
	console.log('실행되지 않습니다.');
    next();
}, function(req, res, next) {
	console.log('실행되지 않습니다.');
    next();
});

router.get('/', function(req, res) {
	console.log('실행됩니다.');
    res.render('index', { title: 'Express' });
});

 

같은 주소의 라우터를 두 개 만들었다. 첫 번째 라우터의 첫 번째 미들웨어에서 next('route')를 호출하자 두 번째, 세 번째 미들웨어는 실행되지 않는다. 대신 주소와 일치하는 다음 라우터로 넘어간다.

유용한 팁이 하나 더 있다. 라우터 주소에는 특수한 패턴을 사용할 수 있다. 여러 가지 패턴이 있지만, 자주 쓰이는 패턴 하나만 알아보자.

 

router.get('/users/:id', function(req, res) {
	console.log(req.params, req.query);
});

 

주소에 :id가 있는데, 문자 그대로 :id를 의미하는 것이 아니다. 이 부분에는 다른 값을 넣을 수 있다. /users/1이나 /users/123 등의 요청도 이 라우터에 걸린다. 이 방식의 장점은 :id에 해당하는 1이나 123을 조회할 수 있다는 점이다. req.params 객체 안에 들어 있다. :id면 req.params.id로, :type이면 rea.params.type으로 조회할 수 있다.

주소에 쿼리스트링을 쓸 때도 있다. 쿼리스트링의 키-값 정보는 req.query 객체 안에 들어 있다.

예를 들어, /users/123?limit=5&skip=10이라는 주소의 요청이 들어왔을 때 req.params와 req.query 객체는 다음과 같다.

 

{ id: '123' } { limit: '5', skip: '10' }

 

요청 주소에 대한 정보가 담겨 있어 요긴하게 활용할 수 있다. 단, 이 패턴을 사용할 때 주의할 점이 있다. 일반 라우터보다 뒤에 위치해야 한다는 것이다. 다양한 라우터를 아우르는 와일드카드 역할을 하므로 일반 라우터보다는 뒤에 위치해야 다른 라우터를 방해하지 않는다.

에러가 발생하지 않았다면 라우터는 요청을 보낸 클라이언트에게 응답을 보내주어야 한다. 

send는 만능 메서드이다. 버퍼 데이터나 문자열을 전송하거나, HTML 코드를 전송하기도 하고, JSON 데이터도 전송할 수 있다. sendFile은 파일을 응답으로 보내주는 메서드고, json은 JSON 데이터를 보내준다. redirect는 응답을 다른 라우터로 보내버린다. 예를 들어, 로그인 완료 후 다시 메인 화면으로 돌아갈 때 res.redirect(메인 화면 주소)를 하면 된다.

 

res.send(버퍼 또는 문자열 또는 HTML 또는 JSON);
res.sendFile(파일 경로);
res.json(JSON 데이터);
res.redirect(주소);
res.render('템플릿 파일 경로', { 변수 });

 

기본적으로는 200 HTTP 상태 보드를 응답하지만 (res.redirect는 302), 직접 바꿔줄 수도 있다. 다음과 같이 status 메서드를 먼저 사용하면 된다.

 

res.status(404).send('Not Found');

 

render 메서드는 템플릿 엔진을 렌더링할 때 사용된다. views 폴더 안 pug 확장자를 가지고 있는 파일들이 템플릿 엔진이다.

 

마지막으로 라우터가 요청을 처리하지 못할 때 어떤 일들이 발생하는지 알아보자. 요청을 처리할 수 있는 라우터가 없다면 다음 미들웨어로 넘어간다. 404 HTTP 상태 코드를 보내주어야 하므로 다음 미들웨어에서 새로운 에러를 만들고 에러의 상태코드를 404로 설정한 뒤 에러 처리 미들웨어로 넘겨 버린다.

 

...
//404 처리 미들웨어
app.use(function(req, res, next) {
	next(createError(404));
});

// 에러 핸들러
app.use(function(err, req, res, next) {
	// set locals, only providing error in development
    res.locals.message = err.message;
    res.locals.error = req.app.get('env') === 'development' ? err : {};
    
    // render the error page
    res.status(err.status || 500);
    res.render('error');
});
...l