[React.js] BFF 패턴

BFF = Backend For Frontend

프론트엔드를 위한 백엔드?

 

BFF는 마이크로서비스 구조의 패턴 중 하나다. 기존 모놀리식 구조에서 MSA 방식으로 전환되면서 큼지막한 서비스들은 각 기능마다 분리되었고, API와 UI도 서비스별로 나뉘게 됐다.

 

 

 

 

BFF 개념

기존 우리가 생각하는 백엔드의 역할은 프론트가 정보를 요청하고, 값을 제공해주는 역할이라고 생각할 수 있다. 하지만 BFF는 프론트엔드를 위한 백엔드라는 개념이 더 강하기 때문에 주체가 프론트에 맞춰져 있다.

 

AWS에서는 BFF 패턴을 이렇게 정의하고 있다.

"BFF 패턴은 하나의 일반적인 목적을 가진 API-백엔드와는 달리 하 나의 사용자 경험에 맞춘 하나의 백엔드가 요구 되고 있다. 이 패턴이 사용되는 용도 중 하나를 예시로 들어본다면

모바일에서의 호출은 웹보다 API 요출 수가 적다. 데스크톱보다 표출되는 데이터 수를 상대적으로 적게 표현하고 있기 때문에,  api 백엔드는 모바일 인터페이스의 요구사항을 모두 충족해줘야한다. 하지만 BFF 패턴을 적용하게 되면 FE 서비스들이 각자 필요한 api 기능을 자신의 BFF에 맞춰서 구현하여 분리할 수 있다.