Client Side Routing

• 브라우저 기본 뒤로가기 / 앞으로가기 버튼을 사용해 페이지를 이동 가능하다
• 브라우저에서는 새로운 HTTP응답을 받은 웹 페이지를 렌더링할 때마다 history에 남긴다

SPA

• 새로운 페이지 전체를 렌더링하지 않고 부분적인 UI만을 렌더링한다
• 특정한 컨디션에 특정한 UI를 보여주는 원리

→ 브라우저가 이 정보에 대한 이력을 별도로 남기지 않고 history가 관리되지 않는다

history API

• JS로 history를 관리할 수 있다
• 스택 형태로 구현되어있다
• popstate 이벤트(history 관련 액션 수행 시 발생)로 사용자가 pushState를 통해 입력한 데이터를 확인 가능

1) pushState

• 저장할 URL 정보를 넣어줘서 브라우저에서 새로운 history를 기억한다
• 해당 페이지를 렌더링할때 필요한 데이터도 포함할 수 있다

history.pushState(state, title, url);
// state : 브라우저 이동 시 넘겨줄 데이터
// title : 변경할 브라우저 제목
// url : 변경할 주소

2) replaceState

• pushState와 달리 히스토리 스택을 쌓는 것이 아니라 현재의 히스토리 엔트리를 변경

history.replaceState(state, title, url);
// state : 브라우저 이동 시 넘겨줄 데이터
// title : 변경할 브라우저 제목
// url : 변경할 주소