[10분 테코톡] 참새의 history api 정리

History API란?

- history 글로벌 오브젝트를 이용해서 브라우저의 세션 history에 대한 접근과 조작 기능을 제공

 

세션 history?

 

브라우저를 사용할 때 위와같이 뒤로 가기와 앞으로 가기 버튼이 있는데 여기를 우클릭 해보면

 

 

이전에 방문했던 기록들이 나온다. 이것이 세션 history 이다.

 

 

제공하는 기능

 

세션 history의 길이가 몇인지 그리고 뒤로 가기나 앞으로 가기를 자바스크립트를 통해서 직접 제어를 할 수가 있고 한 칸 뒤로 한 칸 앞으로 뿐만 아니라 두 칸 뒤로 세 칸 뒤로 같은 원하는 곳으로 이동이 가능하다. 숫자 같은 경우는 굉장히 직관적으로 되어 있어서 0을 넣으면 현재 페이지의 새로고침이 되고 음수를 넣으면 뒤로 가고 양수를 넣으면 앞으로 간다.

 

 

history API에서 제공하는 가장 중요한 기능이 pushState랑 replaceState라는 메소드가 있다. state는 직렬화가 가능한 아무거나 된다. 보통은 object를 넣는데 이것을 브라우저 세션 history 한테 기억해 달라고 할 수 있다. unused 같은 경우에는 현재는 사용하지 않지만 예전 브라우저들과의 호환성을 위해서 강제로 넣게끔 하고 있다. url은 선택사항이다. url을 넣게 되면 pushState나 replaceState를 했을 때 주어진 url로 이동을 하는 것처럼 표시를 해준다. 그래서 주소 표시줄에 있는 주소는 바뀌는데 실제로 페이지를 새로고침해서 렌더링을 한다거나 해당 페이지가 있는지 서버로 요청을 보내서 확인한다거나 그러지는 않는다.

 

 

pushState

일단 요런 형태의 history 스택이 있다고 생각해 보자

 

 

pushState를 해서 분홍색 state를 넣는다고 생각을 해보자

 

그러면 우선 현재 페이지 다음 것을 다 지우고 그 자리에 끼워 넣는 것이 pushState 이다.

 

replaceState

 

replaceState의 경우에는 그냥 현재 페이지를 갈아 끼운다.

 

실제 사용을 보면 example.com에서 pushState를 해서 sparrow에 1,2,3,4로 가겠다라고 하면 실제로 sparrow에 1,2,3,4로 주소 표시줄이 바뀌고 history.state를 찍어보면 우리가 넣은 state를 실제로 확인을 할 수 있다.

 

여기서 pigeon으로 가겠다 하면 pigeon으로 이동을 하고 이전에 있던 sparrow는 기록에 남게된다.

 

 

popStateEvent

- 사용자가 세션 기록을 탐색할 경우에 같은 문서에서 history 엔트리가 바뀌면 생겨나는 이벤트

 

이것은 윈도우에서 발생을 해서 윈도우에다가 이벤트 리스너를 달아 직접 어떤 state가 pop되는지 확인을 할 수 있다.

 

위에서 했던 pigeon에서 뒤로가기를 누르면 sparrow로 이동을 하면서 그때 넣었던 state가 나오고 다시 앞으로 가면 pigeon으로 이동하면서 그때 넣었던 state가 나온다.

 

이런 history API의 기능들을 이용해서 할 수 있는 대표적인 것이 SPA이다.

 

 

SPA란?

- Single Page Application

 

하나의 HTML
  - 맨 처음에 모든 자원을 가져옴
  - 서버와의 통신 최소화

 

페이지 이동 시 바뀌는 부분만 렌더링
  - 컴포넌트로 나누어 개발하기에 유리

  - 좋은 사용자 경험
  - 검색 엔진 최적화가 어려움

 

 

URL Routing이란?

URL
  - Uniform Resource Locator
  - 자료가 '어디에' 존재하는지 나타내는 일종의 주소

 

Routing
  - 네트워크에서 경로를 고르는 과정
  - 자료에 '어떻게' 접근할 것인지를 정하는 것

 

URL Routing
  - URL을 특정 route로 매핑하는 과정

 

 

SPA에서 URL Routing이 필요한 이유

URL Routing이 없다면?
- 실제 저장되어 있는 페이지는 하나
- 여러 페이지를 돌아다닌 것 같지만 방문 기록이 없음
- 뒤로 가기, 앞으로 가기 사용 불가
- 본인이 보고 있는 페이지의 접근 방법을 알기 어려움

 

SPA도 결국 하나의 웹페이지이기 때문에 흔히 알고 있는 웹페이지랑 비슷한 사용자 경험을 제공해줘야  되서 url 라우팅이 필요하다고 할 수 있다.

 

* 참고 : 🍻주모의 SPA 정리

 

 

실제사례

History API를 이용한 리우팅 : Vanilla JS

 

먼저 라우터를 만들어야 한다. 라우터 같은 경우에는 어떤 정보가 주어졌을 때 특정한 페이지를 렌더링 하도록 만들면 된다.

 

 

그 다음에 이런 버튼 같은 곳에 이동하고 싶은 페이지를 넣을 수 있다. 그때 pushState를 이용해서 해당 페이지에 대한 정보를 state로 주고, 만약에 주소를 바꾸고 싶다면 바꿀 주소까지 넣어주면 된다. 하지만 pushState는 사용자가 뒤로 가기나
앞으로 가기를 한 게 아닌 걸로 취급해서 직접 라우터를 돌려주어야 한다.

 

 

만약에 사용자가 뒤로 가기나 앞으로 가기를 브라우저에서 눌러서 상호작용 한다면 그땐 popStateEvent가 발생을 하기 때문에 이벤트 리스너를 달아서 해당 state를 받아 라우팅 해줄 수 있다.

 

 

History API를 이용한 리우팅 : Vue

Vue에서 제공하는 라우터를 살펴보면 useHistoryStateNavigation 이라는 함수 내에서 실제로 history에 존재하는 replaceState랑 pushState를 사용하는 것을 확인할 수 있다.

 

 

History API를 이용한 리우팅 : React

 

react 같은 경우에는 createBrowserRouter 라는 것으로 라우터를 처음에 만들 때 history 부분에 createBrowserHistory 라는 것을 쓴다.

 

 

여기로 들어가 보면 우선 윈도우랑 글로벌 history 그대로 사용할 수 밖에 없도록 정해놓았고 create browser history 함수의 return 값을 보면

 

 

또 getUrlBasedHistory 라는 함수에 실행을 시킨다. 그래서 여기로 들어가 보면

 

 

이 안에 메서드로 push가 있는데 push에서 globalHistory.pushState를 통해 직접 history API를 사용하면 확인할 수가 있다. push 말고도 replace, go도 있는데 그것도 역시 history API를 그대로 사용한다.

history API는 단순하게 브라우저의 세션 기록을 조작하는 기능을 제공하는 것처럼 보이지만 실제로는 싱글 페이지 어플리케이션을 만들 때 사용한다고 볼 수가 있다.

---

참고

https://www.youtube.com/watch?v=xvmqaUGAZpo&ab_channel=%EC%9A%B0%EC%95%84%ED%95%9C%ED%85%8C%ED%81%AC