history API

• 브라우저에서 페이지 로딩을 하면, 세션 히스토리라는 것을 갖게 된다.
• 세션 히스토리는 페이지를 이동할 때마다 쌓임
• 이를 통해 뒤로가기, 앞으로 가기가 가능해진다

History API

• 화면 이동 없이 브라우저의 현재 url을 변경 가능

• history 전역 객체를 통해 브라우저 세션 히스토리에 대한 접근 제공

• 방문 기록을 앞뒤로 탐색하고, 기록 스택의 내용을 조작 가능한 메서드와 속성

• 세션 기록 내 다른 페이지의 URL을 알 수 없음, 그러나 탐색은 ㄱㄴ

• querystring도 자유롭게 붙일 수 있음

• 필요한 로직
1. pushstate하는 이벤트 처리(1. 클릭이벤트 2. 뒤로가기 이벤트)
2. pathname마다 렌더링 처리

• history api로 url을 변경한 후 새로고침 하면, 실제 경로에 페이지가 있는 것은 아니므로 404에러가 난다.
• 보통 루트 페이지(index.html)가 보이게 처리!
• history API 를 쓰는 페이지는 모두 해당, (hashbang은 해당 x)

<메서드>

1. pushState : 세션 히스토리(스택)에 새 url의 state를 쌓음

pushState(state, unused[, url])

• 페이지가 이동(되는 것과 같이)된다
• state : history.state에서 꺼내쓸 수 있는, 새로운 기록 항목과 관련된 JavaScript 객체
• unused : 이 매개변수는 거의 대부분의 브라우저에서 지원하지 않는다. 하지만 역사적인 이유로 존재해서 생략할 수 없으므로, 빈 문자열을 전달
• url : 세션 히스토리에 추가할 URL.
• Optional임. 이 매개변수가 지정되지 않으면, 문서의 현재 URL
• url이 변경된다고 해서 화면이 리로드 되지 x (cf. a 태그, location.href)
• 경로가 상대 경로일 수 있다.(현재 URL을 기준으로)
• 새로운 URL은 현재 URL과 같은 출처(스킴, 호스트, 도메인, 포트)여야 함. (그렇지 않으면 예외를 발생)

2. replaceState : 세션 히스토리에 새 url의 state를 쌓지 않고, 현재 url의 state를 대체
• replace 후에 현재 url state로 이동하는 것을 막는다.

replaceState(state, unused[, url])

3. back() : 뒤로가기

4. forward() : 앞으로가기

5. go(idx) : 상대적인 위치 이동(현재 페이지 idx 0)
• idx가 없거나 0이면 새로고침

<속성>

1. length : 기록 스택의 페이지 수

2. scrollRestoration : 기록 탐색 시 사용할 스크롤 위치 복원 기능의 기본값
• "auto" : 페이지 내에서 사용자의 스크롤이 위치했던 장소로 복원
• "manual" : 스크롤을 복원X

• popstate이벤트
• 브라우저의 백버튼튼이나 back메서드 호출을 통해서 발생
• pushstate()나 replacestate()는 발생시키지 x

• history API는 hashbang을 대신
• hashbang
• url에 #fragment_identifier 구조로 넣는 것이다.
• history API와 같이 SPA(단일 페이지 애플리케이션) 구현을 위함
• 지금은 거의 쓰이지 x

• element의 속성을 객체 속성을 가져오는 것 처럼 {}로 뺄 수 있다.
• == element.getAttribute(””)
• ex)

<a href=”/product-list”>product list</a>
...
const { href } = e.target //href는 문자열