카카오 전자증명서, React Router 기반 동적 라우팅으로 초기 로딩 100KB 절감

카카오톡 전자증명서 서비스는 React Router를 사용하던 초기 구조에서 페이지와 레이어가 증가함에 따라 코드 복잡도와 번들 사이즈가 커지는 문제를 겪었습니다. 이에 따라 Next.js의 파일 시스템 기반 라우팅 개념을 차용하여, URL 경로에 따라 필요한 컴포넌트만 **동적 로딩(Dynamic Import)**하도록 구조를 개선했습니다.

라우팅 구조 개선 및 코드 분할

기존에는 모든 페이지 컴포넌트를 App.jsx에서 정적으로 import하여 Route에 연결했으나, 개선 후에는 React.lazy와 유사한 방식으로 각 경로별 컴포넌트를 런타임에 불러오도록 변경했습니다. useRouteComponent 커스텀 훅을 만들어 페이지와 레이어 타입에 따라 pages 또는 layer 폴더 하위의 파일을 동적으로 import하며, matchPath를 통해 현재 URL과 일치하는 라우트만 렌더링하도록 처리했습니다.

성능 개선 효과

이러한 라우트 기반 코드 분할(Route-based Code Splitting) 적용으로 초기 로딩 시 필요한 페이지 파일 사이즈가 약 100KB 감소했습니다. 이는 추후 추가될 약 30종류 이상의 증명서 및 확인서에도 적용될 예정으로, 코드가 추가될수록 지연 로딩의 성능 이점이 더욱 커질 것으로 기대됩니다.