BFF(BackEnd-For-FrontEnd)

Frontend/etc

개발하는루루 2022. 12. 22. 20:58

BFF방식의 도입은 MSA와 연관이 있다.

아래는 MSA에 관한 자세한 설명이다.

MSA(Microservice Architecture) MSA와 애자일

MSA는 1개의 시스템을 독립적으로 배포 가능한 각각의 서비스로 분할한다. 각각의 서비스는 API를 통해 데이터를 주고 받으며 1개의 큰 서비스를 구성합니다. 모든 시스템의 구성요소가 한 프로젝

lulu-developmentlog.tistory.com

서비스의 규모가 커지면서 점차적으로 기업들은 MSA 방식을 채택하고

MSA에서는 각 서비스를 도메인 별로 분리시킨다.

FE 관점에서 이를 바라보면, FE의 궁극적인 업무는 화면에 필요한 데이터를 렌더링하는 일이다.

MSA 구조에서는 각 서비스가 기능 별로 흩어져 있으므로 화면을 완성하기 위해 호출해야하는 서비스가 많아진다.

즉, 한 화면을 그리기 위해 분산되어있는 여러 서비스를 호출하여 데이터를 가져와 합쳐야 하는 경우가 발생하고

복잡한 계산과 연산을 수행하면 렌더링이 느려지는 문제점이 생긴다.

특히 이러한 문제는 다양한 플랫폼을 지원하는 API에서 자주 볼 수 있다.

아래는 일반적인 API 구조이다.

모바일이든 웹이든 동일한 API를 호출하여 화면을 그리는데, 모바일에서만 필요한 데이터와 웹에서만 필요한 데이터가 다를 수 있다.

하지만 하나의 API로 이를 처리하려 하다보니 플랫폼별로 다를 수 밖에 없는 인증 방식등을 무리하게 통합하려는 시도, 여러 플랫폼과 스펙을 맞출 때의 커뮤니케이션 비용등의 문제점이 다양하게 발생할 수 있다.

아래는 각각의 플랫폼에 BFF를 적용한 구조이다.

BFF는 말그대로 프론트엔드를 위한 중간 서버를 따로 두는 것이다.

이렇게 되면 플랫폼 별로 하나의 BFF가 있고 그것은 하나의 FE와 연결된다.

BFF에서는 FE의 생산성을 높이기 위해 데이터를 통합하는 처리를 담당한다.

이렇게 되면 FE의 사소한 요구사항 (여러 API를 통합하여 하나의 데이터 도출)에도 과거와 다르게

BE와의 커뮤니케이션 비용을 해소할 수 있다.

카카오페이지는 이러한 BFF를 구현하기 위한 구현체로 graphQL을 채택했다고 한다.

graphQL과 관련한 내용도 추가적으로 업로드 해야겠다.