뒤로 가기 조절: History API

핵심 개념

페이지를 새로고침하지 않고도 주소창의 주소를 바꾸거나 뒤로 가기 버튼의 동작을 내 마음대로 조절해요.

코드 분석

HTML5📋 코드 (9줄)

<button onclick='pushState()'>History에 상태 추가</button>
<div id='result'>주소창의 변화를 확인해보세요.</div>
<script>
  function pushState() {
    const state = { page: 1 };
    history.pushState(state, 'title', '?page=1');
    document.getElementById('result').innerHTML = '가상의 주소 ?page=1이 추가되었습니다.';
  }
</script>

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 History API 사용에서
뒤로가기·앞으로가기 처리, popstate 이벤트 누수,
스크롤 위치 복원 버그를 찾아 수정해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

History API로 SPA 라우팅을
React Router 없이 직접 구현한
실전 미니 프레임워크 코드를 만들어줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 History API 사용 패턴 전체를 분석해서
메모리 누수, 스크롤 복원, 검색엔진 크롤링 호환성을
정리해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

2026년 React Router, Next.js Router 시대에
History API를 직접 다룰 일이 실무에서 얼마나 있는지
솔직히 말해줘.

⭐ 이것만 기억하세요

뒤로 가기 조절: History API는 이 3가지만 확실히 잡으세요

1.SPA에서 History API 없이 화면을 전환하면 뒤로 가기 버튼이 이전 페이지가 아닌 다른 사이트로 나가버립니다

2.pushState()로 URL을 변경하고, popstate 이벤트로 뒤로 가기를 감지해서 화면 전환을 제어합니다

3.다음 챕터에서 네트워크 없이도 앱을 동작시키는 Service Workers를 배웁니다

💬 이 챕터 질문 보기

HTML5 · CH.27 — 질문하거나 답변을 확인하세요

→

진행도 27 / 33

← 커리큘럼으로 ← 목록으로 (HTML5)