자바스크립트의 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
함께 읽은 게시물
🌎 해외에서 일하면 뭐가 좋을까요❓
외국어를 사용해서? 돈을 더 많이 벌어서? 새로운 기회가 많아서? 글로벌 경력을 쌓을 수 있어서?
... 더 보기PM이 이해하면 좋은 지표 개념
프로덕트 매니저(PM)로 일하면서 늘 지표 이야기를 듣게 됩니다. 대부분 PM은 선행지표(leading indicator)와 후행지표(lagging indicator)의 개념을 잘 이해하고 있습니다. 하지만 선행지표에 영향을 미치는 '인풋(input) 지표, '아웃풋(o
... 더 보기Next.js 프로젝트를 AWS EKS에 배포하며 배운 것들
최
... 더 보기
Longest Common Subsequence 자바스크립트 풀이
코
... 더 보기iOS 19가 아니라 이제 iOS 26?
매
... 더 보기하나부터 열까지 리더가 상세히 설명해 주기를 바라는 구성원이 있습니다. 반대로 큰 얼개만 듣고 나머지는 자율적으로 하고 싶어 하는 경우도 있죠. 회식에 참여하는 것을 너무나 힘겨워 하는 구성원이 있는 반면, 동료들과 함께 시간을 보내며 가까워지는 것을 원하는 구성원도 있습니다.
... 더 보기
