Typescript로 설계하는 프로젝트 "당하지 않는 Service Layer 설계 전략"

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

프론트엔드 개발자 및 아키텍처 설계자, 중급~고급 이상의 기술 스택 보유자

핵심 요약

• Service Layer 분리 : 비즈니스 로직을 컴포넌트에서 분리하여 getUserStatus와 같은 타입 안전한 함수로 재사용 가능
• 테스트 용이성 : userService.test.ts에서 getUserStatus를 독립 테스트 가능, createMockUser를 통해 모킹 기능 활용
• BFF 패턴 유사성 : dashboardService.ts에서 getUserDashboardData를 통해 다중 서비스 조합으로 복잡한 도메인 로직 구현

섹션별 세부 요약

1. 기존 문제점 및 코드 예시

• 혼합된 로직 : UserProfileCard.tsx에서 user.isPremium과 lastLoginDate 조건에 따라 카드 색상 결정
• 유지보수 어려움 : 비즈니스 로직이 UI와 결합되어 if-else로 복잡도 증가
• 중복 처리 : 동일한 user.status 판단 로직이 여러 컴포넌트에 복사

2. Service Layer 설계 및 구현

• 비즈니스 로직 분리 : userService.ts에서 getUserStatus 함수로 UserStatus 타입 정의 및 상태 판단
• 타입 안전한 스타일링 : UserCard.styles.ts에서 styleMap과 badgeStyleMap으로 UserStatus 기반 스타일 매핑
• UI 분리 : UserProfileCard.tsx에서 getUserStatus와 getUserCardStyles 호출로 로직 분리

3. 재사용성 및 테스트

• 서비스 재사용 : DashboardUserList.tsx에서 getUserStatus 함수만 import하여 동일 로직 적용
• 모킹 기능 : createMockUser 함수를 통해 테스트 데이터 생성, getUserStatus 테스트 케이스 작성
• 단위 테스트 : userService.test.ts에서 premium-active, new, inactive 상태별 케이스 테스트

4. 복잡한 로직 처리 및 BFF 패턴

• 다중 서비스 조합 : dashboardService.ts에서 getUserDashboardData로 getUserStatus, getSubscriptionTier 등 조합
• API 병렬 호출 : aggregatedDataService.ts에서 Promise.allSettled로 getUserById, getUserProjects 등 병렬 처리
• BFF 유사 구현 : 프론트엔드 최적화된 데이터 제공, 네트워크 효율성 확보

결론

• Service Layer 분리를 통해 비즈니스 로직 재사용, 테스트 용이성, 유지보수성 향상
• BFF 패턴 유사 구현으로 복잡한 데이터 조합 가능, 네트워크 최적화 및 에러 처리 강화
• getUserStatus와 styleMap 등 타입 안전한 설계가 핵심, createMockUser로 모킹 기능 활용 필수