Petflix - History API 라우팅

🌼 SPA( Single Page Application )에서 History API 라우팅을 많이 쓰는 이유?

 

1. SEO에 유리 - 해시(#)이 포함되지 않기 때문에 깔끔한 URL 구조를 제공할 수 있고, SEO 최적화에 도움이 된다.

2. SPA에 최적화 - 새로고침하지 않고도 URL을 동적으로 변경할 수 있으며, 브라우저의 "뒤로 가기" 및 "앞으로 가기" 버튼도 자연스럽게 작동한다. 

3. 프레임워크와 호환성 - React의 react-router-dom, Vue의 vue-router 같은 라우팅 라이브러리들이 History API를 기본적으로 지원한다. 이를 통해 복잡한 라우팅을 쉽게 구현할 수 있고, 관리도 용이하다.

 

🌼 HTML 코드

     <ul class="nav__wrapper">
        <li class="nav__watchHistory">
          <button class="nav__icon">&#9829;</button>
          <button class="nav__menu" data-path="watch-history">시청 기록</button>
        </li>
        <li class="nav__watchLaterVideos">
          <button class="nav__icon">&#9829;</button>
          <button class="nav__menu" data-path="watch-later">
            나중에 볼 동영상
          </button>
        </li>
        <li class="nav__likedVideos">
          <button class="nav__icon">&#9829;</button>
          <button class="nav__menu" data-path="liked-videos">
            인기 동영상
          </button>
        </li>
      </ul>

 

data-path라는 HTML데이터셋 속성을 사용했다. HTML 요소에 추가 정보를 저장할 수 있는 방법이다.

data-* 형식의 속성은 HTML 표준으로, 원하는 데이터를 자유롭게 저장하고 JavaScript로 접근할 수 있다.

data-* 속성 값에 접근 하는 방식은 getAttribute, dataset을 사용하는 방법이 있다.  

 

🌼 선택된 경로에 맞는 콘텐츠를 보여주는 JS

//navigate.js

export function navigate(state){
    const content = document.querySelector(".thumbs__wrapper");
    switch (state.path){
        case 'watch-history':
            content.innerHTML = "<div>안녕하세요</div>";
            break;
        case 'watch-later':
            content.innerHTML = "<div>안녕하세요1</div>";
            break;
        case 'liked-videos':
            content.innerHTML = "<div>안녕하세요3</div>";
            break;
    }
}

 

🌼 네비게이션 버튼들에 클릭 이벤트를 추가하는 JS

//navigation.js

import { navigate } from "./navigate.js";

export function setupNavigation() {
    document.querySelectorAll('.nav__menu').forEach(button => {
      button.addEventListener('click', () => {
        const path = button.getAttribute('data-path');  // '/watch-history'
        const state = { path };
  
        // URL 변경
        history.pushState(state, '', path);
  
        // 화면 내용 업데이트
        navigate(state);
      });
    });
  
    // 뒤로 가기/앞으로 가기 버튼 처리
    window.addEventListener('popstate', (event) => {
      if (event.state) {
        navigate(event.state);
      } else {
        navigate({ path: '/' }); // 기본 경로
      }
    });
  }

 

👉 JavaScript의 history.pushState() 메서드

 

브라우저의 주소창에 표시되는 URL을 변경하면서도 페이지 전체를 다시 로드하지 않고, 브라우저의 기록에 새로운 상태를 저장할 수 있게 해준다. 

 

이때 pushState의 첫 번째 인자로 state 객체를 넘겨준다.

 

state 객체는 페이지의 현재 상태를 나타내는 정보를 담고 있고, 나중에 사용자가 뒤로 가기나 앞으로 가기 버튼을 눌렀을 때 이 정보를 바탕으로 페이지 상태를 복원할 수 있게 해준다.

 

👉 popstate 이벤트

 

사용자가 브라우저의 "뒤로 가기" 또는 "앞으로 가기" 버튼을 눌렀을 때 발생한다. 

이 이벤트가 발생할 때, 이전 페이지로 돌아가거나 앞으로 갔을 때 저장된 state 객체가 event.state로 전달된다. 이 state는 이전에 pushState로 저장한 상태 정보이다.

 

 

 

참고  https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-HTML-%EB%8D%B0%EC%9D%B4%ED%84%B0%EC%85%8Bdata-%EC%86%8D%EC%84%B1

🌐 html의 data-속성 사용법 완벽 가이드