정리의 이유

SPA 없이 뒤로가기나 페이지 이동을 해야 할 경우가 있다.
특히 origin 이 다른 경우 spa를 사용할수가 없다. 예시 google.com에서 naver.com으로 origin을 다르게 이동하고자 할때 이를 구현하기 위해 에러를 직면하고 history API나 window. API 를 이용하게 되었는데
페이지를 이동할수 있다는 것만 알고 있었고 나머지에 대해서는 잘 알지 못해서 공부하면서 정리를 하게 되었다.
또한 , 뒤로가기 할 경우 히스토리를 쌓아야 되는 경우와 히스토리를 쌓으면 안되는 경우가 있어서 찾아보고 공부하게 되었다.

history API

브라우저에서 페이지 로딩을 하면 세션 히스토리를 갖는데 이를 stack으로 관리를 하고 뒤로 가기 앞으로 가기 이동할때 stack의 정보를 가지고 이동하게 된다.

history API는 크게 두가지가 있다.

• pushState: 세션 히스토리에 새 url 상태를 쌓는다.
• replaceState: 세션 히스토리에 새 url상태를 쌓지 않고, 현재 url을 대체한다.

사용 방법은 history.pushState() , history.replaceState() 이런 형식으로 사용한다.

history API를 이용해서 SPA처럼 구현이 가능하다. 하지만 앞에서 내가 직면했던 origin이 다르면 사용할수가 없다.

origin이 다르면 에러가 뜬다.

naver에서 google로 이동하고자 했을때 origin이 다르다고 에러를 내뱉는다.

또한 replaceState를 사용하면 history가 없어져서 뒤로가기가 초기화 되는줄알았다.

하지만 공부하고 보니 그냥 replaceState 는 이전 히스토리를 갖는데 히스토리를 쌓지 않고 맨 마지막 히스토리만 교체하는 것이었다.

즉 pushState는 array에서 push를 계속해서 array를 늘리는 것이고
replaceState는 말그대로 마지막 것을 교체하는 것이다. array[array.length-1] = 주소 와 같다고 생각하면 될것 같다.

history API 파라미터

history.pushState(state,title,url) 이런형식으로 파라미터를 세개를 가진다.

replaceState도 파라미터를 같이 가져간다.

• state : 이것은 SPA처럼 state를 저장하는 건데 state를 이동할때 저장하고 history.state로 꺼내쓸수 있다. 단, 새로고침하면 사라진다.
• title : 변경될 페이지의 title을 가리킨다. 하지만 거의 대부분의 브라우저에서 지원하지 않아서 “”빈 스트링값을 넣는다고 한다
• url : 새로 이동할 url값이다. origin 을 사용하지 않고 prams 값을 넣어준다. 예시 ) ‘/title’ 이런 형식

사용 하게될 예시 )

pushState는 사용하게 된다면 SPA를 사용하지 않을때 history를 쌓기 위해서 사용하게 될것 같다.
replaceState는 게시글 작성 페이지에서 글 쓰고 게시글 메인으로 나왔을때 뒤로가기 했을 경우 게시글 작성 페이지로 이동하지 않게 막을때 사용한다고 한다. 이처럼 로그인 할때도 사용하면 될듯 싶다.
replace로 로그인 페이지를 성공하면 로그인이 필요한 페이지로 교체시켜버리니 로그인 페이지가 히스토리에 남지 않아서 뒤로 가기할때 로그인 페이지로 이동하지 않게 된다.

location

이동을 위해서 location도 활용하게 된다 window.location.href와 location.replace가 주로 사용된다.

• location.href : 객체의 속성이며 새로운 페이지로 이동된다.
• location.replace : 함수로 작동이 된다.

history와 다른점은 origin이 다른 페이지로 이동할때 사용이 가능하다는 점이다.

사용

location.herf 는 객체의 속성이기 때문에 location.herf = ‘주소’ 형태로 사용된다.
히스토리는 기록 된다고 한다.

location.replace는 함수 형식으로 locaiton.replace(‘주소’) 형식 으로 사용이 된다.
히스토리는 기록되지않고 현재 페이지를 새로운 페이지로 덮어 씌운다고 한다.
위의 history replaceState와 같은 방식인것 같다.

결과적으로 history를 초기화 하는 방법을 찾아봤는데 방법은 없는것 같다.
뒤로가기 값을 잘 확인하기 위해서 replace로 교체하면서 history를 방지하는 방법으로 잘 관리하는 것 말고는 없는 것같다.
공부를 하면서 history replace를 사용하면 history가 싹 지워지고 새로 시작하는건줄알았는데 잘못된 지식을 바로 잡을 수 있었다.

참고 및 출처

history API 정리 : https://velog.io/@minw0_o/history-API%EB%9E%80