라이브러리 없이 바닐라 JS로 해시 라우터 직접 구현하기

SPA 개발 시 react-router-dom 같은 라이브러리에 의존하지 않고, 바닐라 JS로 라우팅 시스템을 직접 구현하는 방법을 다룬다. 라이브러리 사용 시 커스터마이징이나 메서드 추가가 막막한 개발자를 위해 라우팅의 원리를 깊이 이해하는 것을 목표로 한다.

Fragment 해시 기반 라우팅

라이브러리 없이 라우팅을 구현하는 두 가지 주요 방법은 Fragment 해시(해시 라우터)와 history API(브라우저 라우터)를 이용하는 것이다. 이 글에서는 모든 브라우저 지원과 서버 설정 간소화를 위해 Fragment 해시 방식을 선택했다. 해시 변경 시 서버 요청이나 페이지 새로고침이 발생하지 않으며, 404 에러를 방지하기 위한 별도의 서버 설정이 필요 없다는 장점이 있다.

핵심 기능 구현 단계

라우터 구현은 경로 목록 저장, URL 변경 감지 및 콘텐츠 교체, 파라미터 식별의 세 가지 핵심 기능을 중심으로 진행된다.

• 경로 매핑: routes 배열을 클로저로 관리하며 addRoute 메서드를 통해 URL과 컴포넌트를 연결한다.
• URL 감지: start 메서드에서 hashchange 이벤트를 리스닝하여 현재 해시값에 매칭되는 컴포넌트를 실행한다.
• 프로그래밍 방식 이동: <a> 태그 대신 data-navigate 속성을 가진 버튼 클릭 시 navigate 메서드를 호출하여 해시를 변경한다. location.replace 옵션을 추가해 히스토리 누적 없이 페이지 이동을 제어할 수도 있다.

Path Parameters 처리

URL의 일부인 Path Parameters(예: :name, :song)를 식별하기 위해 정규식을 활용한다. :/\w+ 패턴으로 파라미터 이름을 추출하고, 이를 실제 URL과 매칭되는 정규식([^\/]+)으로 치환하여 동적 라우팅을 지원한다. getUrlParams 함수를 통해 추출된 파라미터 값(예: {name: 'IU', song: 'raindrop'})을 해당 컴포넌트에 전달하여 동적으로 콘텐츠를 렌더링한다.