해시 기반 라우팅과 경로 기반 라우팅 비교
해시 라우팅과 pushState 기반 기록 라우팅 비교하기
해시 기반 라우팅과 경로 기반 라우팅 비교은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
SPA 주소를 위한 두 가지 전략
SPA에는 브라우저가 가져오지 않는 주소가 필요합니다. 두 가지 접근 방식이 있습니다. 해시 기반 방식은 브라우저가 서버로 절대 보내지 않는 프래그먼트(# 뒤의 모든 내용)를 사용하고, 경로 기반 방식은 pathname과 히스토리 API를 활용합니다.
해시 기반 라우팅
주소는 https://example.com/#/about과 같은 형태입니다. 서버는 /만 확인하고 모든 주소에 동일한 HTML을 제공합니다. 클라이언트 JavaScript가 location.hash를 읽어 표시할 화면을 결정합니다. 간단하며 서버 설정이 필요하지 않습니다.
해시 변경 이벤트
해시 기반 라우터는 hashchange 이벤트를 수신합니다. 이 이벤트는 location.hash가 바뀔 때마다 발생합니다. window.location.hash를 읽는 것과 함께 사용하면 클라이언트 라우팅에 필요한 API가 모두 갖춰지며, 히스토리 API는 필요하지 않습니다.
window.addEventListener("hashchange", () => {
const route = location.hash.slice(1) || "/";
renderPage(route);
});경로 기반 라우팅
주소는 https://example.com/about과 같은 형태로, 서버에서 렌더링된 주소와 구별되지 않습니다. 히스토리 API의 pushState는 페이지를 다시 불러오지 않고 경로를 변경하고, popstate는 뒤로 가기와 앞으로 가기에서 발생하며, 클릭 가로채기는 <a>를 SPA 이동으로 바꿉니다.
서버 설정 필요
경로 기반 라우팅에서는 사용자가 직접 입력하거나 새로 고침할 수 있는 모든 경로에 대해 서버가 SPA의 index.html을 반환해야 합니다. 그렇지 않으면 /about을 새로 고칠 때 404가 발생합니다. 파일을 먼저 찾고, 없으면 index.html로 대체하도록 구성하십시오(Nginx의 히스토리 폴백, Vite 개발 환경의 vite-plugin-history-api).
# Nginx config
location / {
try_files $uri $uri/ /index.html;
}검색 엔진 최적화와 공유
검색 엔진과 많은 도구는 해시 프래그먼트를 전혀 크롤링하지 못하므로, /#/about의 콘텐츠는 오래된 크롤러에 보이지 않습니다(Google은 헤드리스 렌더링으로 처리하지만 다른 크롤러는 그렇지 않을 수 있습니다). 경로 기반 주소는 정상적으로 크롤링되므로 검색 엔진 최적화 측면에서 명백히 더 낫습니다.
사용자 인식
해시 주소는 눈에 띄게 "이상해" 보입니다. 사용자는 #을 보고 링크를 신뢰하지 않거나 전체 주소를 복사하는 일을 잊을 수 있습니다. 경로 주소는 다른 모든 웹 주소처럼 보여 사용자의 기대에 부합합니다. 이러한 이유만으로도 최신 SPA는 거의 항상 경로 기반 라우팅을 선택합니다.
구현 복잡도
해시 기반 방식은 JavaScript 약 10줄(해시 변경 수신기와 렌더링)입니다. 경로 기반 방식은 pushState 호출, popstate 수신기, 링크 클릭 가로채기, 서버 측 폴백이 필요합니다. 해시 방식은 가능한 가장 간단한 선택이고, 경로 방식은 더 나은 사용자 경험을 위해 더 많은 인프라가 필요합니다.
정적 호스팅 고려 사항
순수 정적 호스트(GitHub Pages의 기본 설정)는 서버 측 폴백을 처리할 수 없으므로, 새로 고칠 때 경로 기반 라우팅이 작동하지 않습니다. 해결 방법으로는 404 페이지 리디렉션 방식, Netlify나 Vercel처럼 SPA 폴백을 이해하는 호스트 사용, 또는 정적 호스트만 사용하는 프로젝트에서 해시 기반 방식을 받아들이는 방법이 있습니다.
혼합 접근 방식
일부 앱은 두 방식을 섞습니다. 기본 경로에는 경로 기반 방식을 사용하고, 페이지 내 섹션(모달, 탭 앵커)에는 해시를 사용합니다. 해시 변경 이벤트는 이러한 상태에서 계속 발생하므로, 기본 주소를 복잡하게 만들지 않고 하위 페이지 상태를 처리하는 히스토리 기반 라우터를 보완합니다.
두 방식 간 마이그레이션
해시 기반 방식에서 경로 기반 방식으로 마이그레이션하려면 모든 내부 링크를 다시 작성하고, 서버 폴백을 추가하고, 해시 변경 로직을 popstate 처리로 교체하십시오. 또한 한 번 실행되는 작은 부트스트랩 스크립트로 기존 해시 주소를 해당 경로 주소로 리디렉션하고 히스토리의 replaceState를 호출하십시오.
선택 기준
다시 쓰기 기능이 없는 정적 호스트, 검색 엔진 최적화가 중요하지 않은 내부 관리 도구, 임베드된 위젯에는 해시 기반 방식을 선택하십시오. 사용자에게 공개되는 모든 것, 검색 엔진에 색인되어야 하는 모든 것, 소셜 미디어에서 공유되는 모든 것에는 경로 기반 방식을 선택하십시오. 대부분의 앱이 여기에 해당합니다.
이해도 확인
해시 기반 라우팅에는 필요하지 않은 서버 설정이 경로 기반 SPA 라우팅에는 필요한 이유는 무엇입니까?
요약
해시 기반 라우팅(/#/about과 같은 주소)은 서버 설정이 필요하지 않지만 검색 엔진 최적화가 약하고 주소가 보기 좋지 않습니다. 경로 기반 라우팅(/about과 같은 주소)은 index.html로 연결하는 서버 폴백이 필요하지만 깔끔하고 검색 엔진에 친화적이며 공유하기 좋은 주소를 제공합니다. 최신 공개 SPA는 경로 기반 방식을 사용하고, 정적 호스트나 내부 프로젝트에서는 단순함을 위해 해시 기반 방식을 선택하기도 합니다.
자주 묻는 질문
“해시 기반 라우팅과 경로 기반 라우팅 비교” 강의는 무료인가요?
네 — “해시 기반 라우팅과 경로 기반 라우팅 비교” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“해시 기반 라우팅과 경로 기반 라우팅 비교”에서 뭘 배우나요?
해시 라우팅과 pushState 기반 기록 라우팅 비교하기 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
HTML Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“해시 기반 라우팅과 경로 기반 라우팅 비교” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- pushState 및 replaceState
- popstate 이벤트
- 해시 기반 라우팅과 경로 기반 라우팅 비교
- 최신 브라우저의 Navigation API