자바스크립트의 History API와 클라이언트 단 라우팅
www.daleseo.com
자바스크립트의 History API와 클라이언트 단 라우팅
URL이 바뀔 때 마다 새로운 페이지를 서버로 요청하지 않는 SPA(Single Page Application)에서는 보통 클라이언트 단에서 라우팅(routing)을 하는데요. 그래서 React, Svelte, Vue.js와 같은 대부분의 프론트엔드 프레임워크을 사용할 때는 이러한 클라이언트 단 라우팅을 지원하는 라이브러리와 함께 쓰는 경우가 많습니다.
그런데 이러한 라우팅 라이브러리는 대부분은 내부적으로 자바스크립트의 History API를 사용하고 있다는 것을 알고 계셨나요? 이번 글에서는 클라이언트 단 라우팅을 이해하는데 핵심적인 자바스크립트의 History API에 대해서 알아보고 간단한 실습도 진행해보겠습니다.
📝 포스팅: https://www.daleseo.com/js-history-api/
🧑💻 실습 코드: https://codepen.io/daleseo/pen/JjwPBwv
실제 애플리케이션을 개발하실 때는 이미 많은 프로젝트에서 검증이 된 유명한 라우팅 라이브러리를 사용하실테니 이렇게 직접 라우팅을 구현할 일은 없으실 것입니다. 하지만 라우팅 라이브러리가 내부적으로 어떻게 동작하시는지 이해하신다면 버그가 생겼을 때 디버깅이 용이해지고 나중에 다른 프론트엔드의 라우팅 라이브러리를 배울 때도 큰 도움이 될 것입니다.
다음 내용이 궁금하다면?
이미 회원이신가요?
2024년 6월 19일 오후 8:19
댓글 0
함께 읽은 게시물
쫓아다니지 말고 대응하라
두 카페가 있다. 두 카페 모두 점원이 주문을 받고 커피를 내리는 카페였다. 그런데, 어느 날 한 카페에서 키오스크를 도입했다. 그렇다면, 여전히 점원이 주문을 받는 카페보다 키오스크를 도입한 카페가 변화에 더 기민하게 대응하는 것일까? 그럴 수도 있고, 그렇지 않을 수도 있다. 변화에 기민하게 대응한다는 건, 변화를 빨리 도입한다는 것과는 다른 이야기이기 때문이다.
... 더 보기
