콘텐츠로 이동

Joel's TIL

2023 08 10

2023 08 10

2023-08-10¶

History API¶

참고: https://www.youtube.com/watch?v=Y1eHAE7D7s8

back(), forward(), go()
- 히스토리 스택을 조작
- back()
  - 뒤로가기
- forward()
  - 앞으로가기
- go()
  - 매개변수 만큼 왔다갔다, 마이너스 뒤로 플러스 앞으로

pushState(), replaceState()
- 주소창 url 조작
- pushState()
  - stateObj, title, url
    - stateObj가 스택에 들어가요!
    - 이걸 적절히 나중에 빼서 쓰기 좋아요
  - 스택에 푸시 새로 넣어!
- replaceState()
  - stateObj, title, url
    - stateObj가 스택에 들어가요!
    - 이걸 적절히 나중에 빼서 쓰기 좋아요
  - 현재 state만 바꿔줘!
    - pop & push

window.onpopstate
- callback function
```
window.onpopstate = (
    function(event) {
        const {state} = event;
    }
)
```
- 같은 웹사이트에서 이동할때 이게 호출됩니다!
  - window가 달라지면 무용지물이겠지?

state, length
- history 객체의 변수

뒤로가기 막기

// 스택 추가
history.pushState(null, null, location.href);

// 현재 페이지로 이동
window.onpopstate = function() {
    history.go(1)
}

popstate¶

참고: https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event

개요
- Window 인터페이스이며 active history entry가 변할 때 호출된다. (유저가 세션 히스토리를 검색하는 과정에서)
- 현재의 history entry를 유저가 방문한 마지막 페이지로 변동시킨다.
- 혹은 history.pushState()를 통해 히스토리 엔트리가 히스토리 스택에 쌓였다면, 해당 엔트리가 사용된다.

History Stack
- 히스토리 엔트리가 history.pushState()를 통해 활성화되었거나, history.replaceState()를 통해 활성화 되었다면
- history.pushState() 혹은 history.replaceState()를 호출하는 것만으로 popstate 이벤트가 호출되진 않아
- popstate 이벤트는 브라우저 액션 (백버튼, 앞버튼)을 통해서 발생해
- 브라우저마다 다르게 popstate 액션을 다르게 처리하는 경향이 있어
  - 크롬/사파리는 popstate를 페이지 로드 시점에 항상 발생시키지만, 파폭은 안그래

언제 popstate가 호출되는가
- 사용자가 인터랙션이 없었던, 원하지 않는 팝업들은 브라우저가 popstate를 호출하지 않을 수 있어
- 인터랙션이 있어야 popstate가 호출된다는 점...
  - navigation이 호출되면, popstate는 새로운 로케이션으로 이동하는 거의 마지막 단계에 있어.
  - 이는 다음과 같은 일들이 발생하고 호출돼
    - new location has loaded
    - displayed
    - made visible
- popstate 이벤트가 언제 호출되는지를 이해하기 위해 다음과 같은 간소화된 순서를 따라가보자. (유저가 갔던, 프로그래밍적으로 이동을 했던)
  - new-entry: 현재 히스토리가 전환
  - current-entry: 현재 페이지의 세션 히스토리 스택

react-router navigate¶

참고: https://stackoverflow.com/questions/72794430/what-does-usenavigate-replace-option-do

replace
- navigate(path, {replace: true})
  - 현재 엔트리를 히스토리 스택에 두지 않고

replace 와 href¶

replace
- 다음과 같은 플로우
  1. 네이버 페이지
  2. 서비스 페이지
    - 여기서 본인인증 페이지를 window.location.replace로 이동
  3. 본인인증 페이지
- qs) 3. 본인인증 페이지에서 백버튼을 누르면?
  - 1. 서비스 페이지에 대한 히스토리는 쌓이지 않기에 1. 네이버 페이지로 이동한다.

href - 다음과 같은 플로우 1. 네이버 페이지 2. 서비스 페이지 - 여기서 본인인증 페이지를 window.location.href로 이동 3. 본인인증 페이지 - qs) 3. 본인인증 페이지에서 백버튼을 누르면? - 2. 서비스 페이지에 대한 히스토리는 쌓여 있지롱 2. 서비스 페이지로 이동한다.