개발새발 로그

[2023-10-12] TIL - history API에 대하여 본문

TIL

[2023-10-12] TIL - history API에 대하여

이즈흐 2023. 10. 12. 16:35

📝배운 것

1. history API
2. hashbang
3. SPA
4. url routing

💡알게된 것

1. 세션 히스토리

- 브라우저에서 페이지 로딩을 하면 갖는 것

- 페이지를 이동할 때마다 쌓임, 이를 통해 뒤로가기시 이전페이지로 가거나 뒤로 간 이후 다시 앞으로 가는 등의 이동이 가능

2. pushState, replaceState

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

3. pushState, replaceState 이점

- 화면에 이동없이 url을 업데이트할 수 있게하는 함수들이다.

- 실제로 이동이 일어나지 않지만 히스토리에는 쌓이거나 현재 url을 바꿀 수 있다.

- 페이지이동을 하지 않고 페이지를 다시 그릴 수 있다. -> SPA 가능해짐

 

4. hashbang이란

- 해시뱅이란?

말그대로 해시(#)와 뱅(!)이 합쳐진 단어로 단일 페이지 애플리케이션(SPA)를 구현하기 위해서 사용하는 것으로 해시뱅을 사용하게 되면

페이지의 갱신없이 URL변경을 할 수 있습니다.

 

5. SPA 가 돌아가기 위한 환경에 맞는 history API

history API의 특징은 화면의 이동없이 url을 바꿀 수 있다.
history.pushState({productId: 1},null,"/product/1"); // 화면의 이동없이 url 변경됨
history // History { length : 2 , ... }

location.href="/product/1" //화면이 이동되고 콘솔에 있던 로그도 사라짐

history.replaceState(null,null,"product/5"); // 현재 product/1 이라면 product/1을 product/5로 대체한다.
//만약 뒤로가기를 누르면 product/1의 이전 url로 가게된다.

6. 404에러가 났을 때 index.html로 돌리지 않으면 발생하는 일

- history.pushState로 위처럼 a링크를 클릭하면 화면 이동없이 url을 변경하다가 새로고침을 누르게 되면 product-list의 index.html을 자동으로 찾게된다. 

- 하지만 우리는 product-list의 index.html이 없으므로 404에러가 나게 된다.

- 그래서 SPA에서는 무조건 root의 index.html로 돌려보내주는 처리가 필요하다. ->안된다면 hashbang을 사용해야함

- 아래 명령어를 터미널에 입력하면 위와 같은 404에러가 나지않게 root의 index.html로 돌려보내줄 수 있다.

☝중요

npx serve -s

- 거의 모든 hashbang을 쓰지 않고, history API를 사용하는 SPA 방식의 라우팅을 지원하는 라이브러리 프레임워크는 위처럼 진행한다.

 

7. 간단한 SPA 방식

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="container"></div>
    <a class="LinkItem" href="/product-list">product list</a>
    <a class="LinkItem" href="/article-list">article list</a>
    <script>
      function route() {
        const { pathname } = location;
        const $container = document.querySelector("#container");
        if (pathname == "/") {
          $container.innerHTML = `<h1>Home</h1>`;
        } else if (pathname == "/product-list") {
          $container.innerHTML = `<h1>상품 목록</h1>`;
        } else if (pathname == "/article-list") {
          $container.innerHTML = `<h1>게시글 목록</h1>`;
        }
      }
      route();
      window.addEventListener("click", (e) => {
        if (e.tartget.className == "LinkItem") {
          e.preventDefault();

          const { href } = e.target;
          const path = href.replace(window.location.origin, "");

          history.pushState(null, null, path);
          route();
        }
      });
    </script>
  </body>
</html>

- GIF를 보면 한번 지나간 페이지는 SPA로 동작하는 것처럼 보인다.

- url이 변경된 상태에서 새로고침을 해도 404에러가 뜨지 않는다.

🤷‍♂️하지만 뒤로가기 버튼을 누르면 화면이 제대로 렌더링 되지않는다

- 이는 route함수가 뒤로가기 버튼이 눌렸을 때는 실행되지 않기 때문이다.

- 그래서 아래코드를 추가해야한다.

window.addEventListener("popstate", () => {
	route();
});

 

8. html에 경로를 적을 때는 절대경로로 적고, js끼리의 경로를 적을 때는 상대경로로 적는다.

9. SPA에 대해서 잘 이해하는 것이 중요하다.

 - 렌더링이 어느 시점에서 되는지 정확하게 알아야한다.

 - CSR(클라이언트 사이드 렌더링)이나 SSR(서버 사이드 렌더링)의 차이점과 어느 시점에 누가 렌더링하는지를 정확하게 알고 있어야 렌더링을 어느 시점에 어떻게 할지 전략적으로 쓸 수 있다.

 - 초기에는 SSR 기반 템플릿 언어에서 주도권이 CSR로 넘어왔다가 CSR에서 해결되지않는 문제때문에 다시SSR이 뜨고 있다.

728x90
반응형
LIST
저작자표시 비영리 변경금지

'TIL' 카테고리의 다른 글

렌더링의 역사  (1) 2023.10.16
[2023-10-13] TIL  (0) 2023.10.16
[2023-10-12] TIL - fetch API를 배우면서  (0) 2023.10.12
[2023-10-10] TIL - Promise, Promise 내장함수, Async, Await, Fetch  (0) 2023.10.10
[2023-10-09] TIL - 모듈, 비동기 호출, API  (1) 2023.10.09
'TIL' Related Articles more