소개
브라우저 객체 모델(Browser Object Model, BOM)은 자바스크립트를 사용하여 브라우저의 창, 문서, 이력 등을 관리할 수 있는 API를 제공합니다. 이 중에서도 히스토리 관리는 웹 애플리케이션의 사용자 경험을 향상시키기 위해 매우 중요한 요소입니다.
이번 글에서는 BOM의 window.history 객체를 활용하여 브라우저의 히스토리를 관리하는 방법에 대해 알아보도록 하겠습니다.
BOM의 window.history 객체
window.history 객체는 현재 브라우저 창의 히스토리 정보를 관리하는 API를 제공합니다. 이 객체를 사용하면 뒤로 가기, 앞으로 가기, 히스토리 이동 등의 동작을 제어할 수 있습니다.
주요 메서드
- back(): 브라우저의 히스토리에서 이전 페이지로 이동합니다.
- forward(): 브라우저의 히스토리에서 다음 페이지로 이동합니다.
- go(n): 브라우저의 히스토리에서 n번째 페이지로 이동합니다. 음수 값을 사용하면 이전 페이지로 이동하고, 양수 값을 사용하면 다음 페이지로 이동합니다.
- pushState(state, title, url): 새로운 상태를 히스토리에 추가합니다. 상태는 페이지 변경 시 브라우저에 제공되는 데이터이며, title은 변경된 페이지의 제목, url은 변경된 페이지의 URL입니다.
- replaceState(state, title, url): 현재 히스토리 상태를 변경합니다. pushState()와 비슷하지만, 새로운 상태를 추가하는 대신 현재 상태를 변경합니다.
예제
아래는 pushState() 메서드를 사용하여 새로운 상태를 히스토리에 추가하는 예제입니다. 상태 변경 시 페이지의 URL이 변하지 않고, 브라우저 히스토리에는 새로운 상태가 추가됩니다.
window.history.pushState({page: 1}, "Page 1", "/page1");
위 예제에서는 page라는 키와 1이라는 값으로 구성된 상태를 히스토리에 추가하고, 페이지의 제목을 “Page 1”로 설정하며, URL을 “/page1”로 지정했습니다.
히스토리의 상태를 변경하고 나면, popstate 이벤트를 사용하여 상태가 변경된 것을 감지하고 처리할 수 있습니다.
window.addEventListener("popstate", function(event) {
console.log("State changed:", event.state);
});
위 예제에서는 popstate 이벤트가 발생하는 경우, 상태가 변경된 것을 콘솔에 출력합니다.
결론
BOM의 window.history 객체는 브라우저의 히스토리를 관리하는 데 유용한 API를 제공합니다. pushState()와 replaceState() 메서드를 활용하여 히스토리에 새로운 상태를 추가하고, popstate 이벤트를 사용하여 상태 변경을 감지할 수 있습니다.
웹 애플리케이션 개발 시 히스토리 관리를 고려하여 사용자 경험을 향상시키는 것이 중요하므로, BOM의 window.history 객체를 적절히 활용해 보시기 바랍니다.
References:
#BOM #JavaScript