History API | Minstudio

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

History API는 브라우저의 세션 기록(Session History)을 조작할 수 있게 해주는 기능입니다.
과거에는 다른 페이지로 이동하려면 무조건 서버에 새 HTML을 요청하여 화면 전체가 하얗게 깜빡여야(Refresh) 했지만, History API를 사용하면 페이지 깜빡임 없이 주소창의 URL만 변경하고, 자바스크립트로 필요한 화면 영역만 부드럽게 교체할 수 있습니다. 이것이 React, Vue 등의 프레임워크가 SPA를 구현하는 원리입니다.

1. 순간이동 포탈과 발자국 (비유)

🌀

새로운 공간 창조 (pushState)

새로운 포탈을 엽니다. 주소창은 바뀌지만 우주는 다시 만들어지지(새로고침) 않습니다. 포탈을 넘어갈 때마다 뒤로 갈 수 있는 '발자국(히스토리 스택)'이 하나씩 쌓입니다.

⏪

발자국 되돌리기 (popstate)

사용자가 브라우저의 뒤로가기 버튼을 눌렀을 때 발동하는 알람입니다. 자바스크립트는 이 알람을 듣고 남겨진 발자국(이전 상태 객체)을 확인하여 과거 화면을 복원합니다.

2. SPA 동작 흐름 (Diagram)

3. 필수 메서드 및 이벤트

API 형태	역할 및 설명
`history.pushState(state, title, url)`	새로운 상태 객체와 함께 주소창의 URL을 변경합니다. 히스토리 스택에 새 기록이 추가되므로 브라우저 뒤로가기 버튼이 활성화됩니다.
`history.replaceState(state, title, url)`	새 기록을 추가하지 않고, 현재 히스토리 기록을 덮어씌우며 URL을 변경합니다. (리다이렉트 처리 등에 유용)
`window.onpopstate = () => {}`	브라우저의 뒤로가기/앞으로가기 버튼을 누르거나 `history.back()`이 호출될 때 발생하는 이벤트입니다. `pushState`로 넣었던 `state` 객체를 꺼내 쓸 수 있습니다.

<div class="spa-app"> <nav class="navbar"> <div class="logo">🚀 MinSPA</div> <ul class="nav-links"> <li><a href="/" class="nav-link" data-path="/">홈</a></li> <li><a href="/profile" class="nav-link" data-path="/profile">프로필</a></li> <li><a href="/settings" class="nav-link" data-path="/settings">설정</a></li> </ul> </nav> <main id="app-content" class="content-area">  </main> <div class="history-log"> <strong>히스토리 스택 상태:</strong> <span id="historyLength">1</span>개 </div> </div>

API 형태

역할 및 설명

history.pushState(state, title, url)

새로운 상태 객체와 함께 주소창의 URL을 변경합니다. 히스토리 스택에 새 기록이 추가되므로 브라우저 뒤로가기 버튼이 활성화됩니다.

history.replaceState(state, title, url)

새 기록을 추가하지 않고, 현재 히스토리 기록을 덮어씌우며 URL을 변경합니다. (리다이렉트 처리 등에 유용)

window.onpopstate = () => {}

브라우저의 뒤로가기/앞으로가기 버튼을 누르거나 history.back()이 호출될 때 발생하는 이벤트입니다. pushState로 넣었던 state 객체를 꺼내 쓸 수 있습니다.