프론트엔드
`API 언제 나오나요?` 로 부터 독립하기
두줄요약
RTK Query 기반 factory와 Adapter 레이어로 API 응답 모델을 화면용 데이터로 변환했습니다. API 변경이 생겨도 UI 컴포넌트 수정 범위를 최소화했습니다.
문제 상황
- API 스펙 미확정 상태에서 예측 모델과 모킹 데이터에 의존한 UI 개발
- LIVE·VOD별 상이한 엔드포인트, 데이터 구조, 필드명으로 인한 UI 리팩터링 위험
해결 방법
- API 레이어와 UI 컴포넌트 사이에 Adapter 기반 factory 레이어 추가
- RTK Query
queryFn에서 LIVE와 VOD 응답을 화면용 공통 데이터 모델로 변환·병합
구조와 흐름
- factory가 API 호출, 응답 구조 해석, 날짜·재생시간·썸네일·배지 표시값 가공 담당
- UI 컴포넌트는
description,thumbnail,badgeLabel등 표현용 prop만 수신
장단점
- API 응답 포맷이나 표시 스펙 변경을 factory 한 곳으로 국한
- UI 컴포넌트 단순화와 조기 테스트 코드 확정
- 로깅 데이터 생성과 userAgent 분기 위임 가능
