핀테크그룹의 GraphQL 기반 BFF와 프론트엔드 활용기

이 게시물은 핀테크그룹에서 GraphQL 기반의 Backend For Frontend(BFF)를 도입하고 프론트엔드에서 활용하는 방법과 효과를 소개합니다.

BFF의 등장 배경과 개념

• MSA 도입으로 인한 엔드포인트 분산, 인증·정책 중복 문제 해결
• BFF는 프론트엔드 전용 서버 계층으로 데이터 집계, 가공, 보안·CORS 정책 통제 역할 수행

핀테크그룹 BFF 기술 스택과 도입 효과

• NestJS, Fastify, Apollo Server·Client, GraphQL, TypeScript 기반
• GraphQL 쿼리 및 타입 자동 생성으로 프론트엔드 생산성 및 타입 안정성 확보
• 백엔드 변경 영향 최소화, API 호출 복잡도 감소, 보안 정책 일원화

Apollo Client 캐싱과 주의점

• 기본적으로 __typename과 id로 정규화 캐싱하나, 복합 키가 필요한 경우 keyFields 재정의 필요
• 실제 사례로 동일 id에 다른 속성 조합이 있을 때 캐시 병합 문제 및 해결법 설명

BFF 도입 시 고려사항

• 운영 복잡성 증가, 장애 지점 추가, 테스트·배포 관리 필요
• 서비스 도메인 복잡도 증가 및 마이크로서비스 확장 시 도입 추천

마치며

글 작성 과정에서 BFF의 역할과 캐싱 개념에 대한 깊은 이해를 얻었으며, 시스템을 다양한 관점에서 바라보는 중요성을 강조합니다.