Web Basic · Routing

History API로 URL과 화면 맞추기

History API는 주소창을 꾸미는 기능이 아니라, 브라우저 히스토리 스택과 화면 상태를 함께 관리해 SPA 라우팅을 가능하게 한다.

01

이동 요청

사용자가 링크를 누르면 기본 문서 이동을 막고 앱 라우터가 URL을 바꾼다.

02

기록 추가

pushState가 새 URL과 state 객체를 히스토리 스택에 넣는다.

03

화면 렌더

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

04

뒤로 이동

popstate 이벤트에서 URL을 읽고 같은 라우트 계산을 다시 수행한다.

pushState
새 페이지처럼 이동 목록에서 상세로 들어가는 명확한 이동
뒤로가기가 이전 화면으로 돌아감
replaceState
현재 기록 수정 필터 초기화, redirect, 로그인 후 URL 정리에 사용
뒤로가기 기록을 늘리지 않음
popstate
브라우저 탐색 대응 뒤로·앞으로 버튼에 맞춰 화면 상태 복원
pushState 호출 자체에는 발생하지 않음
Server fallback
직접 접근 처리 /products/1 새로고침 시 앱 HTML을 반환
정적 호스팅 rewrite 필요

새로고침 · 뒤로가기 · 상태 위치 점검

새로고침 깊은 경로에서 새로고침해도 404가 나지 않는다.
뒤로가기 화면과 URL이 함께 이전 상태로 돌아간다.
상태 위치 공유 가능한 필터와 페이지 번호는 URL에 남긴다.
접근성 라우트 전환 후 초점과 제목이 적절히 갱신된다.