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만 응답으로 보게 됩니다. 하지만 이건 우리가 원하는 결과가 아니기 때문에 원래 코드로 다시 바꿔야겠죠?
이번 노트에서는 라우팅에서 * 의 의미에 대해 알아봤는데요. 라우팅 코드를 쓸 때는 코드 상의 순서도 중요하다는 점. 함께 알아두시면 좋을 거 같습니다.
출처: 코드잇