FrontEnd

[개발용어] BFF 패턴이 무엇인가?

김평범님 2023. 3. 9. 21:20
반응형

BFF 패턴

Backend for Frontend의 약자로 간단히 말하면 프런트앤드를 위한 백앤드 서버를 말한다.

(왼) 일반적인 API 서비스 패턴 (우) BFF 패턴

 

BFF패턴이 발생하게된 이유는 다양한 디바이스 장치 때문이다.

같은 서비스라도 다양한 디바이스 장치가 생겨나면서 각각 환경에 맞는 UI가 필요해졌고

프런트앤드 개발자들은 이전에 비해 더 많은 클라이언트 환경을 고려하게 되었다.

(PC, 모바일, 애플워치, 태블릿 등..)

 

같은 서비스라도 사용하는 디바이스 환경에 따라서 보이지는 디자인과 데이터도 달라지게 되는데,

이런 분기 처리를 하기 위해 나타난 것이 바로 BFF 패턴이다.

 


 

BFF패턴의 특징

프론트앤드 요구사항에 맞는 도움을 주는 보조 서버 개념으로

BFF패턴은 하나의 클라이언트에 하나의 매칭되는 BFF가 존재한다.

 

BFF는 하나의 큰 프로젝트 구조인 모놀리틱 구조라면 전혀 필요하지 않고

MSA(마이크로 서비스 아키텍쳐)를 이용할 때 유용한 패턴이다.

 

하지만, 각각 호출하는 API를 각 디바이스 별로 코드를 다시 만들어줘야되기 때문에

코드 중복이 되거나 재작성되는 불편함도 가지고있다.

 

BFF의 역할

  • API 호출 최소화
  • 클라이언트 별 필요한 데이터 파싱
  • 프론트앤드 로직 최소화 가능

 

위 역할을 볼 수 있는 상황을 만들어보자.

 

 


쇼핑몰 홈페이지를 만든다고 가정해보자.

하나의 애플리케이션에  고객정보, 상품정보, 주문정보 등 다양한 정보를 얻을 API가 만들어졌다.

프론트앤드에서는 보통 하나의 API값만을 이용하지 않고

페이지를 그려주기 위해서는 각각의 API에서 내가 원하는 정보만 받아서 처리를 하고 싶다.

 

기존 API 호출 방식이라고 하면?

Service 별 API 호출

 

일단 3개의 API를 각각 호출하고 내가 원하는 정보를 빼서 다시 포맷팅 하는 로직을

프론트앤드 코드에 넣게 된다.

// /api/getCustomer 호출
 {
 	id:1,
    userName:'홍길동',
    userPhone:'01012345678',
    userAddress:'서울특별시',
    created:'2023-02-09 14:02:03',
    updated:'2023-02-09 14:02:03',
 }
 
 // /api/getProduct 호출
 
  {
 	id:240,
    productName:'아이아이 핸드폰케이스-Iphone14Pro',
    productPrice:23500,
    created:'2022-01-10 13:12:15',
    updated:'2022-01-12 14:15:57',
 }
 
  // /api/getOrder 호출
 
  {
 	id:125485,
    orderDate:'2023-03-01 12:00:34,
    state:3, //state 3은 배송완료 코드이다
 }

각각 API호출해서  받은 return 값들을 가정해보자.

쇼핑몰 가정 UI화면

return받은 값들을 각각화면에 맞는 정보로 보여주면된다.

하지만 return 결과값을 보면 화면에 사용하지않은 코들 값이 넘어오게 되는 문제가 생기며,

order 정보의 경우는 state 코드 3으로만 오다보면 배송완료라는텍스트로 변환시켜줄 로직이 

프론트앤드 코드에 추가되어야 한다.

 

 

이런 상황에서 발생하는 문제는 

API 호출량 증가, 필요한 데이터 포맷팅을 위한 프론트앤드 로직 추가

이런 코드 들은 프론트앤드 코드가 복잡해게된다.

만약 복잡한 포맷팅을 요하거나, return 데이터 양이 크다면 프론트앤드 코드 성능에 바로 문제가 발생한다.

 

 

 

만약 여기서 BFF 패턴이 추가 된다면?

BFF 패턴 추가

 

// BFF 코드 return 예시
 {
    userName:'홍길동',
    productName:'아이아이 핸드폰케이스-Iphone14Pro',
    productPrice:23500,
    orderDate:'2023-03-01 12:00:34',
    orderState:'배송완료'
 }

 

지금 내가 호출한 클라이언트 상황에 맞춰서 준비된 BFF를 호출 할 수 있다.

이경우 호출이 1번으로 줄어들으며, 각 클라이언트에 맞춰서 원하는 데이터를 포맷팅 로직을 BFF에 작성해 

딱 원하는 데이터 형식으로 return을할 수 있다.

 

이처럼 BFF패턴을 이용하면, 프론트앤드 코드의 복잡도를 낮추고,

불필요한 데이터가 아닌 딱 맞는 포맷팅 된 데이터만을 받을 수 있어 보안에도 더 유리해질 수 있다.

 

 

 

 

※ 개념이해로 공부하고작성된 포스팅입니다. 혹시나 오류가 있으면 언제든지 댓글로 알려주세요!

 

반응형