BFF(Backend For Frontend) 개념 및 활용

BFF(Backend For Frontend) 개념 및 활용

BFF란 무엇인가?

BFF(Backend For Frontend)는 클라이언트와 서버 사이의 통신을 효율적으로 관리하기 위해 도입된 개념입니다. 클라이언트 개발자들이 서버에서 필요한 데이터를 효율적으로 가져오고 제어하기 위한 중간 계층으로 작동합니다.

BFF의 유래

BFF라는 용어는 프론트엔드와 백엔드 사이의 경계를 약화시키고자 Facebook에서 처음 소개되었습니다. Facebook은 다양한 플랫폼에서 동작하는 앱을 개발하면서 클라이언트와 서버 간의 통신을 효과적으로 관리하기 위해 BFF를 도입했습니다.

BFF의 역할

1. 클라이언트 특화 데이터 제공: 클라이언트에 필요한 데이터를 효율적으로 가져와 제공함으로써 불필요한 데이터 전송을 최소화합니다.
2. 프론트엔드 개발자 경험 향상: 클라이언트 개발자가 서버와의 상호 작용을 더 쉽게 관리할 수 있도록 돕습니다.
3. 마이크로서비스와의 통합: 각 마이크로서비스의 API를 적절하게 조합하여 클라이언트에 필요한 데이터를 제공합니다.

BFF 사용 상황

1. 다양한 클라이언트 지원: 모바일 앱, 웹 앱, 데스크톱 앱 등 여러 플랫폼에서 동작하는 클라이언트를 지원할 때 BFF가 효과적입니다.
2. 서버리스 아키텍처와의 적합성: 서버리스 환경에서 여러 서비스 간의 통신을 관리하기 위해 BFF를 도입할 수 있습니다.
3. 마이크로서비스 아키텍처: 각 마이크로서비스가 제공하는 API를 조합하여 클라이언트에 효율적으로 전달할 때 BFF를 사용합니다.

BFF의 장단점

장점

1. 클라이언트 개발자 편의성: 서버와의 통신을 관리함으로써 클라이언트 개발자들이 더 쉽게 작업할 수 있습니다.
2. 데이터 효율성: 필요한 데이터만을 가져와 제공하므로 불필요한 데이터 트래픽을 최소화합니다.

단점

1. 추가적인 계층: BFF 도입으로 추가적인 서버 계층이 발생하므로 관리와 유지보수가 필요합니다.
2. 클라이언트 종속성: 클라이언트와 강하게 결합될 수 있어, 클라이언트와의 종속성을 고려해야 합니다.

BFF를 이해하는 예제

예제 1: Express를 이용한 BFF 구현

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

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

app.get('/bff/data', async (req, res) => {
  try {
    // 서버에서 필요한 데이터를 가져옴
    const response = await axios.get('http://backend-api/data');

    // 클라이언트에 필요한 데이터만 추출하여 응답
    const responseData = {
      clientData: response.data.clientData,
      additionalInfo: 'Some additional information',
    };

    res.json(responseData);
  } catch (error) {
    console.error(error);
    res.status(500).send('Internal Server Error');
  }
});

app.listen(port, () => {
  console.log(`BFF server is running at http://localhost:${port}`);
});

예제 2: React 앱에서 BFF 사용

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const App = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        // BFF를 통해 필요한 데이터를 가져옴
        const response = await axios.get('http://localhost:3000/bff/data');
        setData(response.data);
      } catch (error) {
        console.error(error);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      {data ? (
        <div>
          <h1>{data.clientData}</h1>
          <p>{data.additionalInfo}</p>
        </div>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
};

export default App;

연관된 기술

GraphQL

GraphQL은 클라이언트가 필요한 데이터를 명시적으로 요청할 수 있는 쿼리 언어로, BFF와의 효율적인 통신에 활용될 수 있습니다. 클라이언트가 필요한 데이터만을 요청하여 불필요한 데이터를 받지 않도록 할 수 있습니다.

RESTful API

BFF가 여러 마이크로서비스의 데이터를 조합하여 제공할 때, 각 마이크로서비스는 RESTful API를 통해 표준화된 방식으로 데이터를 제공할 수 있습니다.

Serverless

BFF를 서버리스 아키텍처에 적용할 때, AWS Lambda, Azure Functions, Google Cloud Functions와 같은 서버리스 함수를 사용하여 BFF를 구현할 수 있습니다.

결론

BFF는 클라이언트와 서버 간의 통신을 효율적으로 관리하기 위한 중간 계층으로, 클라이언트 개발자들이 더 효과적으로 작업할 수 있도록 도와줍니다. 특히 여러 플랫폼에서 동작하는 클라이언트를 지원하거나, 서버리스 및 마이크로서비스 아키텍처와 통합할 때 BFF의 활용이 효과적입니다.