express 모듈로 하는 세련된 라우팅

라우팅할 때 *기호의 의미

const express = require('express');

const app = express();

const users = ['Tom', 'Andy', 'Jessica', 'Paul'];

app.get('/', (request, response) => {
  response.end('<h1>Welcome!</h1>');
});

app.get('/users', (request, response) => {
  response.end(`<h1>${users}</h1>`);
});

app.get('/users/:id', (request, response) => {
  const userName = users[request.params.id - 1];
  response.end(`<h1>${userName}</h1>`);
});

app.get('*', (request, response) => {
  response.end('<h1>Page Not Available</h1>');
});

app.listen(3000);

이 코드는 이전 영상에서 본 코드에서 주석 부분을 삭제한 후의 코드입니다. express라는 서드파티 모듈을 사용해서 간단한 라우팅을 해본 코드죠? 그런데 여기서 가장 마지막에 있는

app.get('*', (request, response) => {
  response.end('<h1>Page Not Available</h1>');
});

이 코드에서, path 인자로 들어간 (별표, asterisk) 이 표시의 의미는 무엇일까요? 이전 영상에서 이 표시는 '나머지 모든 URL'을 의미한다고 했는데요. 여기서 path가 들어가야 할 자리에 들어간 는 모든 path를 의미합니다. 즉, 그 어떤 형태의 URL이라도

response.end('<h1>Page Not Available</h1>');

이 코드를 실행하겠다는 뜻이죠.

하지만 이 코드를 실행해보면

/
/users
/users/2

이런 URL에 대해서는 정상적인 페이지를 보여주고, 그 밖의 모든 URL에 대해서만 'Page Not Available'을 출력하는데요. 제 설명대로라면 *는 모든 URL을 나타내니까 어떤 path든 상관없이 항상 'Page Not Available'을 출력해야 할 것 같은데 이상합니다.

이런 현상이 보이는 이유는 바로 라우팅을 하는 코드의 순서 때문입니다. 위 코드 중 라우팅에 관한 코드 부분만 가져와 보면

app.get('/', (request, response) => {
  response.end('<h1>Welcome!</h1>');
});

app.get('/users', (request, response) => {
  response.end(`<h1>${users}</h1>`);
});

app.get('/users/:id', (request, response) => {
  const userName = users[request.params.id - 1];
  response.end(`<h1>${userName}</h1>`);
});

app.get('*', (request, response) => {
  response.end('<h1>Page Not Available</h1>');
});

이렇게

(1) /, 
(2) /users, 
(3) /users/:id, 
(4) *

이 순서대로 각 path에 대한 처리를 하고 있습니다. 이 순서에는 중요한 의미가 있습니다. 그건 바로 클라이언트의 요청이 왔을 때 제 코드는 path가

(1) '/' 인지 확인, 
(2) '/users' 인지 확인,
(3) '/users' 뒤에 '/어떤 문자열'이 붙은 형태인지 확인하고

(4) 그다음에야 *를 보고 그 외의 모든 path에 대해서 'Page Not Available'을 출력하기 때문입니다.

그래서 모든 경우에 'Page Not Available'이 보였던 것은 아닌 겁니다.

하지만 만약 아래 코드와 같이

app.get('*', (request, response) => { // 맨 위로 올림
  response.end('<h1>Page Not Available</h1>');
});

app.get('/', (request, response) => {
  response.end('<h1>Welcome!</h1>');
});

app.get('/users', (request, response) => {
  response.end(`<h1>${users}</h1>`);
});

app.get('/users/:id', (request, response) => {
  const userName = users[request.params.id - 1];
  response.end(`<h1>${userName}</h1>`);
});

'*' path에 관한 라우팅 코드를 가장 첫 번째로 이동시키면, 이제 / 또는 /users 또는 /users/2 같은 path로 요청을 보내더라도 항상 Page Not Available만 응답으로 보게 됩니다. 하지만 이건 우리가 원하는 결과가 아니기 때문에 원래 코드로 다시 바꿔야겠죠?

이번 노트에서는 라우팅에서 * 의 의미에 대해 알아봤는데요. 라우팅 코드를 쓸 때는 코드 상의 순서도 중요하다는 점. 함께 알아두시면 좋을 거 같습니다.

출처: 코드잇