카카오페이지는 BFF(Backend For Frontend)를 어떻게 적용했을까?

간단 소개

카카오페이지는 BFF를 통해 프론트엔드의 복잡성을 줄이고 효율적인 데이터 관리를 구현했습니다. GraphQL과 Urql을 활용한 구조를 소개합니다.

AI Summary

BFF(Backend For Frontend)의 필요성
- 다양한 플랫폼 지원 시 각 플랫폼에 필요한 데이터만 제공해야 하는 상황 발생
- 여러 API 호출 응답을 조작, 혼합해야 하는 상황 발생
- 프론트엔드에서 복잡한 계산이나 비즈니스 로직을 처리해야 하는 상황 발생
BFF 구조 및 장점
- 프론트엔드를 위한 중간 서버를 구현하여 API 의존성 이슈 해결
- MSA 환경에서 API 엔드포인트 분리, CORS 처리, 플랫폼별 인증 방식 처리 등을 BFF에서 담당
- GraphQL을 사용하여 필요한 데이터만 가공하여 응답하고, 불필요한 데이터 제거
카카오페이지의 BFF 적용 사례
- Next.js, Apollo Server, Urql, Redux를 사용하여 BFF 구조를 구축
- Apollo Client의 캐싱 문제점을 해결하기 위해 Urql 사용
- GraphQL로 데이터를 가져오고, Redux를 사용하여 비동기 데이터 수정 및 상태 관리