용어 사전 coding 용어 페이지

해시 라우터

`location.hash` 변화를 감지해 페이지를 새로고침 없이 바꾸는 라우팅 방식

hash-router #routing#javascript

English version

다른 이름

해시 기반 라우터

관련 개념

History API 내비게이션 가드

핵심 아이디어

해시 라우터는 hashchange 이벤트를 듣고 # 뒤 문자열을 경로 이름으로 사용합니다. 정적 호스팅에서도 서버 설정 없이 동작하므로 라우팅 기초를 익히기에 적합합니다.

이 블로그에서의 역할

Mathbong에서는 해시 라우터를 기본 예제로 삼아 URL-뷰 매핑을 먼저 이해하게 합니다. 이후 History API나 내비게이션 가드를 도입해도 이 구조를 재사용합니다.

이 개념을 다루는 글

[JavaScript 시리즈 16편] 라우팅과 간단한 내비게이션 구조 해시 기반 라우팅, pushState, 내비게이션 가드 등 순수 JS로 구현하는 미니 라우터를 소개합니다.[JavaScript Series 16] Routing and Lightweight Navigation Build a hash router, explore the History API, and add route guards with plain JavaScript.