라이브러리 없이 라우터(Router) 만들기

카카오엔터테인먼트 FE 개발그룹이 라이브러리 없이 바닐라 JS 로 SPA 라우터를 직접 만들어보는 글이다. Fragment 해시를 쓰는 해시 라우터를 골라 경로 등록과 화면 교체, 프로그래밍 방식 이동, path parameter 추출까지 차례로 구현한다.

핵심 포인트

라우터를 직접 만들어보는 이유는 커스터마이징이나 메서드 추가가 필요할 때 어디서부터 손대야 할지 막막하기 때문이다.
바닐라 JS 로 라우팅을 만드는 방법은 둘이다. Fragment 해시를 쓰는 해시 라우터와 history API 를 쓰는 브라우저 라우터다.
이 글은 해시 라우터를 고른다. 브라우저 라우터도 해시 라우터를 기반으로 만들어졌고, 모든 브라우저를 지원하려면 여전히 해시 방식이 필요하다.
해시 라우터의 장점은 새로고침이나 리다이렉션 시 해시 앞의 도메인 주소로 요청이 가 항상 올바른 진입점에 닿는다는 것이다. 404 대비 서버 설정이 따로 필요 없다.
라우터의 기본 기능은 셋이다. 경로 목록 저장, URL 변경 시 매핑된 구성 요소로 콘텐츠 교체, path parameter 나 query string 식별이다.

상세 정리

Fragment 해시는 URL 에서 샵으로 시작하는 부분으로 원래는 페이지의 특정 섹션을 식별하는 용도다. 해시가 바뀌면 브라우저는 서버에 요청하지 않고 새로고침도 하지 않는다.
테스트용으로 간단한 SPA 를 만들고 앵커 태그로 링크를 걸면 클릭 시 해시값이 바뀐다.
라우터는 경로 목록을 담는 배열을 클로저로 감싸 관리하고, 등록 메서드로 URL 과 구성 요소를 매핑해 넣는다.
화면 교체는 hashchange 이벤트를 듣다가 현재 해시와 같은 값을 가진 구성 요소를 배열에서 찾아 렌더링하는 방식이다.
앵커 태그 없이 버튼 클릭 같은 프로그래밍 방식 이동이 필요하면, 버튼의 데이터 속성에 담긴 경로를 라우터에 전달하는 이벤트 리스너를 붙이고 해시값을 바꾸는 메서드를 추가한다.
이 방식으로 이동하면 히스토리가 쌓이지 않아 브라우저 뒤로가기가 비활성화되는데, navigate 메서드를 손봐 원하는 대로 바꿀 수 있다.
path parameter 는 콜론을 앞에 붙인 형태로 표기한다. 정규표현식으로 그 이름들을 추출해 배열에 담고, 해당 자리를 값 매칭용 패턴으로 치환한다.
슬래시는 텍스트로 쓰기 위해 모두 앞에 이스케이프 문자를 붙인다.
완성된 정규표현식으로 현재 URL 에서 값을 추출하는데, 매칭 결과 배열의 첫 값은 URL 전체이므로 제거하고 나머지를 이름과 짝지어 객체로 만든다.
그렇게 만든 params 객체를 구성 요소에 넘겨 화면에 출력한다.
여기까지 하면 navigate 에 상태 값을 넘기는 기능이나 query string 을 식별하는 확장도 쉽게 붙일 수 있고, history API 를 익히면 브라우저 라우터도 직접 만들 수 있다고 정리한다.

왜 읽나라우터 라이브러리를 쓰기만 하다 내부 동작이 궁금해진 프론트엔드 개발자에게, 100줄 남짓 코드로 라우팅 시스템 전체를 조립해보게 하는 글.

카카오 엔터테인먼트 FE 블로그

원문은 여기서 이어서 읽을 수 있어요

원문 읽기

읽음 (0)

·takedown 요청

라이브러리 없이 라우터(Router) 만들기

이 글과 비슷한

토스는 어떻게 광고 속에 게임을 넣었을까

RxJS로 우아하게 사이드 이펙트 통제하기

항공 프론트엔드 구축기 (7/10): 창구를 하나만 두었습니다