선정 이유

• 2022 하반기 FE 데브매칭 미션으로 제공
• 바닐라 자바스크립트 복습
• History, Window 객체 조사
• 프론트 환경 조성시 필수적으로 관련 패키지 설치로 다뤄야할 주제로 확인

용어 정리

SPA(single page application)

서버로부터 새로운 페이지를 불러오는게 아닌 현재 있는 페이지를 동적으로 재작성되어서 사용자에게 여러 페이지를 보는듯한 경험을 주는 웹 사이트

Routing system(라우팅 시스템)

라우팅은 네트워크상 통신 데이터를 전송할 때 최적의 경로를 선정하는 의미지만 프론트엔드에서는 페이지간 이동을 의미, URL이 바뀜에 따라 페이지 이동이 발생하는 시스템을 말함

구현 방식

바닐라 자바스크립트로 SPA에서 라우팅 시스템을 구축하려면 크게는 2가지 방식이 있다

1. History 객체 사용
   • 브라우저가 갖고있는 Web API를 사용
   • 페이지를 리로드하지 않고 URL 탐색이 가능

     • SPA이기 때문에 직접 URL로 접근하려고 하면 404 에러가 발생

       → 서버사이드에서 해결해주는 방식이 있음