FSD 아키텍처 기반 React 프로젝트 마이그레이션 및 코드 스플리팅을 통한 성능 최적화 전략

핵심 기술

본 콘텐츠는 복잡한 웹 애플리케이션의 유지보수성과 확장성을 높이기 위해 FSD(Feature-Sliced Design) 아키텍처를 기반으로 프로젝트를 재구성하고, React의 lazy와 Suspense, 그리고 react-router를 활용한 코드 스플리팅 기법을 통해 초기 번들링 크기를 줄이고 브라우저 성능을 향상시키는 전략을 다룹니다.

기술적 세부사항

• 아키텍처 설계: 기존의 스파게티 코드 문제를 해결하기 위해 FSD 기반의 도메인 단위 폴더 구조를 채택했습니다. 이는 각 도메인(기능 단위)별로 페이지, 상태 관리(React Query, Zustand 등), API, UI 컴포넌트 등을 긴밀하게 묶어 관리 효율성을 높입니다.
• 멀티 플랫폼 확장성 고려: FSD 구조는 React Native 또는 Electron과 같은 멀티 플랫폼 확장 시, 특정 features 디렉토리만 선택적으로 마운트할 수 있어 유연성과 확장성이 뛰어납니다.
• 코드 스플리팅 및 Lazy Loading: React.lazy를 사용하여 컴포넌트 로딩 시점을 애플리케이션 로드에서 해당 라우트 진입 시점으로 지연시킵니다. 이를 통해 초기 로딩 시 필요한 코드만 다운로드하여 번들링 크기를 줄입니다.
• Suspense 활용: lazy로 로드되는 컴포넌트의 로딩 상태를 관리하기 위해 Suspense 컴포넌트를 라우트 레벨에서 감싸주어, 로딩 중 표시할 대체 UI(예: LoadingSkeleton)를 제공합니다.
• 라우터 설정: createBrowserRouter와 RouterProvider를 사용하여 동적 라우팅 설정을 구현하며, 각 라우트의 element에 Suspense를 적용하여 코드 스플리팅 효과를 적용합니다.
• 성능 측정: 실제 코드 스플리팅 없이 lazy만 적용한 경우에도 초기 렌더링 크기가 약 58% 감소하고 초기 로드 속도가 약 2.4배 향상되는 효과를 확인했습니다. 이는 SPA의 단점인 초기 로딩 속도 저하를 효과적으로 상쇄할 수 있는 전략임을 시사합니다.
• SSR vs CSR: SEO가 필요 없는 에디터 툴 개발 환경과 Electron 확장 가능성을 고려하여 SSR(Server-Side Rendering) 대신 CSR(Client-Side Rendering)과 코드 스플리팅 조합이 더 적합하다고 판단했습니다.

개발 임팩트

• 초기 로딩 속도 개선: 사용자는 애플리케이션에 접근했을 때 더 빠르게 인터랙티브한 상태를 경험할 수 있습니다.
• 브라우저 성능 향상: 불필요한 코드 로딩 및 파싱, 실행 시간을 줄여 전반적인 브라우저 성능을 향상시킵니다.
• 유지보수성 증대: FSD 기반의 구조화된 코드 관리는 개발 생산성과 코드의 일관성을 높여줍니다.
• 확장성 확보: 다양한 플랫폼으로의 확장 및 기능 추가에 대한 유연성을 제공합니다.

커뮤니티 반응

본 콘텐츠는 개발자가 실제 프로젝트 경험을 바탕으로 작성되었으며, 성능 최적화 및 구조 개선에 대한 실질적인 접근 방식을 제시하고 있어 동료 개발자들에게도 유용한 정보가 될 것으로 예상됩니다.