[vue.js] 404 Error 핸들링

Vue.js에서 404 Not Found 페이지 설정 및 리다이렉트는 어떻게 할까?

1. Terminology

1) 404 Not Found

404 Not Found 에러는 "서버 자체는 존재하지만 서버에서 요청한 것을 찾을 수 없을 때" 나타나는 오류다. 보통 사용자가 요청하는 페이지나 파일을 찾을 수 없을 때 발생한다. 서버 문제를 제외한다면, 보통 사용자의 오타, 또는 변경되기 이전의 URL로의 접속이 가장 큰 원인이라고 볼 수 있다.

2) Redirect

리다이렉트라는 용어 그대로 다시(re) 지시한다(direct)는 뜻이다. HTTP 리다이렉트는 HTTP 표준으로 정의되어 있으며, 최초 요청을 받은 웹서버는 리다이렉트되어야 할 주소를 응답 메세지 헤더 안의 location 안에 담아 HTTP 응답 상태코드로 302 를 보낸다. 또한. 클라이언트는 상태코드가 302 인 HTTP 응답 메세지를 받은 경우 헤더 안의 location URL로 다시 요청한다.

2. Purpose

먼저 404 페이지의 목적은 사용자가 존재하지 않는 페이지에 접속을 시도해도 사용자가 계속 홈페이지에 남아있도록 하는 것이라고 한다. 그러기 위해서 조건에 부합하지 않거나, 존재하지 않는 주소에 대해 사전에 만들어 놓은 404 페이지로 리다이렉트하기 위해서다.

3. Usage

1) Page Not Found 컴포넌트와 라우팅 매치하기

const routes = [
    {
        path: "/404",
        name: "notFound",
        component: NotFound
    },
];

Page Not Found 페이지를 NotFound 컴포넌트에 구현을 한 뒤에 /404 경로와 매칭시킨다.

2) 존재하지 않는 경로들 404 페이지로 리다이렉트하기

// Vue 2.x
const routes = [
    {
        path: '*',
        redirect: "/404"
      	// 아래처럼 바로 NotFound 경로를 매칭해도 됨
      	// component: NotFound
    },
];

모든 페이지들을 경로와 매칭시킨 이후, route 포함되지 않은 모든 경로(default 값)에 대해서 /404 페이지로 리다이렉트한다. '*' 의 의미는 위에서 어떤 경로와도 매칭이 되지 않은 경우 해당 경로로 이동하라는 의미로 이해하면 된다.

Vue 3에서부터 default 값과의 매칭이 pathMatch 로 바뀌었다.
따라서 Vue 3에서부터는 아래와 같은 방법으로 사용한다.

// Vue 3.x
const routes = [
    {
        path: '/:pathMatch(.*)*',
        redirect: "/404"
    },
];

cf. 기타 케이스

동적 라우팅 매칭에서 parameter에 따라서 페이지가 존재하지 않을 수도 있다.

1. user/:id 와 같은 경로에 대해, 잘못된 형식의 id (ex. 숫자 id인데 문자열을 입력한 경우)를 입력한 경우
2. 페이지 접속에 권한이 필요한 경우 (ex. 네이버 카페에서 게시판 별 접근 권한)

이와 같이 동적 라우팅에 올바른 parameter가 사용되었는지 확인하기 위해서 Vue-Router의 네비게이션 가드를 이용하여 잘못된 접근을 막을 수 있다.

4. Reference

1. 404 not found 에러의 의미와 해결 방법 [link]
2. 리다이렉트(REDIRECT)란? [link]
3. [번역] '404 에러페이지' 24가지 분석 - 1 [link]
4. Why Your 404 Page is Important and How to Make it Brilliant Instead of Boring [link]
5. Vue-router redirect on page not found (404) [link]
6. Removed * (star or catch all) routes [link]