자바스크립트의 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


실제 애플리케이션을 개발하실 때는 이미 많은 프로젝트에서 검증이 된 유명한 라우팅 라이브러리를 사용하실테니 이렇게 직접 라우팅을 구현할 일은 없으실 것입니다. 하지만 라우팅 라이브러리가 내부적으로 어떻게 동작하시는지 이해하신다면 버그가 생겼을 때 디버깅이 용이해지고 나중에 다른 프론트엔드의 라우팅 라이브러리를 배울 때도 큰 도움이 될 것입니다.

자바스크립트의 History API와 클라이언트 단 라우팅

www.daleseo.com

자바스크립트의 History API와 클라이언트 단 라우팅

다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2024년 6월 19일 오후 8:19

 • 

저장 22조회 3,484

댓글 0

    함께 읽은 게시물



    React Testing Library 사용법

    T

    ... 더 보기

     • 

    저장 30 • 조회 2,579


    살민 살아진다

    ... 더 보기

    (번역) Create React App 지원 종료

    C

    ... 더 보기

    (번역) Create React App 지원 종료

    www.harimkim.com

    (번역) Create React App 지원 종료

    코딩 인터뷰 중 AI를 사용해도 될까요...? 🤔

    코딩 인터뷰를 하던 중 지원자로부터 AI를 써도 되겠냐는 질문을 받았습니다. 인터넷 검색을 해도 되냐고 물어보는 지원자는 종종 만나는데, AI를 써도 되느냐는 질문은 처음 받아봐서 좀 당황스럽더군요. 어떤 용도로 AI를 사용하시려는지 물어보았고, 익숙치 않은 프

    ... 더 보기

     • 

    댓글 1 • 저장 17 • 조회 4,299