새로운 포탈을 엽니다. 주소창은 바뀌지만 우주는 다시 만들어지지(새로고침) 않습니다. 포탈을 넘어갈 때마다 뒤로 갈 수 있는 '발자국(히스토리 스택)'이 하나씩 쌓입니다.
사용자가 브라우저의 뒤로가기 버튼을 눌렀을 때 발동하는 알람입니다. 자바스크립트는 이 알람을 듣고 남겨진 발자국(이전 상태 객체)을 확인하여 과거 화면을 복원합니다.
| API 형태 | 역할 및 설명 |
|---|---|
history.pushState(state, title, url) |
새로운 상태 객체와 함께 주소창의 URL을 변경합니다. 히스토리 스택에 새 기록이 추가되므로 브라우저 뒤로가기 버튼이 활성화됩니다. |
history.replaceState(state, title, url) |
새 기록을 추가하지 않고, 현재 히스토리 기록을 덮어씌우며 URL을 변경합니다. (리다이렉트 처리 등에 유용) |
window.onpopstate = () => {} |
브라우저의 뒤로가기/앞으로가기 버튼을 누르거나 history.back()이 호출될 때 발생하는 이벤트입니다. pushState로 넣었던 state 객체를 꺼내 쓸 수 있습니다. |
<!-- NO_PREVIEW -->
<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>