Web Basic · History

History API로 URL과 화면 상태를 맞추기

History API는 주소창 글자를 바꾸는 기능이 아니라, 브라우저 히스토리 스택과 SPA 화면 상태를 같은 이동 경험으로 묶는 인터페이스다.

01

이동 요청

내부 링크 클릭을 앱 라우터가 받아 문서 전체 이동을 막는다.

02

기록 갱신

pushState나 replaceState로 URL과 state 객체를 갱신한다.

03

화면 선택

현재 pathname과 query에 맞는 화면과 데이터를 선택한다.

04

탐색 복원

popstate 이벤트에서 뒤로가기와 앞으로가기를 화면으로 반영한다.

pushState
새 이동 목록에서 상세로 가는 등 되돌릴 기록 추가
뒤로가기 스택 증가
replaceState
현재 기록 수정 redirect나 필터 초기화처럼 기록을 늘리지 않을 때
로그인 후 URL 정리
popstate
탐색 이벤트 브라우저 버튼으로 URL이 바뀔 때 화면 복원
pushState 자체에는 발생하지 않음
rewrite
서버 fallback 깊은 경로 새로고침 시 앱 HTML 반환
정적 호스팅 설정

직접 접근 · 뒤로가기 · 공유 점검

직접 접근 깊은 URL로 새로고침해도 404가 아니다.
뒤로가기 URL과 화면이 함께 이전 상태로 돌아간다.
공유 공유해야 하는 필터와 페이지는 URL에 남는다.
초점 라우트 전환 후 제목과 focus가 갱신된다.