프론트엔드 비즈니스 로직 분리의 정석: Service Layer 패턴으로 코드 재사용성과 유지보수성을 높이는 방법

핵심 기술

이 콘텐츠는 프론트엔드에서 복잡해지기 쉬운 비즈니스 로직을 UI 컴포넌트에서 분리하여 Service Layer로 구축하는 방법을 제시합니다. 이를 통해 코드 재사용성, 테스트 용이성, 유지보수성을 극대화하는 것을 목표로 합니다.

기술적 세부사항

• 문제점 정의: 비즈니스 로직이 UI 컴포넌트(UserProfileCard.tsx)에 직접 작성될 경우 발생하는 문제점(재사용 어려움, 테스트 어려움, 관심사 분리 실패)을 명확히 지적합니다.
• Service Layer 설계: 비즈니스 로직을 전담하는 services 디렉토리와 스타일링을 전담하는 components/ui 디렉토리, 그리고 렌더링을 담당하는 features 디렉토리로 코드 관심사를 분리하는 아키텍처를 제안합니다.
  • 비즈니스 로직: userService.ts에서 getUserStatus와 같이 사용자 상태 판단 로직을 분리합니다. 타입 안전성을 위해 UserStatus 타입을 정의하고 활용합니다.
  • CSS (스타일링): UserCard.styles.ts에서 UserStatus 타입에 따른 스타일을 매핑하여 타입 안전하고 재사용 가능한 스타일링 로직을 구현합니다.
  • UI: UserProfileCard.tsx에서는 getUserStatus와 getUserCardStyles를 호출하여 비즈니스 로직과 UI 로직을 완전히 분리하고 렌더링에만 집중합니다.
• 재사용성 입증: 분리된 getUserStatus 로직을 DashboardUserList.tsx에서 추가적인 코드 복사 없이 재사용하는 예시를 보여줍니다.
• 테스트 용이성: Service Layer로 분리된 비즈니스 로직은 userService.test.ts와 같이 UI와 무관하게 독립적으로 테스트하기 용이함을 보여줍니다.
• 확장성 및 BFF 유사 패턴: 복잡한 요구사항(다중 API 호출, 부분 실패 허용)에 대응하기 위해 여러 Service를 조합하여 새로운 도메인 기능을 만들거나, aggregatedDataService.ts를 통해 BFF(Backend For Frontend) 패턴과 유사한 효과를 코드 레벨에서 구현하는 방법을 소개합니다.
• 주요 Service 예시: notificationService.ts, subscriptionService.ts, dashboardService.ts 등을 활용한 조합 로직을 보여줍니다.

개발 임팩트

• 코드의 응집도를 높여 특정 기능의 수정이 다른 부분에 미치는 영향을 최소화합니다.
• 팀원 간의 협업 시 각자의 관심사에 집중할 수 있어 생산성이 향상됩니다.
• 새로운 기능 추가 및 기존 기능 수정이 용이해져 개발 속도가 빨라집니다.
• 테스트 커버리지를 높여 코드의 안정성을 확보할 수 있습니다.
• 장기적으로는 프론트엔드 코드베이스의 복잡성을 관리하고 기술 부채를 줄이는 데 기여합니다.
• BFF 패턴을 코드 레벨에서 구현하여 별도의 백엔드 인프라 없이도 프론트엔드에 최적화된 API 조합을 제공할 수 있습니다.