목록 보기
`API 언제 나오나요?` 로 부터 독립하기
프론트엔드

`API 언제 나오나요?` 로 부터 독립하기

두줄요약

API 응답 모델이 불확실한 상황에서 factory 레이어를 둬 UI와 API 의존을 분리했습니다. LIVE와 VOD의 서로 다른 응답을 정규화해 UI 변경 범위를 줄인 사례를 소개했습니다.

핵심 내용

  • RTK Query 기반 프로젝트에서 API 레이어와 UI 컴포넌트 사이에 Adapter 성격의 factory 레이어를 추가해 API 변경 영향을 한 곳으로 모으는 설계
  • LIVE와 VOD의 서로 다른 응답 형태, snake_case 필드, 중첩 객체, 상태별 썸네일 분기, 시간 단위 차이 등을 factory에서 정규화
  • UI 컴포넌트는 화면 렌더링에 필요한 prop만 받아 표시하도록 단순화
  • API 응답 모델이 확정되지 않은 초기 개발 단계에서 모킹 예측 코드의 레거시화를 줄이는 효과

적용해볼 점

  • API 의존 로직과 화면 렌더링 로직의 분리
  • 응답 모델 변동 가능성이 큰 필드의 변환 일원화
  • 테스트 코드와 UI 변경 범위의 축소

다음 읽기

#MSW 주제를 다룬 다른 회사 글

MSW - 더 나이스한 목킹을 위한 고민

MSW를 활용해 브라우저와 Node 환경에서 API 목킹을 통합하는 방법을 정리했습니다. 개발 속도 차이와 테스트용 목업 중복 문제를 줄인 사례를 소개했습니다.

매드업
매드업
프론트엔드

댓글 0개

댓글을 작성하려면 로그인이 필요합니다.

댓글을 불러오는 중...