BFF(BackEnd for FrontEnd) 패턴

Sunhee·2024년 7월 8일

아키텍처

목록 보기

1/1

BFF 패턴: 클라이언트 맞춤형 API 서버

BFF(Back-end for Front-end) 패턴은 클라이언트(프론트엔드)에 맞춤형으로 데이터를 제공하는 중간 계층 서버를 의미합니다. 이 패턴은 특정 클라이언트 플랫폼(예: 웹, iOS, Android)에 최적화된 API를 제공하여 성능을 최적화하고 개발 생산성을 높이는 데 중점을 둡니다.

BFF 패턴의 장점

클라이언트 맞춤형 API 제공:
- 각 클라이언트 플랫폼에 필요한 데이터만을 요청하고 응답할 수 있어 네트워크 사용량을 줄이고 성능을 개선할 수 있습니다.
프론트엔드와 백엔드의 분리:
- BFF는 프론트엔드 개발자가 독립적으로 작업할 수 있도록 도와주며, 백엔드와의 인터페이스를 단순화합니다.
보안 및 인증 관리:
- 클라이언트 인증 및 보안을 BFF에서 처리함으로써 보안적인 이점을 가져갈 수 있습니다.
성능 최적화:
- 클라이언트가 필요로 하는 데이터만을 효율적으로 제공함으로써 응답 시간을 단축하고 서버 부하를 줄일 수 있습니다.

BFF 패턴의 구현 예시

Node.js와 Express를 사용한 BFF 서버 구현

const express = require('express');
const axios = require('axios');

const app = express();
const PORT = 3000;

const USER_SERVICE_URL = 'http://users-api.example.com';
const PRODUCT_SERVICE_URL = 'http://products-api.example.com';

// 사용자 정보와 상품 정보를 결합하여 클라이언트에게 제공하는 BFF 엔드포인트
app.get('/api/user/:userId', async (req, res) => {
  const userId = req.params.userId;
  try {
    const [userDataResponse, productsResponse] = await Promise.all([
      axios.get(`${USER_SERVICE_URL}/users/${userId}`),
      axios.get(`${PRODUCT_SERVICE_URL}/products`)
    ]);

    const userData = userDataResponse.data;
    const productsData = productsResponse.data;

    // 사용자와 관련된 필요한 데이터만을 클라이언트에게 반환
    const responseData = {
      userId: userData.id,
      userName: userData.name,
      userEmail: userData.email,
      favoriteProducts: productsData.filter(product => product.userId === userId)
    };

    res.json(responseData);
  } catch (error) {
    res.status(500).send('Error fetching data');
  }
});

app.listen(PORT, () => {
  console.log(`BFF server running on port ${PORT}`);
});

위 예시에서는 Node.js와 Express를 사용하여 간단한 BFF 서버를 구현하였습니다. 클라이언트는 사용자의 ID를 기준으로 사용자 정보와 해당 사용자가 좋아하는 상품 정보를 필요로 할 때 한 번의 요청으로 필요한 데이터만을 받을 수 있습니다.

BFF 패턴의 사용 사례

Netflix:
- Netflix는 다양한 클라이언트 플랫폼에 맞춘 BFF 패턴을 사용하여 사용자 경험을 최적화합니다. 각 장치에서 필요한 영화 및 콘텐츠 정보를 효율적으로 제공합니다.
GitHub:
- GitHub의 API는 GraphQL을 사용하여 클라이언트가 필요한 데이터만을 요청하고 응답받을 수 있도록 구현되어 있습니다. 이를 통해 개발자들이 GitHub 데이터를 효율적으로 관리하고 사용할 수 있습니다.
Shopify:
- Shopify는 여러 쇼핑 플랫폼에 맞춘 BFF 패턴을 사용하여 상점 관리 및 주문 처리와 같은 다양한 기능을 클라이언트에게 제공합니다.

결론

BFF 패턴은 클라이언트와 백엔드 서비스 사이에 중간 계층을 두어 API를 최적화하고, 각 클라이언트 플랫폼에 맞춘 데이터 제공을 가능하게 합니다. 이를 통해 개발 생산성을 높이고 성능을 개선할 수 있으며, 다양한 사례에서 활발히 사용되고 있습니다.

[참고자료1] https://fe-developers.kakaoent.com/2022/220310-kakaopage-bff/
[참고자료2] https://velog.io/@seeh_h/BFF%EB%9E%80

Sunhee