반응형
Jake Seo
제이크서 위키 블로그
Jake Seo
전체 방문자
오늘
어제
  • 분류 전체보기 (715)
    • 일상, 일기 (0)
    • 백준 문제풀이 (1)
    • 릿코드 문제풀이 (2)
    • 알고리즘 이론 (10)
      • 기본 이론 (2)
      • 배열과 문자열 (8)
    • 데이터베이스 (15)
      • Planet Scale (1)
      • MSSQL (9)
      • 디비 기본 개념 (1)
      • SQLite 직접 만들어보기 (4)
    • 보안 (7)
    • 설계 (1)
    • 네트워크 (17)
      • HTTP (9)
      • OSI Layers (5)
    • 회고 (31)
      • 연간 회고 (2)
      • 주간 회고 (29)
    • 인프라 (52)
      • 도커 (12)
      • AWS (9)
      • 용어 (21)
      • 웹 성능 (1)
      • 대규모 서비스를 지탱하는 기술 (9)
    • 깃 (7)
    • 빌드 도구 (7)
      • 메이븐 (6)
      • 그레이들 (0)
    • Java (135)
      • 이펙티브 자바 (73)
      • 자바 API (4)
      • 자바 잡지식 (30)
      • 자바 디자인 패턴 (21)
      • 톰캣 (Tomcat) (7)
    • 프레임워크 (64)
      • next.js (14)
      • 스프링 프레임워크 (28)
      • 토비의 스프링 (6)
      • 스프링 부트 (3)
      • JPA (Java Persistence API) (5)
      • Nest.js (8)
    • 프론트엔드 (48)
      • 다크모드 (1)
      • 노드 패키지 관리 매니저 (3)
      • CSS (19)
      • Web API (11)
      • tailwind-css (1)
      • React (5)
      • React 새 공식문서 요약 (1)
      • HTML (Markup Language) (5)
    • 자바스크립트 (108)
      • 모던 자바스크립트 (31)
      • 개념 (31)
      • 정규표현식 (5)
      • 코드 스니펫 (1)
      • 라이브러리 (6)
      • 인터뷰 (24)
      • 웹개발자를 위한 자바스크립트의 모든 것 (6)
      • 팁 (2)
    • Typescript (49)
    • 리눅스와 유닉스 (10)
    • Computer Science (1)
      • Compiler (1)
    • IDE (3)
      • VSCODE (1)
      • IntelliJ (2)
    • 세미나 & 컨퍼런스 (1)
    • 용어 (개발용어) (16)
      • 함수형 프로그래밍 용어들 (1)
    • ORM (2)
      • Prisma (2)
    • NODEJS (2)
    • cypress (1)
    • 리액트 네이티브 (React Native) (31)
    • 러스트 (Rust) (15)
    • 코틀린 (Kotlin) (4)
      • 자바에서 코틀린으로 (4)
    • 정규표현식 (3)
    • 구글 애널리틱스 (GA) (1)
    • SEO (2)
    • UML (2)
    • 맛탐험 (2)
    • 리팩토링 (1)
    • 서평 (2)
    • 소프트웨어 공학 (18)
      • 테스팅 (16)
      • 개발 프로세스 (1)
    • 교육학 (1)
    • 삶의 지혜, 통찰 (1)
    • Chat GPT (2)
    • 쉘스크립트 (1)
    • 컴파일 (2)
    • Dart (12)
    • 코드팩토리의 플러터 프로그래밍 (4)
    • 플러터 (17)
    • 안드로이드 스튜디오 (1)
    • 윈도우즈 (1)
    • 잡다한 백엔드 지식 (1)
    • 디자인 패턴 (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 자바스크립트
  • 디자인패턴
  • 이펙티브 자바 item9
  • 메이븐 라이프사이클
  • item7
  • item9
  • 메이븐 페이즈
  • 팩터리 메서드 패턴
  • Pre-rendering
  • 플라이웨이트패턴
  • item8
  • pnpm
  • 빈 검증
  • MSSQL
  • 싱글톤 패턴
  • 자료구조
  • 메이븐 골
  • 작업기억공간
  • 싱글턴
  • rust
  • NEXT JS
  • 싱글톤
  • 슬로우 쿼리
  • 스프링 검증
  • prerendering
  • 객체복사
  • 러스트
  • 도커공식문서
  • try-with-resources
  • 참조 해제
  • 서버리스 컴퓨팅
  • 이펙티브자바
  • serverless computing
  • 추상 팩터리 패턴
  • 이펙티브 자바
  • 느린 쿼리
  • Java
  • bean Validation
  • 알고리즘
  • 자바 디자인패턴
  • 자바스크립트 면접
  • 외래키 제약조건
  • 자바스크립트 인터뷰
  • 토비의 스프링
  • 프로그래머의 뇌
  • 자바
  • Javadoc 자바독 자바주석 주석 Comment
  • 자바 검증
  • next js app
  • Next.js

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
Jake Seo

제이크서 위키 블로그

프론트엔드/Web API

브라우저 History API 를 활용하는 방법

2024. 2. 15. 11:06

History API 로 작업하기 (History API 활용 방법)

  • History API 를 이용하면, 브라우저의 세션 기록과 상호작용할 수 있다.
  • 세션 기록이란, 브라우저에서 사용자가 방문했던 페이지를 기록한 것을 말한다.
  • 일반 사용자는 앞으로 가기, 뒤로 가기 버튼을 통해 세션 기록을 이용한다.

History API 제공 메서드

  • 페이지를 이동하는 메서드는 직관적으로 이해가 쉬우나, 기록된 페이지를 수정하는 메서드들은 잘 활용하기 위해 약간의 학습이 필요하다.
  • 이 API 의 주요 목적은 fetch() 같은 메서드를 통해 업데이트 되는 SPA(Single Page Application)와 같은 웹사이트를 지원하기 위한 것이다.

기록된 페이지로 이동

  • History.back()
  • History.forward()
  • History.go()

기록된 페이지를 수정

  • History.pushState(): 세션 기록에 새 항목을 추가
  • History.replaceState(): 세션 기록 항목을 업데이트

SPA 와 세션 히스토리

  • MPA (Multi Page Application) 는 매번 페이지가 변화한다.
  • SPA 는 현재 상태를 유지하면서 필요한 부분을 변화시킨다.

SPA 에서 문제가 되는 부분

  • 페이지가 바뀌고 뒤로가기 버튼을 눌렀을 때, 이 전 렌더링 단계로 가는 것이 아니라 아예 최초의 페이지로 돌아간다.
  • 이를 해결하기 위해 pushState(), replaceState(), popState 이벤트가 존재한다.

pushState() 사용 예제

  • 아래는 pushState() 의 사용 예제인데, 3가지 인자를 갖는다.
    • json: 해당 렌더 시점에서 사용한 상태 값을 기억해둔다.
    • "": 레거시 사이트와 이전 버전의 호환성을 위해 필요하며, 항상 빈 문자열이어야 한다.
    • creature: 엔트리의 URL 로 사용된다. 브라우저의 URL 바에 표기되며, 페이지에서 발생하는 모든 HTTP 요청에서 Referer(https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer) 헤더 값으로 사용된다.
      • 이 값은 페이지와 무조건 same-origin 이어야 한다.
document.addEventListener("click", async (event) => {
  const creature = event.target.getAttribute("data-creature");
  if (creature) {
    event.preventDefault();
    try {
      const response = await fetch(`creatures/${creature}.json`);
      const json = await response.json();
      displayContent(json);
      // Add a new entry to the history.
      // This simulates loading a new page.
      history.pushState(json, "", creature);
    } catch (err) {
      console.error(err);
    }
  }
});

popState() 사용 예제

  • popstate 이벤트는 뒤로 가기 혹은 앞으로 가기를 수행했을 때 일어난다.
  • 이전 pushState() 에서 기록해둔 state 를 통해 다시 이전의 화면을 복원할 수 있다.
  • document 가 아닌 window 객체에 걸어야 함을 잘 살피자
// Handle forward/back buttons
window.addEventListener("popstate", (event) => {
  // If a state has been provided, we have a "simulated" page
  // and we update the current page.
  if (event.state) {
    // Simulate the loading of the previous page
    displayContent(event.state);
  }
});

replaceState() 사용 예제

시나리오

  • 초기에 페이지 로드가 발생한다.
  • 사용자는 SPA 내부의 링크를 클릭하여 다른 페이지로 이동한다. pushState() 를 사용하여 히스토리 항목을 추가한다.
  • 뒤로가기 버튼을 누른다.

이 때, 초기 상태로 돌아가고 싶지만, 동일한 문서 탐색이라 초기 페이지로 돌아가지 않는다.
이 상황을 replaceState() 를 통해 해결할 수 있다.

// Create state on page load and replace the current history with it
const image = document.querySelector("#photo");
const initialState = {
  description: document.querySelector("#description").textContent,
  image: {
    src: image.getAttribute("src"),
    alt: image.getAttribute("alt"),
  },
  name: "Home",
};
history.replaceState(initialState, "", document.location.href);

레퍼런스

https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API

반응형
저작자표시 비영리 (새창열림)

'프론트엔드 > Web API' 카테고리의 다른 글

이벤트 캡처링 (Event Capturing) 이란?  (0) 2023.01.20
event.target 과 event.currentTarget 의 차이  (0) 2023.01.20
이벤트 버블링 (Event Bubbling) 이란?  (0) 2023.01.20
자바스크립트를 이용해 쿠키 값 구하기  (0) 2022.06.30
FormData 란? 그리고 사용법  (0) 2022.06.29
    '프론트엔드/Web API' 카테고리의 다른 글
    • 이벤트 캡처링 (Event Capturing) 이란?
    • event.target 과 event.currentTarget 의 차이
    • 이벤트 버블링 (Event Bubbling) 이란?
    • 자바스크립트를 이용해 쿠키 값 구하기
    Jake Seo
    Jake Seo
    ✔ 잘 보셨다면 광고 한번 클릭해주시면 큰 힘이 됩니다. ✔ 댓글로 틀린 부분을 지적해주시면 기분 나빠하지 않고 수정합니다. ✔ 많은 퇴고를 거친 글이 좋은 글이 된다고 생각합니다. ✔ 간결하고 명료하게 사람들을 이해 시키는 것을 목표로 합니다.

    티스토리툴바