Day 14 - 2022/11/03
💡 새롭게 알게된 점
SPA
history API
DOM의 Window 객체는 history 객체를 통해 브라우저의 세션 기록에 접근할 수 있는 방법을 제공하는데, 이 history는 사용자를 자신의 방문 기록 앞과 뒤로 보내고 기록 스택의 콘텐츠도 조작할 수 있는, 유용한 메서드와 속성을 가진다.
즉, 브라우저에서 페이지 로딩을 하면 세션 히스토리를 갖는다. 이를 통해 SPA(single page application)이 가능해진다.
세션 히스토리란?
세션 히스토리는 페이지를 이동할 때 마다 쌓여 이를 통해 뒤로가기 시 이전 페이지로 가거나 뒤로 간 이후 다시 앞으로 가는 등의 이동이 가능하도록 한다.
세션 히스토리는 아래 두 개의 함수를 통해 화면 이동 없이 현재 url을 업데이트 할 수 있다. → history를 쓰는 가장 큰 이유
history.pushState(state,title,url)
세션 히스토리에 새 url 상태를 쌓는다.
state: history.state에서 꺼내쓸 수 있는 값
title: 변경될 페이지의 title을 가리키는 값으로 보이지만 거의 대부분의 브라우저에서 지원하지 않아 빈 string을 넣으면 된다.
url: 세션 히스토리에 새로 넣을 url로, a태그를 클릭하거나 location.href로 url을 변경하는 것과는 다르게 이 url이 변경된다고 해서 화면이 재로딩 되거나 하진 않는다.
history.replaceState(state,title,url)
pushState와 달리 세션 히스토리에 새 url 상태를 쌓지 않고, 현재 url을 대체한다.
parameter는 pushState와 같지만, 뒤로가기를 제한시켜야 할 때 사용한다. (예: 게시글 작성)
주의할 점
history api로 url을 변경한 후 새로고침하면, 변경된 url의 실제 파일을 찾으려고 하기 때문에 404 에러가 난다. 따라서 404 에러 발생한 경우 root의 index.html로 요청을 돌려주는 처리가 필요하다.
popstate event를 걸어줘야 뒤로가기, 앞으로가기 했을 경우 바뀐 url에 따라 이동할 수 있다.
window.addEventListener('popstate', () => this.route());
❗️ 느낀점
찾아보니 React앱도 기본적으로 SPA이기 때문에 react-router-dom 같은 외부 라이브러리도 history를 사용한다고 한다.
외부 라이브러리를 사용할 때 단순히 편리해서가 아닌 왜 사용하고 어떻게 사용하는지 사용 전에 자세히 알아보고 사용하는 습관을 길러야겠다.
오늘도 고생했다👊