싱글페이지 어플리케이션은 하나의 페이지로 만들어진 웹이기 때문에 기본적으론 주소가 변경되지 않는다.

지금 보여주고 있는 화면을 잘 나타내기 위해선 주소에 적절한 정보를 넣어주는 것이 자연스럽다.

때문에 브라우저에서 제공하는 History API를 사용해 임의로 주소를 바꿀 수 있다.

History API

주소 내역는 목록(list)이다. 뒤로가기, 앞으로는 이 목록 안에서 이동하는 것이다.

멀티 페이지 어플리케이션에서 주소를 이동하면 새로운 주소가 자연스럽게 이 목록에 추가되는데

싱글 페이지에서도 History API를 사용해 주소를 추가한다면 뒤로가기, 앞으로 가기 등의 기능을 사용할 수 있다.

이렇게 임의로 만든 주소는 새로고침을 하면 없는 페이지라고 뜬다. 서버사이드 렌더링으로 보안 필요

주소 추가하기

mdn

history.pushState(state, title, url)

// 페이지가 갱신되진 않고 주소만 바뀜
// 뒤로가기가 활성화 됨

state 이동할 페이지에 원하는 데이터를 전달할 수 있음, history.state로 접근

title 아직 브라우저에서 타이틀을 바꾸진 못함, 빈문자열 넣어두기

url 바뀔 주소 (절대경로: /push, 상대경로: push ./push)