페이지를 이동하게 되면 브라우저는 그것을 따로 기록하고, 그것은 history라고 객체에 들어갑니다.
개발자 도구의 console에서 history를 입력하면 history객체의 정보를 확인할 수 있습니다.
이 history에서 정보를 반환하고 제어할 수 있기 때문에, 다양한 속성과 메소드들을 가지고 있습니다.
.length
등록된 히스토리 개수입니다. 페이지를 몇 번에 걸쳐서 이동해 왔는지에 대한 개수를 확인할 수 있습니다.
.scrollRestoration
history 탐색시 스크롤 위치 복원 여부 확인하거나 지정할 수 있습니다.
.state
현재 history에 등록된 데이터(상태)를 나타냅니다.
.back()
현재 페이지에서 이전 페이지로 갑니다.(뒤로 가기)
.forward()
현재 페이지에서 앞 페이지로 이동합니다.(앞으로 가기)
.go(위치)
현재 페이지 기준 특정 history 위치로 한 번에 이동합니다.
.pushState(상태, 제목, 주소)
history에 상태 및 주소를 추가하거나 바꿀 수 있습니다.
첫번째 인수로 지정하고 싶은 데이터(상태),
두 번째 인수인 제목은 Safari브라우저 제외하고 모든 브라우저에서 제목 부분의 옵션을 따로 사용하고 있지 않습니다.
제목 옵션은 무시되고 있기 때문에 제목 부분에는 단순하게 빈 문자만 추가합니다. 사실상 동작하지 않지만, 인수로 데이터를 넣어줘야 세 번째 부분에 주소를 추가할 수 있습니다.
history의 내용이 누적됩니다.
.replaceState(상태, 제목, 주소)
pushState와 유사하지만, pushState는 history가 누적되는 반면에 replaceState는 현재 페이지에 대한 history 정보를 제거하면서 새롭게 추가되는 개념이므로, 결국 교체가 되는 개념입니다.
