프론트엔드
핀테크그룹의 GraphQL 기반 BFF와 프론트엔드 활용기
두줄요약
GraphQL 기반 BFF의 역할과 프론트엔드 활용 사례를 설명했습니다. Apollo Client 캐싱 문제와 BFF 도입 시 고려할 점도 함께 정리했습니다.
핵심 내용
- GraphQL 기반 BFF가 프론트엔드 전용 서버 계층으로서 여러 마이크로서비스 데이터를 집계·가공하는 역할
- Apollo Client와 graphql-codegen 조합으로 타입 안정성과 선언적 데이터 조회를 확보하는 활용 방식
- 기본 캐싱 정책으로 인한 데이터 병합 문제와 keyFields 재정의 사례
- BFF 도입 시 생산성 향상과 함께 운영 복잡성, 실패 지점 증가 같은 사이드 이펙트도 존재
선택 이유
- 백엔드 스펙 변경에도 프론트엔드 영향 완화
- 인증·인가·CORS·로깅의 단일 진입점 통제
- GraphQL 쿼리 중심 개발로 코드 생성과 유지보수 효율 개선
주의할 점
- Apollo Client의 __typename:id 기반 캐싱으로 동일 id 데이터가 병합될 수 있음
- 엔티티 식별 기준이 복합키라면 typePolicies의 keyFields 설정 필요
- BFF는 추가 계층이므로 장애 대응과 모니터링 범위 확대
적용해볼 점
- 마이크로서비스 증가로 프론트엔드 통신 복잡도가 커질 때 BFF 검토
- 잦은 백엔드 스펙 변경을 BFF에서 흡수하는 구조 고려
- GraphQL과 Codegen으로 타입 안정성 및 생산성 확보