New

Hash URL

lshjju 2025. 9. 7. 17:13

 

해시(Hash) URL, 즉 URL의 # 뒤에 붙는 부분은 '프래그먼트 식별자(Fragment Identifier)'라고도 불립니다. 

과거 싱글 페이지 애플리케이션(SPA)에서 주로 사용되었으며, 현재는 HTML5 History API의 등장으로 그 활용도가 많이 줄었지만 여전히 몇 가지 중요한 이유와 특징이 있습니다.



해시 URL을 사용하는 이유



서버 요청 없음 (Client-Side Routing 구현):

URL에서 해시 부분만 변경될 때 (예: example.com/#/home에서 example.com/#/about으로 변경), 웹 브라우저는 서버에 새로운 페이지를 요청하지 않습니다.


이는 웹 페이지 전체를 다시 로드하지 않고도 JavaScript를 사용하여 페이지의 특정 부분만 동적으로 변경할 수 있게 합니다. 

이 기능은 초기의 싱글 페이지 애플리케이션(SPA)에서 페이지 전환을 구현하는 핵심 방법이었습니다.

 

결과적으로 사용자에게는 페이지가 전환된 것처럼 보이지만 실제로는 같은 HTML 문서 내에서 콘텐츠만 바뀐 것이므로, 페이지 로딩 속도가 빠르고 사용자 경험이 향상됩니다.



브라우저 히스토리 관리:

해시 값이 변경되면 브라우저의 히스토리 스택에 새로운 엔트리가 추가됩니다.


사용자는 브라우저의 뒤로 가기/앞으로 가기 버튼을 사용하여 SPA 내에서의 "페이지" 이동을 히스토리처럼 사용할 수 있습니다.


북마크 가능성 (Bookmarkability):

특정 해시를 포함한 URL을 북마크할 수 있으며, 해당 북마크로 재접근 시 애플리케이션은 해시 값을 읽어 해당 상태의 페이지를 렌더링할 수 있습니다.


레거시 브라우저 호환성:

HTML5 History API(pushState, replaceState)가 등장하기 전에는 해시를 이용한 라우팅이 SPA에서 브라우저 히스토리와 북마크 기능을 지원하는 거의 유일한 방법이었습니다. 

따라서 구형 브라우저와의 호환성을 위해 사용되었습니다.



 

현재 대부분의 SPA는 해시 URL 대신 HTML5 History API를 사용하여 서버에 요청 없이 URL을 변경하고, URL이 더 깔끔하며 SEO에도 유리한 방식으로 라우팅을 구현합니다. 

다만, 서버 설정을 변경할 수 없는 환경(예: 정적 파일 호스팅)에서는 여전히 해시 URL 방식이 유용하게 사용될 수 있습니다.


'New' 카테고리의 다른 글

Callback function  (0) 2025.09.17
Axios  (0) 2025.09.17
Variables  (4) 2025.08.28
How to Run a Java Program in Command Prompt  (0) 2025.08.27
데이터베이스 테이블의 주요 구성 요소  (3) 2025.08.15