
프론트엔드
React Query 버전업 과정에서 발견한 API 관리 구조의 결함
두줄요약
React Query 버전업 과정에서 코드 생성 기반 API 관리 구조의 결함을 발견했습니다. 라이브러리 의존성을 분리하고 어댑터로 호환성을 확보하는 방향으로 개선했습니다.
핵심 내용
- OpenAPI Generator 기반 자동 생성 구조로 TypeScript 타입, Axios Fetcher, React Query 훅까지 한 번에 묶어 관리한 초기 API 관리 방식
- API 수 증가와 함께 useRemote의 과도한 추상화로 쿼리 키 생성, 캐시 무효화, 인터셉터 제어, 기술 변화 대응이 어려워진 문제
- React Query v5 업그레이드에서 useSuspenseQuery 도입 등 파괴적 변경이 전체 코드 생성물과 사용처로 대규모 전파된 사례
적용해볼 점
- 코드 생성 단계에서 라이브러리 의존성을 줄이고 Fetcher와 모델만 생성하는 방향
- 실제 호출 지점에서 쿼리 훅을 구성해 제어권을 확보하는 방식
- 어댑터 패턴으로 라이브러리 호환성을 유지하면서 결합도 낮추는 설계
