History API 라우팅 세트

URL을 상태로 설계

현재 페이지, 필터, 상세 id처럼 공유 가능한 상태는 query나 path에 넣고, 일시적 UI 상태는 history state에 둡니다.

주소 계약

push와 replace 선택

사용자가 뒤로 가기로 돌아가야 하는 이동은 pushState, 리다이렉트나 필터 정규화는 replaceState가 자연스럽습니다.

기록

popstate 복원

브라우저 뒤로 가기와 앞으로 가기에서 URL을 다시 해석해 화면과 데이터 로드를 맞춥니다.

복원

서버 fallback 확인

직접 /users/10으로 접속했을 때 404가 아니라 앱 진입점이 내려와야 SPA route가 작동합니다.

배포

URL 상태

공유, 새로고침, 북마크가 필요한 값 검색어와 페이지 번호처럼 복원되어야 하는 값은 URL에 둡니다.

공개

history state

뒤로 가기 때만 필요한 작은 보조 상태 스크롤 위치나 이전 목록 위치처럼 주소에 드러낼 필요 없는 값입니다.

비공개

서버 route

API와 정적 파일을 제외한 클라이언트 route fallback rewrite 규칙이 없으면 새로고침에서만 깨지는 SPA 문제가 생깁니다.

운영

직접 접근 · 뒤로 가기 · 상태 크기 점검

직접 접근 모든 클라이언트 route를 새 탭으로 열어도 같은 화면이 복원되는지 봅니다.

뒤로 가기 URL은 바뀌는데 화면이 그대로라면 popstate 처리와 router match를 확인합니다.

상태 크기 history state에 큰 객체나 서버 데이터 전체를 넣지 않습니다.

URL 변경 뒤 화면 동기화

function navigate(path) {
  history.pushState(null, '', path);
  renderRoute(location.pathname);
        overflow-wrap: break-word;
        word-break: keep-all;
      }
window.addEventListener('popstate', () => renderRoute(location.pathname));