[프론트엔드] BFF, MSA아키텍처에서 중간자 역할 수행

[요약]

BFF는 MSA환경에서 프론트엔드와 백엔드 사이의 간극을 해소하는 역할을 하며, MSA의 단점을 보완하는 데 도움을 줄 수 있다.

모놀로식 아키텍처에서 MSA로 전환하면서 시스템이 복잡해지는 경우가 많다.

 

특히, 프론트엔드 개발자는 여러 백엔드 서비스에서 필요한 데이터를 가져와 조합해야 하는 어려움을 겪는다.

이 때 BFF 패턴을 적용하여 최적화된 API를 전달받아 프론트엔드 복잡성을 줄이고 개발 효율성을 높일 수 있다.

 

 

[BFF]

BFF(Backend for Frontend)는 클라이언트가 백엔드 API를 직접 호출할 때 발생하는 여러 문제를 해결하기 위해, 프론트엔드를 위한 보조 서버를 두는 방식이다.BFF는 클라이언트와 백엔드 사이에서 데이터 가공 및 전달을 담당하며, 이를 통해 프론트엔드가 효율적으로 동작할 수 있도록 도와준다.

 

1. BFF는 MSA(Microservices Architecture) 환경에서 여러 API로부터 받은 데이터를 조합 및 가공하기 위해 활용된다.

모놀로식 아키텍처

- 백엔드: 모든 로직 처리

- 프론트엔드: 단순 렌더링

모놀로식 아키텍처 -> MSA 전환

- 프론트엔드: 여러 API 호출 및 처리로 코드 복잡도 증가 문제

BFF도입

- 중간계층역할: 여러 API 정보를 가공하여 프론트엔드로 전달

 

2. BFF는 다양한 플랫폼 환경에 맞는 데이터로 가공하기 위해 활용된다.

다양한 플랫폼의 등장 -> 받을 수 있는 정보 다양 및 증가 -> 네트워크 비용문제 발생

-> BFF활용하여 선택적 정보 제공 및 최적화 API 프론트엔드에 전달

 

3. 여러 활용

API 키 및 인증 정보 관리, CORS 문제 해결: 클라이언트 단에서 발생할 수 있는 다양한 이슈를 효과적으로 해결할 수 있다.

백엔드 시스템 변경 시 프론트엔드 코드의 수정 범위를 최소화: 유지보수성을 높이는 데 도움이 된다.

 

[적용사례]

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

출처: https://fe-developers.kakaoent.com/2022/220310-kakaopage-bff/

카카오페이지는 BFF(Backend For Frontend)를 어떻게 적용했을까? | 카카오엔터테인먼트 FE 기술블로그