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

간단 소개

API 변경에 독립적인 UI 컴포넌트 개발을 위해 RTK Query와 어댑터 레이어를 활용하는 전략을 제시합니다.

AI Summary

API 변경에 따른 프론트엔드 문제 해결
- API가 확정되지 않은 상황에서 프론트엔드 개발은 예측 기반의 모킹 데이터 사용으로 시작됨.
- 실제 API 응답 모델과 예측 모델 간의 불일치로 인해 리팩토링 수준의 변경이 발생할 수 있음.
- RTK Query를 사용하여 API 레이어와 UI 컴포넌트 사이에 어댑터 레이어를 추가하여 해결.
Adapter 레이어의 역할 및 이점
- Adapter 레이어는 API 응답 형태에 대한 관심사를 분리하고, UI 컴포넌트는 필요한 데이터만 받도록 함.
- UI 컴포넌트의 변경을 최소화하고, 변경 사항을 한 곳에서 관리할 수 있도록 함.
- 테스트 코드의 조기 확정, 로깅 데이터 생성, userAgent 분기 처리 등의 추가적인 이점을 제공.
구체적인 구현 예시
- factory 패턴을 사용하여 API 응답을 가공하고 UI에 필요한 형태로 데이터를 제공.
- UI 컴포넌트는 데이터의 형태나 로직에 의존하지 않고, 스타일링 및 화면 표시에 집중.
- 예시 코드에서는 parsedCreatedAt, parsedViewCount, badgeLabel, thumbnail 등의 속성을 factory에서 가공하여 UI 컴포넌트에 전달하는 방법을 보여줌.