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

간단 소개

컬리 핀테크그룹의 GraphQL 기반 BFF 도입 배경, 기술 스택, 활용 사례 및 고려사항을 다루며, 프론트엔드 생산성 향상과 백엔드 의존성 감소 효과를 설명합니다.

AI Summary

BFF 개념 및 도입 배경
- **BFF(Backend For Frontend)**는 MSA 환경에서 프론트엔드의 복잡한 API 관리, 통신 비용, 플랫폼별 인증/정책 중복 문제를 해결하기 위한 전용 서버 계층입니다.
- 여러 서비스 데이터를 수집·가공하여 프론트엔드에 전달하며, 백엔드 스펙 변경 시 프론트엔드 영향을 최소화하는 완충 계층 역할을 합니다.
핀테크그룹의 BFF 기술 스택 및 효과
- NestJS, GraphQL, Fastify, Apollo (Server/Client)를 활용하여 BFF를 구축했습니다.
- GraphQL과 graphql-codegen은 TypeScript 코드 자동 생성으로 프론트엔드 생산성과 타입 안정성을 높이며, 백엔드 의존성 감소 및 보안 일원화 효과를 제공합니다.
- Apollo Client의 정규화 캐싱은 효율적이지만, 캐시 식별자(keyFields) 설정에 유의해야 합니다.
BFF 도입 시 고려사항
- BFF는 생산성을 높이지만, 레이어 추가로 인한 실패 지점 증가 및 시스템 복잡성 증가와 같은 사이드 이펙트가 있습니다.
- 서비스 도메인 복잡화, 잦은 백엔드 스펙 변경, 프론트엔드-백엔드 소통 비용 증가 시 BFF 도입을 고려할 만합니다.