프론트엔드
라이브러리 없이 라우터(Router) 만들기
두줄요약
바닐라 JavaScript로 Fragment 해시 기반 SPA 라우터를 구현하는 과정을 소개했습니다. 경로 등록, 페이지 전환, 프로그래밍 이동, path parameter 추출을 다뤘습니다.
구조와 흐름
- Fragment 해시와
hashchange이벤트 기반의 바닐라 JavaScript SPA 라우팅 - 경로·컴포넌트 매핑을 저장하는
routes레지스트리와addRoute,start메서드 - 해시 변경 감지 후 현재 경로에 대응하는 컴포넌트 렌더링
선택 이유
- 서버 요청·페이지 새로고침 없이 동작하는 Fragment 해시 특성
- 새로고침·리다이렉션 시 엔트리 포인트 요청으로 별도 404 서버 설정 부담 감소
- 브라우저 호환성 확보를 위한 해시 라우터 선택
해결 방법
data-navigate클릭 이벤트와navigate메서드를 통한 프로그래밍 방식 이동location.replace옵션으로 히스토리 미적재 이동 지원- 정규표현식으로
:name,:song경로 패턴 매칭 및 파라미터 객체 추출
적용해볼 점
navigate에 상태 전달 기능 추가 가능성- 정규표현식 기반 쿼리 문자열 식별 기능 확장
- History API 학습을 통한 브라우저 라우터 구현 확장
