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

간단 소개

라이브러리 없이 바닐라 JS로 라우터를 직접 구현하여 라우팅 시스템을 깊이 이해하고, 필요에 따라 확장하는 방법을 제시합니다.

AI Summary

라우팅 시스템 이해 및 구현
- SPA 개발 시 라우터 라이브러리 사용의 한계점을 극복하고, 직접 라우터를 개발하여 라우팅 시스템에 대한 깊은 이해를 목표로 함
- 바닐라 JS를 이용한 Fragment 해시 방식(해시 라우터) 구현 방법을 소개하고, history API를 이용한 방법(브라우저 라우터)에 대한 언급
라우터 기능 구현 및 확장
- 라우터의 기본 기능(경로 목록 저장, URL 변경 감지, path parameter 식별)을 구현하고, SPA에 적용하는 과정 설명
- addRoute, start, navigate 등의 메서드를 구현하고, 필요에 따라 커스터마이징 및 확장하는 방법 제시
- 정규표현식을 사용하여 URL에서 path parameter를 추출하고, 이를 활용하여 동적인 페이지 구성 요소 표시
결론 및 확장 가능성
- 라우터 직접 구현을 통해 라우팅 시스템에 대한 이해도를 높이고, 문제 해결 능력 향상
- navigate 메서드에 state를 넘겨주는 기능, Query string 식별 기능 추가 등 라우터 확장 가능성 제시
- history API 학습을 통해 브라우저 라우터 직접 구현 가능성을 언급