History API

싱글 페이지 애플리케이션(SPA)의 핵심

History API는 브라우저의 세션 기록(Session History)을 조작할 수 있게 해주는 API입니다. 페이지를 새로고침하지 않고도 URL을 변경하고 브라우저의 뒤로가기/앞으로가기 버튼과 연동할 수 있어, React, Vue, Angular와 같은 싱글 페이지 애플리케이션(SPA) 라우팅의 핵심 기반이 됩니다.

주요 메서드:

기능/특징	설명
pushState()	새로운 상태를 히스토리 스택에 추가하고 URL을 변경합니다.
replaceState()	현재 히스토리 상태를 덮어쓰고 URL을 변경합니다.
popstate 이벤트	사용자가 뒤로가기/앞으로가기 버튼을 클릭할 때 발생합니다.

// History API를 이용한 간단한 SPA 라우팅 예제

// 1. 상태 추가 및 URL 변경 (페이지 새로고침 없음)
const stateObj = { pageId: 'dashboard' };
history.pushState(stateObj, '', '/dashboard');
console.log("URL이 /dashboard로 변경되었습니다.");

// 2. 뒤로가기/앞으로가기 이벤트 감지
window.addEventListener('popstate', (event) => {
  if (event.state) {
    console.log("현재 페이지 상태:", event.state.pageId);
    // 상태에 따라 화면을 다시 렌더링하는 로직 호출
  } else {
    console.log("초기 페이지로 돌아왔습니다.");
  }
});

// 참고: 실행 환경에 따라 history 조작 시 보안 에러가 발생할 수 있습니다. 
// 실제 사용 시 서버 설정(모든 경로를 index.html로 라우팅)이 동반되어야 합니다.