브라우저 History API 를 활용하는 방법

History API 로 작업하기 (History API 활용 방법)

• History API 를 이용하면, 브라우저의 세션 기록과 상호작용할 수 있다.
• 세션 기록이란, 브라우저에서 사용자가 방문했던 페이지를 기록한 것을 말한다.
• 일반 사용자는 앞으로 가기, 뒤로 가기 버튼을 통해 세션 기록을 이용한다.

History API 제공 메서드

• 페이지를 이동하는 메서드는 직관적으로 이해가 쉬우나, 기록된 페이지를 수정하는 메서드들은 잘 활용하기 위해 약간의 학습이 필요하다.
• 이 API 의 주요 목적은 fetch() 같은 메서드를 통해 업데이트 되는 SPA(Single Page Application)와 같은 웹사이트를 지원하기 위한 것이다.

기록된 페이지로 이동

• History.back()
• History.forward()
• History.go()

기록된 페이지를 수정

• History.pushState(): 세션 기록에 새 항목을 추가
• History.replaceState(): 세션 기록 항목을 업데이트

SPA 와 세션 히스토리

• MPA (Multi Page Application) 는 매번 페이지가 변화한다.
• SPA 는 현재 상태를 유지하면서 필요한 부분을 변화시킨다.

SPA 에서 문제가 되는 부분

• 페이지가 바뀌고 뒤로가기 버튼을 눌렀을 때, 이 전 렌더링 단계로 가는 것이 아니라 아예 최초의 페이지로 돌아간다.
• 이를 해결하기 위해 pushState(), replaceState(), popState 이벤트가 존재한다.

pushState() 사용 예제

• 아래는 pushState() 의 사용 예제인데, 3가지 인자를 갖는다.
  • json: 해당 렌더 시점에서 사용한 상태 값을 기억해둔다.
  • "": 레거시 사이트와 이전 버전의 호환성을 위해 필요하며, 항상 빈 문자열이어야 한다.
  • creature: 엔트리의 URL 로 사용된다. 브라우저의 URL 바에 표기되며, 페이지에서 발생하는 모든 HTTP 요청에서 Referer(https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer) 헤더 값으로 사용된다.
    • 이 값은 페이지와 무조건 same-origin 이어야 한다.

document.addEventListener("click", async (event) => {
  const creature = event.target.getAttribute("data-creature");
  if (creature) {
    event.preventDefault();
    try {
      const response = await fetch(`creatures/${creature}.json`);
      const json = await response.json();
      displayContent(json);
      // Add a new entry to the history.
      // This simulates loading a new page.
      history.pushState(json, "", creature);
    } catch (err) {
      console.error(err);
    }
  }
});

popState() 사용 예제

• popstate 이벤트는 뒤로 가기 혹은 앞으로 가기를 수행했을 때 일어난다.
• 이전 pushState() 에서 기록해둔 state 를 통해 다시 이전의 화면을 복원할 수 있다.
• document 가 아닌 window 객체에 걸어야 함을 잘 살피자

// Handle forward/back buttons
window.addEventListener("popstate", (event) => {
  // If a state has been provided, we have a "simulated" page
  // and we update the current page.
  if (event.state) {
    // Simulate the loading of the previous page
    displayContent(event.state);
  }
});

replaceState() 사용 예제

시나리오

• 초기에 페이지 로드가 발생한다.
• 사용자는 SPA 내부의 링크를 클릭하여 다른 페이지로 이동한다. pushState() 를 사용하여 히스토리 항목을 추가한다.
• 뒤로가기 버튼을 누른다.

이 때, 초기 상태로 돌아가고 싶지만, 동일한 문서 탐색이라 초기 페이지로 돌아가지 않는다.
이 상황을 replaceState() 를 통해 해결할 수 있다.

// Create state on page load and replace the current history with it
const image = document.querySelector("#photo");
const initialState = {
  description: document.querySelector("#description").textContent,
  image: {
    src: image.getAttribute("src"),
    alt: image.getAttribute("alt"),
  },
  name: "Home",
};
history.replaceState(initialState, "", document.location.href);

레퍼런스

https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API