TIL 이미지

history API

  • 브라우저에서 페이지 로딩을 하면 세션 히스토리를 갖는다.
    세션 히스토리는 페이지를 이동할 때마다 쌓인다.
    페이지 뒤로 가기, 앞으로 가기 등이 가능하다.
  • pushState, replaceState로 화면의 이동 없이 url을 변경할 수 있다.
    • pushState: 세션 히스토리에 새 url 상태를 쌓음
    • replaceState: 세션 히스토리에 새 url 상태를 쌓지 않고, 현재 url을 대체
      (replaceState는 뒤로가기를 제한해야 하는 상황에서 필요하다)

    이를 통해 실제 페이지는 이동하지 않으면서, url를 변경하고 화면을 다시 그릴 수 있다.
    쿼리 문자열도 자유롭게 붙일 수 있다.

  • SPA 404 에러
    404 에러가 나면 루트의 index.html로 전환하는 조치가 필요하다.
    SPA로 개발한 코드를 배포할 때는 이를 주의해야 한다.
  • window.history: History 객체
  • window.location: Location 객체
    Location 객체를 사용하면 페이지를 실제로 이동한다.
  • popstate 이벤트는 뒤로 또는 앞으로 가기 시 발생한다.
  • SPA에서 html은 파일을 '절대경로'로 import 해야 한다.
    index.html에서 import할 때만 해당하며, 모듈에서 import할 때는
    상대경로로 해도 된다.

참고자료

데브코스 14일차 강의