피드로 돌아가기
Dev.toFrontend
원문 읽기
Pure Function 기반 설계로 Timezone 및 SSR 이슈를 해결한 52주 플래닝 그리드 구현
Building a timezone-safe 52-week planning grid in React
AI 요약
Context
단순 표 구조로 보이지만 가변적인 주차 계산, 회계 연도 기준의 시작 월 변경, Timezone에 따른 날짜 불일치 등 복잡한 도메인 제약이 존재하는 그리드 시스템 설계 필요. 특히 SSR 환경에서 클라이언트와 서버 간의 '현재 시간' 인식 차이로 인한 Hydration Mismatch 발생 위험 상존.
Technical Solution
- ISO-8601 및 4-4-5 회계 패턴을 WeekStrategy 인터페이스로 추상화하여 비즈니스 요구사항에 따른 가변적 주차 계산 로직 구현
- 시작 월(startMonth) 설정을 기반으로 한 Column Rotation 알고리즘을 적용하여 특정 월부터 시작하는 유연한 연간 뷰 구조 설계
- Intl.DateTimeFormat API를 활용한 로컬라이제이션 처리로 하드코딩된 월 이름 제거 및 다국어 지원 보장
- new Date() 호출을 컴포넌트 최상단으로 격리하고 하위 로직에 파라미터로 주입하는 Dependency Injection 패턴을 통해 결정론적(Deterministic)인 순수 함수 엔진 구축
- 시즌 밴드(Season Band)를 월 집합 데이터로 정의하고 회전된 컬럼 배열에서 연속된 구간을 추출하는 방식으로 연도 경계 wrap-around 문제 해결
- Row 단위 Memoization 및 Stable Key 적용을 통해 약 4,000개 셀의 렌더링 최적화 및 인터랙션 성능 확보
실천 포인트
1. 날짜 계산 로직 내부에 new Date()를 직접 사용하고 있지 않은가?
2. 비즈니스 캘린더 규칙(ISO vs 회계연도)이 전략 패턴으로 분리되어 있는가?
3. 대규모 그리드 렌더링 시 셀 단위가 아닌 Row 단위로 Memoization을 적용했는가?
4. CSS @media print 설정을 통해 A3/A4 등 물리적 출력 환경의 레이아웃을 정의했는가?