BFF

BFF 패턴이란, Backend From Frontend 의 약자로 프론트엔드를 위한 백엔드서버를 구축하는 디자인 패턴을 말한다.

기존의 클라이언트-서버간 API 통신의 단점을 꼽으라면 (프론트엔드 입장에서) 필요하지 않은 데이터들까지 응답에 포함되어 추가적으로 데이터를 가공하는 로직을 작성해야한다는 점이다.

물론, 클라이언트에서 필요한 데이터들만 응답하는 API를 만들수는 있다. 하지만 클라이언트의 종류 (Web, ios, android...)가 다양해져 같은 화면에서 응답받아야하는 데이터의 종류에 맞춰 API를 개발하는것은 비효율적일뿐더러, 복잡한 데이터 가공로직을 클라이언트에서 다룰경우, 렌더링 문제가 발생할수도 있다.

이런 배경속에 고안된 패턴이 바로 BFF 패턴이다.

쉽게 말해, 클라이언트-서버 의 관계에서 클라이언트 - BFF 서버 - 서버의 관계로 통신하는 것이다.

위에서말했듯이, BFF 서버는 프론트엔드를 위해 존재하는 서버이다. 즉, 클라이언트에서 다뤘던 데이터 가공로직을 BFF 서버에서 처리해 필요한 데이터만 응답할수 있다. 자연스레 클라이언트 로직과 API 로직을 분리할수 있으며, 클라이언트의 부담을 상당수 줄여줄 수있다. 이러한 점은 외부 API를 사용해야 할때 더욱 효율적이다.

interface AIResponse {
  id: string
  object: string
  created: number
  model: string
  choices: Array<{
    index: number
    message: {
      role: string
      content: string
    }
    finish_reason: string
  }>
  usage?: {
    prompt_tokens: number
    completion_tokens: number
    total_tokens: number
  }
}

위 인터페이스는 Open AI API의 응답객체이다. 간단한 챗봇을 만든다고 생각해보자. 위 인터페이스에서 정의한 프로퍼티들이 모두 필요할까? 당연히 아니다. 실질적으로 필요한 부분은

interface AIResponse {
  choices: Array<{
    index: number
    message: {
      role: string
      content: string
    }
    finish_reason: string
  }>
}

이 부분이다. 좀 더 정확히 말하면 choice 배열의 원소의 message.content 부분일 것이다. 따라서

const getAiResponse = async() => {
    const res: Promise<AIResponse> = await axios.get(ENDPOINT,{ prompt })
    const contentArray = res.choices.map(choice => choice.message.content);
    return contentArray;
}

이런식으로 응답객체를 가공하는 로직이 포함되어야 한다. 지금은 매우 간단한 예시지만, 다뤄야할 데이터가 많고 복잡해진다면 로직이 길어짐에 따라 함수도 길어지기 때문에 로직을 모듈화해 다시 호출하는 등 번거로운 과정을 거쳐야한다. BFF를 적용해보자

// route.ts
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  try {
    const { prompt } = req.body;
    const aiRes = await axios.post<AIResponse>(ENDPOINT, { prompt });
    const contentArray = aiRes.data.choices.map(choice => choice.message.content);
    res.status(200).json({ content: contentArray });
  } catch (error) {
    console.error('Error fetching AI response:', error);
    res.status(500).json({ error: 'Failed to fetch AI response' });
  }
}

// sample.tsx

const fetchAiResponse = async (prompt: string) => {
  try {
    const res = await axios.post('/api/ai-response', { prompt });
    return res.data.content;
  } catch (error) {
    console.error('Error fetching AI response:', error);
    return null;
  }
};

로직분리로 인해 코드가 매우 깔끔해진것을 볼수 있다. 예시에 사용한 Next js의 API 기능이 바로 대표적인 BFF 패턴의 예시이다. 예시에는 없지만 중요한 인증 키값같은 데이터도 클라이언트가 아닌 BFF 서버에서 다루기 때문에 보안성도 우수하며, 클라이언트 개발시 흔히 마주치는 CORS 도 피할수 있다.

CORS 는 클라이언트가 다른 도메인에 접근을 시도하려 할때 발생한다.

그런데 BFF 서버는 클라이언트와 같은 도메인을 가지고 있으며, BFF 서버 - 서버 통신은 서버측이기 때문에 CORS 가 발생하지 않는다..!