[책] 자바스크립트 코드 레시피 278 - 89일차

해시(#) 처리하기

• 딥 링크(Deep Link)를 구현하고 싶을 때
• 해시값에 따라 처리를 구분하고 싶을 때

구문

location.hash 앵커 달기

실습

location.hash 속성으로 앵커 기능을 사용할 수 있습니다. 앵커는 페이지 내부의 링크 기능을 하며, 읽기와 쓰기 모두 가능합니다.

const hash = location.hash;
console.log(hash)
hash = 'app';

단일 페이지 애플리케이션에서 페이지의 계층을 나타내기 위해 앵커를 사용하기도 합니다. 단일 웹 페이지 내에서 여러 화면으로 표시하고 싶을 때 hash로 기능을 편리하게 구현할 수 있습니다. 응용 예로 웹 페이지 내에서 앵커를 사용해 스크롤을 조절하는 기능이 가능합니다. 앵커 값이 변경되면 대상 id 요소를 확인하고 페이지의 스크롤을 조절하여 원하는 화면을 표시합니다.