[TIL 18] 히스토리 모드와 404 라우트

히스토리 모드

URL에서 #(해시)이 없는 일반적인 주소 형식을 사용하도록 하는 모드

• 라우팅 모드라고도 하며 URI 경로와 동기화하여 UI를 나타내기 위해 어떤 정보를 이용할 것인지를 지정하는 방법을 제공
• Vue에서는 해시모드(Hash Mode)와 HTML5 모드, 메모리 모드를 제공

해시 히스토리 모드

• URI 경로에서 # 이후의 문자열 정보를 이용해 라우팅
  • localhost:8000/#/about

✔ 기본 모드 (해시 모드, createWebHashHistory)

<https://example.com/#/about>

✔ 히스토리 모드 (createWebHistory)

<https://example.com/about>

메모리 모드

• 메모리에 저장된 경로 정보를 이용
  • 메모리 모드는 "앱 내부적으로만" 라우팅을 처리하고, 실제 브라우저의 URL은 변경되지 않음
    • ❌ 주소창 URL이 변하지 않음 → 직접 URL로 접근할 수 없음
    • ❌ 새로고침하면 현재 페이지 정보가 날아감 (메모리에 저장되기 때문)
    • Vue 앱이 "브라우저 기반이 아닐 때" 메모리 모드가 유용
  • createMemoryHistory() 사용

배포시 히스토리 모드 운영

서버에서 존재하지 않는 경로 요청이 들어오면 index.html로 리디렉션하도록 설정해야 한다.
이렇게 하면 Vue 앱이 다시 로드되면서 올바른 페이지를 보여줄 수 있다.

• 웹 서버에 폴백 페이지(Fallback UI)가 올바르게 설정되어야 함
  • 개발 서버에는 설정되어 있음

⇒ 히스토리 모드의 문제점

• 새로고침(F5) 하면 "404 Not Found" 오류 발생
• 왜냐하면 서버는 /about 페이지를 모르기 때문!
  • /about을 직접 입력하면 서버는 해당 파일을 찾을 수 없다고 판단

404 라우트

사용자가 존재하지 않는 페이지에 접근했을 때 보여주는 "페이지를 찾을 수 없음" 화면

• 라우트로 설정되지 않은 경로로 요청하면 빈화면이 나타남 → 매칭된 라우트가 존재하지 않으므로 아무런 컴포넌트가 마운트 되지 않음
• 404 라우트 추가
  • 경로가 매칭되는 것이 없을 때 보여줄 라우트
  • 마지막 라우트로 등록해야 함

src/router/index.js

import NotFound from '@/pages/NotFound.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/:pathMatch(.*)*', component: NotFound }, // 404 처리(마지막에 배치)
	  // { path: '/:paths(.*)*', component: NotFound }도 동일한 기능이지만 Vue 4에서는 :pathMatch(.*)*가 공식적인 방식
  ],
});

→ 존재하지 않는 경로로 이동하면 자동으로 NotFound.vue를 보여줌

🌟 히스토리 모드를 사용하면 깔끔한 URL을 만들 수 있지만, 404 문제를 해결하려면 서버 설정과 404 라우트를 함께 사용해야 한다!