아카이브사이트맵
© 2026 Rayon. All rights reserved.
DevDay
아티클랭킹스페이스채용
컬리 favicon컬리

핀테크 BFF 구축, 프론트엔드 생산성 쑥쑥!

by DD
2025-10-16
9개월 전
조회수 8

BFF는 MSA 환경에서 프론트엔드 개발을 위한 전용 서버 계층으로 등장

GraphQL과 Apollo Client를 활용하여 타입 안정성과 개발 생산성을 향상시킴

캐싱 전략, 특히 Apollo Client의 캐싱 정책 이해가 중요하며, id 중복 문제 해결

BFF 아키텍처: MSA 환경의 프론트엔드 혁신

BFF는 MSA 환경에서 프론트엔드 개발 생산성을 높이기 위해 등장했다. 여러 마이크로서비스에서 필요한 데이터를 수집, 가공하여 프론트엔드에 제공한다. 따라서 백엔드 변경에도 프론트엔드는 영향을 받지 않으며, CORS 및 인증 문제를 BFF에서 일괄 처리하여 관리 효율성을 높인다.

GraphQL과 Apollo Client: 프론트엔드 개발의 강력한 조합

GraphQL은 필요한 데이터만 요청하는 유연성을 제공하며, Apollo Client는 이를 활용하여 타입 안정성을 확보한다. graphql-codegen을 통해 쿼리 작성만으로 타입스크립트 코드를 자동 생성하여 개발 생산성을 향상시킨다. 반면, REST API는 응답 스펙 변경 시 타입 수정을 수반한다.

Apollo Client 캐싱: 성능 향상과 데이터 일관성 확보

Apollo Client는 정규화 캐싱 방식을 사용하여 데이터 중복을 방지하고 성능을 향상시킨다. 캐시 식별자 설정은 데이터 일관성을 유지하는 핵심이며, keyFields 설정을 통해 id 중복 문제를 해결한다. 따라서, 캐싱 전략은 UI 렌더링 속도와 데이터 무결성을 모두 고려해야 한다.

핀테크그룹의 GraphQL 기반 BFF와 프론트엔드 활용기
중급
아키텍처
GraphQL
Apollo Client
TypeScript
NestJS
JavaScript
Backend
Frontend
원문 읽기
원문 읽기

댓글 0

첫 번째 댓글을 남겨보세요!

관련 추천 글

크로키, GraphQL 도입으로 API 개발 생산성 UP!

카카오스타일 로고

AI 코딩, 이제 하네스 시대: OpenCode와 OMO로 개발 생산성 UP!

요즘IT 로고

AI 코딩, 이제 하네스 경쟁 시대! OpenCode와 OMO로 생산성 UP

벨로그 로고

2026년 풀스택 개발, 핵심은 기본기!

데브투 로고

AI 시대, 백엔드 개발자는 문제 해결 능력과 유연한 기술 선택이 핵심!

요즘IT 로고

Typescript, 왜 개발자들이 열광할까? 핵심 개념 6가지 완벽 분석!

레딧 로고
컬리 favicon컬리
중급
아키텍처
GraphQL
Apollo Client
TypeScript
NestJS
JavaScript
Backend
Frontend

관련 추천 글

크로키, GraphQL 도입으로 API 개발 생산성 UP!

카카오스타일 로고

AI 코딩, 이제 하네스 시대: OpenCode와 OMO로 개발 생산성 UP!

요즘IT 로고

AI 코딩, 이제 하네스 경쟁 시대! OpenCode와 OMO로 생산성 UP

벨로그 로고