라이브러리 없이 라우터(Router) 만들기
프론트엔드
라이브러리 없이 라우터(Router) 만들기
두줄요약
바닐라 JS로 해시 라우터를 직접 구현하는 과정을 설명했습니다. 경로 매핑, navigate, path parameter 추출까지 확장하는 방법을 다뤘습니다.
핵심 내용
- 바닐라 JS로 해시 라우터를 직접 구현하는 방법 소개
routes배열로 경로-컴포넌트 매핑 저장hashchange이벤트로 현재 URL 변경 감지 후 화면 교체navigate메서드와replace옵션으로 프로그래밍 방식 이동 지원
적용해볼 점
- path parameter를 정규표현식으로 추출해 동적 라우트 확장
- 해시 라우팅 구조 이해를 바탕으로 브라우저 라우터 학습으로 연결