▶ JavaScript Web APIs

JavaScript Web History API

JavaScript Web History API: 브라우저 히스토리 관리하기

JavaScript Web History API는 웹 브라우저의 세션 기록을 관리하고 조작하는 기능을 제공합니다. 이 API를 사용하면 사용자가 방문한 페이지를 탐색할 수 있도록 지원하고, 사용자 경험을 개선할 수 있습니다. 이 가이드는 Web History API의 개념, 주요 메서드, 사용 예제에 대해 설명합니다.

1. Web History API란?

Web History API는 브라우저의 히스토리를 조작할 수 있는 인터페이스입니다. 이 API를 통해 페이지의 히스토리를 탐색하거나 새로운 상태를 추가할 수 있습니다. 이를 통해 단일 페이지 애플리케이션(SPA)이나 동적 웹 페이지에서의 사용자 경험을 향상시킬 수 있습니다.

1.1. 주요 메서드

history.back(): 이전 페이지로 이동합니다.
history.forward(): 다음 페이지로 이동합니다.
history.go(n): 기록 목록에서 지정한 위치로 이동합니다. 양수를 전달하면 앞으로, 음수를 전달하면 뒤로 이동합니다.
history.pushState(state, title, url): 새 상태를 기록 목록에 추가합니다.
history.replaceState(state, title, url): 현재 상태를 새 상태로 교체합니다.

2. History API 사용 예제

History API의 주요 메서드를 사용하여 브라우저 히스토리를 조작하는 예제를 살펴보겠습니다.

2.1. 이전 및 다음 페이지 탐색

<button id="backButton">Back</button>
<button id="forwardButton">Forward</button>

<script>
  document.getElementById('backButton').addEventListener('click', () => {
      history.back();  // 이전 페이지로 이동
  });

  document.getElementById('forwardButton').addEventListener('click', () => {
      history.forward();  // 다음 페이지로 이동
  });
</script>

이 코드는 "Back" 버튼을 클릭하면 이전 페이지로, "Forward" 버튼을 클릭하면 다음 페이지로 이동합니다.

2.2. go() 메서드 사용하기

<button id="goBack">Go Back</button>
<button id="goForward">Go Forward</button>
<button id="goToPage">Go to Page 2</button>

<script>
  document.getElementById('goBack').addEventListener('click', () => {
      history.go(-1);  // 이전 페이지로 이동
  });

  document.getElementById('goForward').addEventListener('click', () => {
      history.go(1);  // 다음 페이지로 이동
  });

  document.getElementById('goToPage').addEventListener('click', () => {
      history.go(2);  // 2 페이지 앞으로 이동
  });
</script>

이 코드는 "Go Back"과 "Go Forward" 버튼을 클릭하면 각각 이전 및 다음 페이지로 이동하고, "Go to Page 2" 버튼을 클릭하면 현재 페이지에서 두 페이지 앞으로 이동합니다.

3. 상태 관리

History API의 강력한 기능 중 하나는 pushState() 및 replaceState() 메서드를 사용하여 웹 애플리케이션의 상태를 관리할 수 있다는 것입니다.

3.1. pushState() 사용하기

<button id="addState">Add State</button>

<script>
  document.getElementById('addState').addEventListener('click', () => {
      const state = { page: 'Page 1' };
      const title = 'Page 1';
      const url = '/page1';  // 새로운 URL

      history.pushState(state, title, url);  // 새로운 상태 추가
      console.log('State added:', state);
  });
</script>

이 코드는 버튼을 클릭할 때마다 새로운 상태를 기록 목록에 추가합니다.

3.2. 상태 변경 감지하기

window.onpopstate = function(event) {
    if (event.state) {
        console.log('State:', event.state);  // 상태 출력
    } else {
        console.log('No state found');
    }
};

이 코드는 사용자가 브라우저의 뒤로 가기 버튼을 클릭할 때마다 popstate 이벤트가 발생하며, 해당 상태를 출력합니다.

3.3. replaceState() 사용하기

<button id="replaceState">Replace State</button>

<script>
  document.getElementById('replaceState').addEventListener('click', () => {
      const state = { page: 'Page 2' };
      const title = 'Page 2';
      const url = '/page2';  // 새로운 URL

      history.replaceState(state, title, url);  // 현재 상태를 교체
      console.log('State replaced:', state);
  });
</script>

이 코드는 버튼 클릭 시 현재 상태를 새로운 상태로 교체합니다.

4. 주의사항

4.1. 같은 출처 정책

History API는 같은 출처 정책을 따릅니다. 즉, 도메인, 프로토콜 및 포트가 동일한 경우에만 URL을 변경할 수 있습니다.

4.2. 브라우저 호환성

대부분의 최신 브라우저는 History API를 지원하지만, 구형 브라우저에서는 이 기능을 지원하지 않을 수 있습니다. 따라서 기능 사용 시 브라우저 호환성을 고려해야 합니다.

4.3. URL 변경

pushState()와 replaceState() 메서드는 URL을 변경할 수 있지만, 페이지를 새로 고침하지 않고도 이 작업을 수행할 수 있습니다. 이는 SPA(Single Page Application)에서 매우 유용하게 사용됩니다.

요약

JavaScript Web History API는 웹 애플리케이션의 히스토리를 관리하고 조작하는 데 필요한 메서드를 제공합니다. 이를 통해 사용자는 더 나은 탐색 경험을 제공받고, 단일 페이지 애플리케이션에서 상태를 효율적으로 관리할 수 있습니다.

주요 메서드: history.back(), history.forward(), history.go(n), history.pushState(), history.replaceState().
상태 관리: 상태를 추가하거나 교체하여 애플리케이션의 사용자 경험을 개선할 수 있습니다.

JavaScript의 Web History API를 활용하여 유연하고 효율적인 웹 애플리케이션을 개발할 수 있습니다.

코딩 스쿨 JavaScript