icon안동민 개발노트

History API와 라우팅

 History API는 웹 브라우저의 세션 기록을 조작할 수 있게 해주는 인터페이스입니다.

 이 API는 단일 페이지 애플리케이션(SPA) 개발에 혁명을 가져왔으며, 클라이언트 사이드 라우팅을 가능하게 했습니다.

History API 개념과 배경

 History API는 전통적인 다중 페이지 애플리케이션의 한계를 극복하기 위해 도입되었습니다.

 이를 통해 개발자들은 페이지를 새로고침하지 않고도 브라우저의 주소를 변경하고 탐색 기록을 관리할 수 있게 되었습니다.

 SPA 개발에 미친 영향

  • 부드러운 페이지 전환
  • 더 나은 사용자 경험
  • 서버 부하 감소
  • 복잡한 웹 애플리케이션 구현 용이

주요 메서드와 이벤트

  1. pushState : 새로운 기록 항목을 추가합니다.
history.pushState(state, title, url);

 예시

history.pushState({ page: 1 }, "Title 1", "/page1");
  1. replaceState : 현재 기록 항목을 대체합니다.
history.replaceState(state, title, url);

 예시

history.replaceState({ page: 2 }, "Title 2", "/page2");
  1. popstate 이벤트 : 브라우저의 뒤로 가기나 앞으로 가기 버튼을 클릭할 때 발생합니다.
window.addEventListener('popstate', function(event) {
  console.log("Location: " + document.location + ", state: " + JSON.stringify(event.state));
});

클라이언트 사이드 라우팅

 클라이언트 사이드 라우팅은 서버에 요청을 보내지 않고 클라이언트에서 페이지 전환을 처리하는 기술입니다.

 이점

  • 빠른 페이지 전환
  • 서버 부하 감소
  • 더 나은 사용자 경험

 기본적인 라우터 구현

class Router {
  constructor() {
    this.routes = {};
    window.addEventListener('popstate', this.handlePopState.bind(this));
  }
 
  addRoute(path, handler) {
    this.routes[path] = handler;
  }
 
  navigateTo(path) {
    history.pushState(null, null, path);
    this.handleRoute(path);
  }
 
  handlePopState() {
    this.handleRoute(window.location.pathname);
  }
 
  handleRoute(path) {
    const handler = this.routes[path];
    if (handler) {
      handler();
    } else {
      console.log('404 Not Found');
    }
  }
}
 
const router = new Router();
router.addRoute('/', () => console.log('Home Page'));
router.addRoute('/about', () => console.log('About Page'));
 
document.querySelector('a').addEventListener('click', (e) => {
  e.preventDefault();
  router.navigateTo(e.target.getAttribute('href'));
});

해시 기반 라우팅 vs History API 라우팅

 1. 해시 기반 라우팅

  • URL에 '#' 사용 (예 : example.com/#/about)
  • 서버 설정 불필요
  • 검색 엔진 최적화(SEO)에 불리

 2. History API 라우팅

  • 깔끔한 URL (예 : example.com/about)
  • 서버 설정 필요
  • SEO에 유리
  • 더 나은 사용자 경험

주의사항 및 해결 방안

  1. 서버 설정 : 모든 요청을 인덱스 페이지로 리다이렉트하도록 설정해야 합니다.

 Apache 예시

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>
  1. 페이지 새로고침 문제 : 서버 설정으로 해결할 수 있지만, 클라이언트 측에서도 대비가 필요합니다.
window.addEventListener('load', () => {
  router.handleRoute(window.location.pathname);
});

Best Practices

  1. 의미 있는 상태 객체 사용
history.pushState({ page: 'about', data: {...} }, "About", "/about");
  1. 에러 처리
router.addRoute('*', () => console.log('404 Page'));
  1. 중첩 라우팅 지원
router.addRoute('/users/:id', (params) => console.log(`User ${params.id}`));
  1. 비동기 컨텐츠 로딩
router.addRoute('/profile', async () => {
  const data = await fetchProfileData();
  renderProfile(data);
});

라우팅 라이브러리

 React Router나 Vue Router 같은 라이브러리는 History API를 추상화하여 사용하기 쉬운 인터페이스를 제공합니다.

 React Router 예시

import { BrowserRouter as Router, Route, Link } from "react-router-dom";
 
function App() {
  return (
    <Router>
      <div>
        <nav>
          <Link to="/">Home</Link>
          <Link to="/about">About</Link>
        </nav>
 
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
}

 이러한 라이브러리들은 내부적으로 History API를 사용하여 라우팅을 처리하며, 추가적인 기능(중첩 라우팅, 파라미터 처리 등)을 제공합니다.

 History API와 클라이언트 사이드 라우팅은 현대 웹 애플리케이션 개발의 핵심 요소입니다. 이들은 사용자 경험을 크게 향상시키고, 개발자들이 더 복잡하고 동적인 웹 애플리케이션을 만들 수 있게 해줍니다.

 History API를 사용하면 개발자는 브라우저의 주소를 조작하고 탐색 기록을 관리할 수 있습니다. 이는 단일 페이지 애플리케이션(SPA)에서 특히 유용하며, 페이지를 새로고침하지 않고도 다른 "페이지"로 이동하는 것처럼 보이게 할 수 있습니다.

 클라이언트 사이드 라우팅은 이러한 History API를 기반으로 구현됩니다. 이를 통해 서버에 요청을 보내지 않고도 애플리케이션 내에서 페이지 전환을 처리할 수 있습니다. 이는 빠른 페이지 전환, 서버 부하 감소, 그리고 더 나은 사용자 경험을 제공합니다.

 그러나 History API와 클라이언트 사이드 라우팅을 사용할 때는 몇 가지 주의해야 할 점이 있습니다. 서버 설정이 필요하며, 페이지 새로고침 문제에 대비해야 합니다. 또한, 검색 엔진 최적화(SEO)를 위한 추가적인 노력이 필요할 수 있습니다.

 React Router나 Vue Router 같은 라우팅 라이브러리들은 이러한 복잡성을 추상화하고, 개발자들이 더 쉽게 라우팅을 구현할 수 있게 해줍니다. 이들 라이브러리는 내부적으로 History API를 사용하며, 추가적인 기능과 최적화를 제공합니다.

 결론적으로, History API와 클라이언트 사이드 라우팅은 현대 웹 개발에서 필수적인 요소입니다. 이들을 효과적으로 활용하면 더 동적이고 반응적인 웹 애플리케이션을 구축할 수 있으며, 사용자에게 네이티브 애플리케이션과 유사한 경험을 제공할 수 있습니다. 그러나 이를 위해서는 적절한 서버 설정, 에러 처리, 그리고 성능 최적화 등 여러 가지 측면을 고려해야 합니다.

이전으로다음으로