프로그래머스 데브코스 TIL - Day 14

✅ 학습 목차

- [DAY 14] VanillaJS를 통한 자바스크립트 기본 역량 강화 (6)

 

✅ 새롭게 학습한 부분

- History API

 

 

---

 

📄 history API

브라우저에서 페이지를 로드하면 세션 히스토리를 갖게 된다.
세션 히스토리는 페이지를 이동 할 때마다 쌓이게 되며,
이를 통해 뒤로가기, 앞으로 가기 등의 이동이 가능하다.

 

pushState / replaceState

두 개의 메서드를 사용하면 화면 이동(새로고침) 없이 현재 url을 업데이트 할 수 있다,
==> 이 특징을 이용하여 SPA가 가능하게 된다.

 

history.pushState(state, title, url)
: 세션 히스토리에 새 url 상태를 쌓는다.

history.replaceState(state, title, url)
: 세션 히스토리에 새 url 상태를 쌓지 않고, 현재 url을 대체한다.

 

state : history.state에서 꺼내쓸 수 있는 값.
title : 변경될 페이지의 title. 대부분의 브라우저에서 지원을 하지 않기 때문에 빈 문자열을 지정.
url : 세션 히스토리에 새로 넣을 url
! a태그를 클릭하거나 location.href로 url을 변경을 하면 화면이 리로드 되지만
url이 변경된다고 해서 화면이 리로드 되지는 않는다.

 

 

---

history 방식으로 SPA 구현

 

❗❗ history방식으로 SPA를 구현할 경우 404를 받는 페이지에 접근 시 루트의 index로 돌려주어야 한다.

로컬에서 테스트를 하기 위해 npx serve -s를 사용했다.

 

 

 

1. route 작성

: 현재 location의 pathname을 기준으로 어떤 로직을 렌더링 할지 결정한다.

function route(){
  const { pathname } = window.location;
  const container = document.querySelector("#container");
  if(pathname === '/'){
    container.innerHTML= `<h1>Home</h1>`;
  }else if(pathname === '/pruduct'){
    container.innerHTML=`<h1>Product</h1>`;
  }else if(pathname === '/article'){
    container.innerHTML=`<h1>Article</h1>`;
  }
}

 

2. a태그 기능 막기 / pushState 호출

: a태그의 기본 기능인 페이지 이동 기능을 막고 pushstate를 호출하는 형식의 이벤트를 처리한다.

window.addEventListener("click", (e)=>{
  e.preventDefault();
  if(e.target.className === 'link-item'){
    const path = e.target.href.replace(window.location.origin, '');
    history.pushState(null, null, path);
    route()
  }
})

 

3. 앞/뒤로 가기 시 route 호출

: 앞/뒤로 가기를 감지하는 popstate를 사용하여 이동될 때마다 route를 호출하여 리렌더 한다.

window.addEventListener('popstate', route);

 

 

---

✍ 느낀 점

 

SPA에서 새로고침 없이 url을 변경하는 과정이

이러한 원리를 가지고 있었는 지 이번에 처음 알게 되었다.

리액트에서 history를 사용해서 새로고침 없는 페이지 이동을 접했었는데

그 때는 그냥 "이렇게 사용하세요~"라고 해서 사용을 했었다... 반성중인 과거의 나..

이것 저것 배우다 보니 원리에 대해 알게 되는 것이 재밌다.

이전의 나보다 성장한 기분이 들기도 하고 의욕이 더 생기는 것 같다😃