[WEB] History API: 현대 웹의 뒤끝 이야기 📜

📜 History API 톺아보기!

여러분, 브라우저에서 “뒤로 가기” 버튼을 누른 경험 다들 있죠? 바로 그 순간, 우리가 별생각 없이 누른 버튼 뒤에는 History API라는 똑똑한 녀석이 있습니다. 이 API는 브라우저에서 페이지 이동을 제어하고, 히스토리를 다루는 강력한 도구예요. 오늘은 History API의 기본 개념, 사용법, 그리고 실무에서 알아두면 좋은 팁들을 파헤쳐 보겠습니다. 🚀

---

💾 History API란?

History API는 브라우저의 세션 히스토리(방문 기록)를 다룰 수 있게 해주는 브라우저 내장 API입니다. 페이지를 새로고침하지 않고도 URL을 변경하거나, 사용자의 뒤로/앞으로 이동 같은 행동을 컨트롤할 수 있어요. 특히, SPA(Single Page Application)에서는 거의 필수로 사용되죠.

---

🔑 핵심 메서드와 속성

1. window.history.length

현재 브라우저 세션 히스토리의 길이를 반환합니다. 예를 들어, 사용자가 세 페이지를 방문했다면 history.length는 3을 반환합니다.

console.log(window.history.length); // 세션 히스토리의 길이 출력

2. window.history.back()

브라우저 히스토리에서 이전 페이지로 이동합니다. 브라우저의 “뒤로 가기” 버튼과 동일한 기능이에요.

history.back(); // 이전 페이지로 이동

 

3. window.history.forward()

히스토리에서 다음 페이지로 이동합니다. “앞으로 가기” 버튼과 동일하죠.

history.forward(); // 다음 페이지로 이동

 

4. window.history.go(n)

• 히스토리를 n번째로 이동합니다.
• n > 0: 앞으로 이동
• n < 0: 뒤로 이동
• n === 0: 현재 페이지 새로고침

history.go(-2); // 두 페이지 뒤로 이동
history.go(2);  // 두 페이지 앞으로 이동

---

✨ History API의 확장된 기능

현대 웹에서는 단순히 뒤로/앞으로 이동하는 기능만으로는 부족하죠. 그래서 History API는 SPA의 라우팅을 지원하기 위해 더 강력한 기능을 제공합니다.

 

1. history.pushState()

URL을 변경하면서 새로운 상태를 히스토리에 추가합니다. 페이지를 새로고침하지 않고도 주소 표시줄의 URL을 바꿀 수 있어요.

history.pushState({ page: 1 }, "Title 1", "/page1");
console.log(location.pathname); // "/page1"

 

매개변수 설명

1. state: 페이지와 연결할 데이터 객체. (사용자가 정의)
2. title: 브라우저 탭의 제목. (대부분 무시됨)
3. url: 변경할 URL.

2. history.replaceState()

현재 히스토리를 새로운 상태로 교체합니다. 기존의 기록을 덮어쓰므로 뒤로 가기 시 영향을 미치지 않아요.

history.replaceState({ page: 2 }, "Title 2", "/page2");
console.log(location.pathname); // "/page2"

---

🔄 popstate 이벤트

URL 변경 시 히스토리가 변경되면 popstate 이벤트가 발생합니다. 이 이벤트는 뒤로 가기나 앞으로 가기 같은 동작을 감지할 때 유용해요.

window.addEventListener("popstate", (event) => {
  console.log("Popstate 발생:", event.state);
});

---

🚧 사용 시 주의할 점

1. URL 변경이 서버 요청으로 이어질 수 있음
   • History API로 URL을 변경했더라도, 서버는 이를 모릅니다. 새로고침 시 404 에러가 발생할 수 있어요.
   • 해결책: 서버에서 SPA의 기본 HTML 파일을 반환하도록 설정하세요.
2. State 객체 관리
   • pushState나 replaceState의 state 객체는 브라우저 히스토리와 함께 저장됩니다. 너무 큰 데이터를 넣으면 성능 문제가 발생할 수 있어요.
3. SEO 문제
   • History API는 클라이언트에서만 작동하므로 검색 엔진 봇은 제대로 렌더링하지 못할 수 있어요. 이를 해결하려면 SSR(Server-Side Rendering)이나 Prerendering을 고려하세요.

---

🛠 실무 예제: 간단한 SPA 라우터 만들기

History API를 사용해 간단한 SPA 라우터를 만들어볼까요?

const routes = {
  "/": "<h1>Home</h1>",
  "/about": "<h1>About</h1>",
  "/contact": "<h1>Contact</h1>",
};

// 페이지 렌더링 함수
function render(path) {
  document.body.innerHTML = routes[path] || "<h1>404 Not Found</h1>";
}

// 초기 로드
render(location.pathname);

// 링크 클릭 시 URL 변경 및 페이지 렌더링
document.addEventListener("click", (e) => {
  if (e.target.tagName === "A") {
    e.preventDefault();
    const path = e.target.getAttribute("href");
    history.pushState(null, "", path);
    render(path);
  }
});

// 뒤로/앞으로 이동 시 렌더링
window.addEventListener("popstate", () => {
  render(location.pathname);
});

 

HTML 코드

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

---

🎯 History API가 가져다주는 이점

1. SPA 라우팅의 필수 요소: URL을 동적으로 변경하면서도 페이지 새로고침 없이 콘텐츠를 업데이트
2. 사용자 경험 개선: 브라우저의 “뒤로/앞으로 가기” 버튼을 통해도 자연스러운 동작 유지
3. 서버 부하 감소: 클라이언트에서 URL을 제어하므로 서버와의 통신을 최소화

---

마무리하며 🔖

History API는 브라우저 히스토리를 관리하는 기본적인 기능에서 나아가, SPA와 같은 현대적인 웹 애플리케이션을 구축하는 데 핵심적인 역할을 합니다. 오늘 배운 내용을 통해 브라우저 히스토리를 자유자재로 다룰 수 있는 전설의 개발자가 되어보세요. 😊

 

🌷전설의 개발자가 되어봅시당! 🌷