[아티클] 지금 프로젝트에 BFF가 필요 없는 이유

Backend For Frontend ?

So the main task of the BFF is to get data from different services, gather them and format them in the easiest form so the frontend will do the least effort to render these data. For that we defined a new interface.

TL;DR

BFF가 필요해요?

NextJS page router 에서 BFF 예시

// pages/api/bff.ts

import type { NextApiRequest, NextApiResponse } from 'next'
import axios from 'axios'

interface User {
	first_name: string
	last_name: string
	birthdate: string
	address: string
	created_at: string
}

interface Message {
	uid: string
	text: string
	created_at: string
	read: boolean
}

export interface Profile {
	name: string
	birthdate: Date
	address: string
	joined: Date
	last_seen: Date
	new_notifications: number
	new_messages: number
	new_friend_requests: number
}

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
	const { host } = req.headers
	const api_url = `${process.env.NODE_ENV === 'development' ? 'http' : 'https'}://${host}`

	let user_data = {} as User

	let messages_data = []
	let notifications_data = []
	let friend_requests_data = []
	let latest_message = {} as Message

	try {
		const response = await axios.get(`${api_url}/api/user`)
		const api_data: any = response.data
		user_data = api_data
	} catch (e) {
		console.error('error: ', e)
	}

	try {
		const response = await axios.get(`${api_url}/api/messages`, { params: { action: 'read', read: false } })
		const api_data: any = response.data
		messages_data = api_data
	} catch (e) {
		console.error('error: ', e)
	}

	try {
		const response = await axios.get(`${api_url}/api/messages`, { params: { action: 'get_latest' } })
		const api_data: any = response.data
		latest_message = api_data
	} catch (e) {
		console.error('error: ', e)
	}

	try {
		const response = await axios.get(`${api_url}/api/notifications`, { params: { action: 'seen', seen: false } })
		const api_data: any = response.data
		notifications_data = api_data
	} catch (e) {
		console.error('error: ', e)
	}

	try {
		const response = await axios.get(`${api_url}/api/friend_requests`)
		const api_data: any = response.data
		friend_requests_data = api_data
	} catch (e) {
		console.error('error: ', e)
	}

	const profile: Profile = {
		name: `${user_data.first_name} ${user_data.last_name}`,
		birthdate: new Date(user_data.birthdate),
		address: user_data.address,
		joined: new Date(user_data.created_at),
		last_seen: new Date(parseInt(latest_message.created_at) * 1000),
		new_notifications: notifications_data.length,
		new_messages: messages_data.length,
		new_friend_requests: friend_requests_data.length,
	}

	res.status(200).json(profile)
}

요랬는데 (adelhamad의 bff-demo)

const handleMsgRes = () => {
		setLoadingResponse(true)
		axios
			.get(`${apiPath}/messages`, { params: { action: 'read', read: false } })
			.then((res) => {
				setLoadingResponse(false)
				setResponse(res.data)
			})
			.catch(console.error)
	}

	const handleUsrRes = () => {
		setLoadingResponse(true)
		axios
			.get(`${apiPath}/user`)
			.then((res) => {
				setLoadingResponse(false)
				setResponse(res.data)
			})
			.catch(console.error)
	}

	const handleNotiRes = () => {
		setLoadingResponse(true)
		axios
			.get(`${apiPath}/notifications`, { params: { action: 'seen', seen: false } })
			.then((res) => {
				setLoadingResponse(false)
				setResponse(res.data)
			})
			.catch(console.error)
	}

	const handleFrndRes = () => {
		setLoadingResponse(true)
		axios
			.get(`${apiPath}/friend_requests`)
			.then((res) => {
				setLoadingResponse(false)
				setResponse(res.data)
			})
			.catch(console.error)
	}

요래됐습니다 (adelhamad의 bff-demo)

	const handleBffRes = () => {
	setLoading(true)
		axios
			.get(`${apiPath}/bff`)
			.then((res) => {
				setLoading(false)
				const resProfile: Profile = res.data as Profile
				setProfile(resProfile)
			})
			.catch(console.error)
	}

장점으로 마무리

BFF의 가장 큰 장점은 실제 비즈니스 로직의 구현과 응답 데이터를 클라이언트에서 요구되는 데이터로 파싱하는 두가지 관점을 분리하여 복잡도를 낮추고, 필요한 작업에 집중하기 쉬워지는 것이라고 생각합니다. - kakaoent 박수빈 (cheese)

Reference

카카오페이지는 BFF(Backend For Frontend)를 어떻게 적용했을까? | 카카오엔터테인먼트 FE 기술블로그

카카오페이지가 적용한 BFF 구조를 소개합니다.

https://fe-developers.kakaoent.com/2022/220310-kakaopage-bff/

BFF Demo

Simple demo for BFF Backend for Frontend

https://backend-for-frontend.vercel.app/