history API

Vanilla Javascript로 간단한 SPA 라우터 구현해보기

Vanilla Javascript로 간단한 SPA 라우터 구현하기 서론 본문을 이해하려면 History API와 브라우저의 History 스택에 대한 이해가 필요하다. SPA의 경우 페이지를 이동할 때 anchor 태그를 활용해 새로운 html을 불러오는 게 아니다. index.html 하위의 DOM을 갈아 끼우면서 다른 페이지를 보여주는 방식이다. 이때 새로운 HTML을 불러오지 않으면서 어떻게 앞으로 가기 뒤로 가기를 구현할 수 있을까? 답은 History API에 있다. 브라우저에서 제공하는 History API의 자세한 설명은 여기서 참고하길 바란다. 프로젝트 구조 ├── index.html ├── main.js ├── package.json ├── 📦 src │ ├── app.js │ ├── 📦..