[8팀 현지수] Chapter 3-2. 프런트엔드 테스트 코드

[hyunzsu]

8주차 과제 체크포인트

기본 과제

필수

• 반복 유형 선택
  • 일정 생성 또는 수정 시 반복 유형을 선택할 수 있다.
  • 반복 유형은 다음과 같다: 매일, 매주, 매월, 매년
    • 31일에 매월을 선택한다면 -> 매월 마지막이 아닌, 31일에만 생성하세요.
    • 윤년 29일에 매년을 선택한다면 -> 29일에만 생성하세요!
• 반복 일정 표시
  • 캘린더 뷰에서 반복 일정을 시각적으로 구분하여 표시한다.
    • 아이콘을 넣든 태그를 넣든 자유롭게 해보세요!
• 반복 종료
  • 반복 종료 조건을 지정할 수 있다.
  • 옵션: 특정 날짜까지, 특정 횟수만큼, 또는 종료 없음 (예제 특성상, 2025-06-30까지)
• 반복 일정 단일 수정
  • 반복일정을 수정하면 단일 일정으로 변경됩니다.
  • 반복일정 아이콘도 사라집니다.
• 반복 일정 단일 삭제
  • 반복일정을 삭제하면 해당 일정만 삭제합니다.

선택

• 반복 간격 설정
  • 각 반복 유형에 대해 간격을 설정할 수 있다.
  • 예: 2일마다, 3주마다, 2개월마다 등
• 예외 날짜 처리:
  • 반복 일정 중 특정 날짜를 제외할 수 있다.
  • 반복 일정 중 특정 날짜의 일정을 수정할 수 있다.
• 요일 지정 (주간 반복의 경우):
  • 주간 반복 시 특정 요일을 선택할 수 있다.
• 월간 반복 옵션:
  • 매월 특정 날짜에 반복되도록 설정할 수 있다.
  • 매월 특정 순서의 요일에 반복되도록 설정할 수 있다.
• 반복 일정 전체 수정 및 삭제
  • 반복 일정의 모든 일정을 수정할 수 있다.
  • 반복 일정의 모든 일정을 삭제할 수 있다.

심화 과제

• 이 앱에 적합한 테스트 전략을 만들었나요?

8팀 전략 (#27)

---

기술적 성장

1. 반복 일정 기능 구현 과정 (TDD 기반 3단계)

Phase 1: Core Utilities

반복 일정 생성 로직의 핵심 기능 구현

# 1. 기본 반복 로직
RED → generateRepeatEvents 함수 테스트 작성
GREEN → daily/weekly 반복 구현 
REFACTOR → 코드 정리 및 함수 분리

# 2. 월/년 반복 로직  
RED → monthly/yearly 테스트 추가
GREEN → 월/년 반복 로직 구현
REFACTOR → 중복 코드 제거

# 3. 특수 케이스 처리
RED → 31일 매월 반복, 윤년 처리 테스트
GREEN → 날짜 유효성 검사 로직
REFACTOR → 에러 처리 및 날짜 계산 함수 개선

Phase 2: API Integration

서버 연동 및 데이터 처리 로직

# 1. 반복 일정 저장
RED → POST /api/events-list API 테스트
GREEN → useEventOperations에 반복 저장 로직
REFACTOR → API 호출 로직 정리

# 2. 반복 일정 수정/삭제
RED → 단일 수정 시 repeat.type = 'none' 테스트
GREEN → 수정/삭제 로직 구현
REFACTOR → 상태 관리 최적화

Phase 3: UI Integration

사용자 인터페이스 및 UX 구현

# 1. 폼 컴포넌트
RED → 반복 옵션 UI 테스트
GREEN → useEventForm 훅에 반복 상태 추가
REFACTOR → 폼 상태 관리 개선

# 2. 캘린더 표시
RED → 반복 일정 아이콘 표시 테스트
GREEN → 캘린더 뷰에 Repeat 아이콘 추가
REFACTOR → 컴포넌트 렌더링 최적화

2. TDD 프로세스의 체계적 적용

• 새로 학습한 개념: RED-GREEN-REFACTOR 사이클의 실제 적용
• 기술적 도전: 복잡한 날짜 로직을 테스트 케이스로 먼저 정의하는 어려움
• 해결 과정: 작은 단위부터 점진적 확장 (daily → weekly → monthly → yearly)
• 핵심 인사이트: 테스트가 요구사항의 명세서 역할을 하면서 구현 방향을 명확하게 가이드

코드 품질

1. 반복 이벤트 생성 로직의 함수 분리

// 타입별 전용 함수로 분리하여 가독성과 테스트 용이성 확보
export function generateDailyRepeatEvents(event: EventForm, repeatConfig: RepeatInfo): EventForm[]
export function generateWeeklyRepeatEvents(event: EventForm, repeatConfig: RepeatInfo): EventForm[]  
export function generateMonthlyRepeatEvents(event: EventForm, repeatConfig: RepeatInfo): EventForm[]
export function generateYearlyRepeatEvents(event: EventForm, repeatConfig: RepeatInfo): EventForm[]

• 장점: 각 반복 타입의 복잡한 로직을 독립적으로 구현하고 테스트 가능
• 결과: 31일 매월 반복, 윤년 처리 등 복잡한 엣지 케이스를 안전하게 처리

2. 엣지 케이스 처리의 명확한 테스트 케이스

it('31일 매월 반복 - 31일이 없는 달은 스킵', () => {
  // 실제 캘린더 앱에서 발생할 수 있는 복잡한 시나리오를 테스트
})

학습 효과 분석

Before: TDD는 시간이 많이 걸리는 번거로운 과정이라고 생각
After: 복잡한 로직일수록 테스트가 안전망 역할을 하며 개발 속도 오히려 향상

리뷰 받고 싶은 내용

기존 프로젝트에 테스트 코드 점진적 도입 전략

이번 과제를 통해 비즈니스 로직(날짜 계산, 반복 일정 생성)에서 TDD의 효과를 체감했는데, 실무에서는 기존 레거시 코드베이스에 테스트를 어떻게 점진적으로 도입하는 것이 현실적일까요?