Hash URL

 

🟡 Hash URL (Fragment Identifier)

URL에서 # 뒤에 오는 부분을 해시(Hash) 또는 프래그먼트 식별자(Fragment Identifier, Fragment) 라고 한다.

 

◼️ 원래 용도 (앵커 이동)

Hash는 원래 HTML 문서 내부의 특정 위치로 이동하기 위해 만들어졌다.

<h2 id="chapter3">3장</h2>

<a href="#chapter3">3장으로 이동</a>

https://example.com/page.html#chapter3

• 위 URL에 접속하면 브라우저는 id="chapter3"인 요소까지 자동으로 스크롤한다. SPA가 등장하면서 이 기능을 라우팅 용도로 활용하게 된 것이다.

 

◼️ 주요 특징

1️⃣ 서버에 새로운 페이지를 요청하지 않음 (Client-Side Routing)

URL의 해시(#) 부분만 변경되면 브라우저는 서버에 새로운 HTML 문서를 요청하지 않아 페이지 전체가 새로고침되지 않고, 브라우저 단에서 화면이 전환된다.

https://example.com/#/home
        ↓
https://example.com/#/about

• 동작 순서:
  1. URL 변경: 사용자의 상호작용으로 URL의 Hash 값 변경.
  2. 이벤트 감지: 브라우저에서 hashchange 이벤트 발생.
  3. 화면 갱신: JavaScript가 변경된 Hash를 인식하여 해당하는 컴포넌트(화면)만 부분 렌더링.
• 참고: 화면 전환을 위한 HTML 문서 자체는 다시 요청하지 않지만, 필요한 데이터 처리를 위해 JavaScript가 API 요청(Fetch, AJAX 등)을 수행할 수는 있다.

 

2️⃣ 브라우저 히스토리 지원

해시 값이 변경될 때마다 브라우저의 History Stack에 새로운 기록이 추가된다.

따라서 사용자는 뒤로가기, 앞으로가기 버튼을 이용하여 SPA 내부의 화면 이동을 자연스럽게 사용할 수 있다.

 

3️⃣ 북마크 및 URL 공유

현재 화면의 해시 값을 포함한 URL을 그대로 복사하거나 북마크할 수 있다.

다시 접속하면 JavaScript가 해시 값을 읽어 동일한 화면을 다시 표시할 수 있다.

 

4️⃣ 정적 호스팅 환경에서 사용 가능

History API는 서버 설정이 필요하지만, Hash URL은 서버 설정 없이도 라우팅이 가능하다.

그래서 GitHub Pages, 단순 정적 웹사이트, 서버 설정을 변경할 수 없는 환경 등에서는 지금도 많이 사용된다.

 

◼️ History API와의 차이

현재 대부분의 React, Vue, Angular 등의 SPA는 Hash 방식 대신 HTML5 History API를 사용한다.

• Hash 방식: https://example.com/#/products/10
• History API 방식: https://example.com/products/10

History API는 실제 웹사이트 URL처럼 자연스럽게 사용할 수 있으며, SSR(Server Side Rendering), SSG(Static Site Generation) 등과 함께 사용하기 쉽고, 검색 엔진이 일반 URL처럼 인식하기 때문에 SEO에 유리하다.

서버에서 /products/10처럼 직접 접근한 요청도 index.html을 반환하도록 설정해야 한다.

 

 

📋 Hash URL vs HTML5 History API 📋

구분	Hash URL	HTML5 History API
URL 형태	example.com/#/home	example.com/home
서버 요청	Hash 변경 시 문서 재요청 없음	pushState 호출 자체는 서버 요청 없음
서버 설정	필요 없음	필요함 (모든 경로 처리)
URL 가독성	상대적으로 깔끔하지 않음	실제 URL처럼 자연스러움
SEO	제한적	SSR·SSG와 함께 사용 시 유리
현재 사용	정적 호스팅, 레거시 SPA	대부분의 최신 SPA