History API를 활용한 브라우저 세션 기록 조작 - BizSpring BLOG
핵심 요약
- SPA 환경에서 브라우저 뒤로가기/앞으로가기 등 탐색 기능을 지원하기 위한 History API의 개념과 필요성을 설명한다.
- history.pushState, replaceState, back/forward/go 등 주요 메소드와 popstate 이벤트의 역할을 소개한다.
- 버튼 클릭 시 새로고침 없이 URL을 변경하고 이미지 콘텐츠를 전환하는 예제 코드를 통해 실제 구현 방법을 보여준다.
- popstate 이벤트로 사용자의 뒤로가기/앞으로가기 동작을 감지해 이전 상태를 복원하는 방법을 다룬다.
- 페이지 최초 로드 시 URL 쿼리 파라미터를 확인해 replaceState로 현재 기록을 갱신하는 처리 방식을 설명한다.
History API를 활용한 브라우저 세션 기록 조작 - BizSpring BLOG
콘텐츠로 건너뛰기
내비게이션 메뉴
인사이트
테크
활용 방법/사례
활용 방법/사례
성공사례
성공 사례 일반
광고/마케팅 에이전시
이커머스
미디어/콘텐츠
금융/핀테크
의료/헬스케어
통신/인터넷
뉴스/트렌드
릴리즈 노트
인터넷트렌드 ↗
웹사이트 ↗
# History API를 활용한 브라우저 세션 기록 조작
2024년 12월 31일 2024년 12월 31일
테크
SPA(Single Page Application)는 웹 애플리케이션 개발에서 사용자 경험을 극대화하기 위해 널리 사용되는 방식입니다. 하지만, 단일 페이지에서 동적으로 콘텐츠를 변경하는 특성 상, 브라우저의 기본 탐색 기능(뒤로 가기, 앞으로 가기 등)을 제대로 지원하지 않으면 사용자가 혼란을 느낄 수 있습니다.
이를 해결하기 위한 필수 도구가 바로 History API 입니다. History API를 활용하면 브라우저의 세션 기록을 조작해서 사용자 경험을 개선할 수 있습니다.
이번 포스팅에서는 History API의 주요 이벤트와 메소드를 알아보도록 하겠습니다.
History API 란
History API 는 브라우저의 세션 기록(History Stack)에 접근하고 조작할 수 있는 JavaScript 인터페이스입니다. 이를 통해 페이지를 새로 고침하지 않고도 URL과 상태를 동적으로 관리할 수 있습니다.
주요 기능
세션 기록 관리: URL을 변경하거나 세션 상태를 추가할 수 있습니다.
탐색 이벤트 처리: 사용자가 “뒤로 가기” 또는 “앞으로 가기” 버튼을 클릭했을 때 이를 감지하고 처리할 수 있습니다.
주요 메소드
history.pushState(state, title, url): 새 상태를 스택에 추가합니다.
history.replaceState(state, title, url): 현재 상태를 교체합니다.
history.back(), history.forward(), history.go(n): 탐색 기록을 기반으로 페이지를 이동합니다.
주요 이벤트
popstate 이벤트: 사용자가 브라우저의 뒤로 가기 또는 앞으로 가기 버튼을 클릭하거나 history.go() 메서드로 탐색할 때 발생합니다. popstate 이벤트를 통해 뒤로 가기 막기 와 같은 페이지 이동 시의 동작을 정의할 수 있습니다.
예시:
window.addEventListener('popstate', (event) => {
// beforeunload 대신 popstate 이벤트에 리스너를 추가했다.
console.log('popstate:', event.state);
});
History API를 이용해 직접 구현해보기
History API를 통해 URL을 변경하고 DOM 업데이트를 동기화 하는 과정을 예제를 통해 구현해보겠습니다. 버튼 클릭 시 새로고침 없이도 URL이 변화하고, popstate 이벤트 발생 시 이전 상태로 복원하는 과정을 알아보겠습니다.
HTML 구조
History API로 이미지 전환
버튼을 클릭하면 History API를 사용해 URL이 변경되고, 페이지 콘텐츠가 그에 따라 업데이트됩니다.
현재 URL:
처음으로
이미지 1
이미지 2
이미지 3
이미지 버튼을 눌러주세요.
Image 1
Image 2
Image 3
자바스크립트 주요 부분
const url = new URL(window.location.href);
const baseUrl = url.origin + url.pathname;
쿼리 파라미터를 제외한 현재 URL을 추출합니다. “처음으로” 버튼을 눌렀을 때 히스토리 기록에 base url을 넣을 수 있습니다.
function showImage(imageId, shouldPushState = true) {
images.forEach(img => img.classList.remove('active'));
homeMessage.classList.remove('active');
if (imageId) {
const targetImg = document.getElementById(imageId);
if (targetImg) {
targetImg.classList.add('active');
if (shouldPushState) {
history.pushState({ image: imageId }, '', ?image=${imageId});
}
} else {
showHome();
}
} else {
showHome();
}
updateUrl();
}
특정 이미지를 활성화하고, history.pushState로 주소와 state를 업데이트합니다. shouldPushState가 false일 경우에는 히스토리 기록을 쌓지 않습니다
function showHome() {
images.forEach(img => img.classList.remove('active'));
homeMessage.classList.add('active');
history.pushState({}, '', baseUrl);
updateUrl();
}
이미지를 모두 숨기고 안내 문구를 보여주며, pushState로 홈 상태를 스택에 등록합니다.
window.addEventListener('popstate', (event) => {
if (event.state && event.state.image) {
showImage(event.state.image, false);
} else {
showHome();
}
});
사용자가 뒤로 가기, 앞으로 가기 버튼을 누를 때 발생합니다. event.state에 이미지 정보가 있으면 해당 이미지를 다시 보여주고, 없으면 홈 화면으로 돌아갑니다.
const params = new URLSearchParams(window.location.search);
if (params.has('image')) {
const imageId = params.get('image');
history.replaceState({ image: imageId }, '', ?image=${imageId});
showImage(imageId, false);
} else {
showHome();
}
페이지를 처음 로드했을 때 ‘image’ 파라미터가 있으면 replaceState로 현재 기록을 덮어쓰고, 해당 이미지를 표시합니다.
History API로 이미지 전환
History API를 이용한 예시
버튼을 클릭하면 History API를 사용해 URL이 변경되고, 페이지 콘텐츠가 그에 따라 업데이트됩니다.
현재 URL:
처음으로
이미지 1
이미지 2
이미지 3
이미지 버튼을 눌러주세요.
이번 포스팅에서는 History API에 대해 알아보았습니다. History API를 사용하면 브라우저의 세션 기록(History Stack)에 접근하고 조작할 수 있습니다. 이를 통해 페이지를 새로 고침하지 않고도 URL과 상태를 동적으로 관리할 수 있습니다.
Ref. History API MDN 문서 History API MDN 데모
Related Posts via Categories
구글애즈가 정확검색·구문검색 키워드까지 AI 모드에 노출하기 시작했다 — 자동화 상품 없이 AI 답변 화면에 들어가는 첫 실험
AI가 React 앱을 직접 디버깅 – Agent 기반 디버깅
ChatGPT 광고가 픽셀·전환 API·맞춤 오디언스를 갖췄다 — 답변 화면이 측정 가능한 광고 매체가 되는 순간
AI 시대, 데이터도 설명이 필요합니다
MCP 클라이언트는 Authorization Server를 어떻게 찾는가: 공식 MCP TypeScript SDK와 VS Code 구현 비교
RAG 시대의 GEO: AI가 콘텐츠를 읽는 방식과 스키마의 진짜 역할
AI 에이전트로 웹 데이터 수집 가능 여부 자동 검증하기
GA4 Intraday 실시간 테이블, 대시보드 원천 데이터로 바로 사용할 수 있을까?
워크플로우 오케스트레이션 플랫폼 Temporal 알아보기
iOS 14.5부터 GA4까지, 환경 변화가 가져온 업무 폭증을 해결하는 실무 전략은…?
다음에 대해 검색하기...
최신 글 둘러보기
기존 SEO와 무엇이 같고 무엇이 다른가
콘텐츠가 답인 걸 모르는 사람은 없습니다 — 문제는 지속입니다
광고비를 늘리지 않고 매출을 늘린 회사들은 무엇을 했나
코호트로 비교하면 광고 예산 판단이 달라집니다
GEO를 위한 글쓰기를 위한 작은 노하우
(해외동향) 광고주가 광고플랫폼 리포트에서 자체 측정으로 옮겨가고 있다.
구글애즈가 정확검색·구문검색 키워드까지 AI 모드에 노출하기 시작했다 — 자동화 상품 없이 AI 답변 화면에 들어가는 첫 실험
AI가 React 앱을 직접 디버깅 – Agent 기반 디버깅
ChatGPT 광고가 픽셀·전환 API·맞춤 오디언스를 갖췄다 — 답변 화면이 측정 가능한 광고 매체가 되는 순간
마케팅 자동화, 무엇부터 자동화해야 할까?
출처: https://blog.bizspring.co.kr/%ed%85%8c%ed%81%ac/history-api%eb%a5%bc-%ed%99%9c%ec%9a%a9%ed%95%9c-%eb%b8%8c%eb%9d%bc%ec%9a%b0%ec%a0%80-%ec%84%b8%ec%85%98-%ea%b8%b0%eb%a1%9d-%ec%a1%b0%ec%9e%91/
자주 묻는 질문
History API가 뭔가요?
브라우저의 세션 기록(History Stack)에 접근하고 조작할 수 있는 JavaScript 인터페이스입니다. 이를 통해 페이지를 새로고침하지 않고도 URL과 상태를 동적으로 관리할 수 있습니다.
SPA에서 왜 History API가 필요한가요?
SPA는 단일 페이지에서 콘텐츠를 동적으로 변경하기 때문에 브라우저의 기본 탐색 기능(뒤로가기, 앞으로가기)이 제대로 지원되지 않으면 사용자가 혼란을 느낄 수 있습니다. History API를 활용하면 이런 탐색 기능을 제대로 지원해 사용자 경험을 개선할 수 있습니다.
pushState와 replaceState의 차이는 무엇인가요?
pushState(state, title, url)는 새로운 상태를 히스토리 스택에 추가하는 반면, replaceState(state, title, url)는 현재 상태를 교체합니다. 예제에서는 페이지 최초 로드 시 쿼리 파라미터가 있으면 replaceState로 현재 기록을 덮어씁니다.
popstate 이벤트는 언제 발생하나요?
사용자가 브라우저의 뒤로가기 또는 앞으로가기 버튼을 클릭하거나 history.go() 메서드로 탐색할 때 발생합니다. 이 이벤트를 통해 이전 상태를 복원하거나 뒤로가기를 막는 등의 동작을 정의할 수 있습니다.
예제에서 이미지 전환은 어떻게 구현되나요?
버튼 클릭 시 showImage 함수가 실행되어 해당 이미지를 활성화하고 history.pushState로 URL과 상태를 업데이트합니다. 이후 popstate 이벤트가 발생하면 event.state에 저장된 이미지 정보를 확인해 해당 이미지를 다시 보여주거나 홈 화면으로 돌아갑니다.