# 카카오페이지 사례로 알아보는 Backend For Frontend(BFF) 📑 테오님이 잘 정리해주신 것처럼, 프론트엔드의 업무는 크게 ⑴데이터 보여주기, ⑵데이터(화면) 조작하기, ⑶서버로

# 카카오페이지 사례로 알아보는 Backend For Frontend(BFF) 📑 테오님이 잘 정리해주신 것처럼, 프론트엔드의 업무는 크게 ⑴데이터 보여주기, ⑵데이터(화면) 조작하기, ⑶서버로 데이터 보내기, ⑷서버에서 받은 데이터를 다루기로 나눌 수 있습니다. '⑷서버에서 받은 데이터를 다루기'를 잘하기 위해서, 데이터를 보내주는 서버팀과 지속적인 협업이 필요합니다. 이 협업과 업무를 더 잘하기 위한 방법으로 Backend For Frontend(BFF)가 있습니다. 개념적으로만 들었던 BFF를 멋진 동료인 카카오페이지 FE팀에서 사례를 다루어주어 공유합니다. • 규모가 큰 앱은 여러 마이크로서비스와 여러 플랫폼이 있을 수 있습니다. 여러 플랫폼이 여러 마이크로서비스의 데이터를 사용하게 되면, 프론트엔드는 여러 데이터를 're-format' 해야 합니다. 다른 의미로 데이터를 필터링하고 포맷팅하는 데 추가적인 자원을 쓴다는 것입니다. • BFF는 프론트엔드의 이런 데이터 처리를 대신 해주는 중간 레이어 입니다. 프론트엔드는 API를 직접 호출하지 않고 BFF에게 데이터를 요청합니다. BFF는 응답에 필요한 여러 데이터를 마이크로서비스에게 대신 요청하여 받아옵니다. 그리고 적절한 포맷을 바꾸어 프론트엔드에게 다시 알려줍니다. 결과적으로 프론트엔드는 데이터 요청 로직이 간단해지고, 인터페이스에 더욱 집중할 수 있습니다. • 단일 플랫폼에 하나의 서비스만 제공하는 애플리케이션이라면 BFF는 불필요 합니다. 그러나 여러 서비스를 제공하고, 여러 프론트엔드를 지원한다면 BFF는 적절한 선택입니다. BFF는 브라우저, 모바일 앱, 서드 파티 서비스 등 플랫폼의 종류 별로 두게 됩니다. 각 BFF는 각 플랫폼에 필요한 포맷과 데이터를 제공하는 역할을 합니다. • 카카오페이지는 여러 플랫폼(Web, Android, iOS)을 지원하고, 여러 서비스의 데이터를 사용하고 있습니다. 그런데 BFF 없이 모든 플랫폼이 API에 다이렉트로 접근하면, API 엔드포인트가 분리되거나 스팩을 맞춰야 할때 큰 비용이 듭니다. 웹 프론트엔드는 생산성을 더욱 높이기 위해 BFF를 적용하였습니다. • Web BFF는 브라우저의 CORS 처리, 인증 처리, 데이터 호출을 담당하여, 프론트엔드 개발자는 화면에 집중할 수 있습니다 . Web BFF는 프론트엔드 플랫폼에 최적화되며 프론트엔드의 요구사항을 충족하기 때문에, 서버가 아니라 프론트엔드 개발자에게 구현과 안정성의 책임이 있습니다. • 여러 API를 호출하는 경우, 일반적으로 응답 값을 받아 상태관리에 저장하게 됩니다. 이 때 프론트엔드에서 필요하지 않은 값들이 올 수도 있고, 필요할 때마다 상태관리에서 연산을 하게 됩니다. GraphQL로 BFF를 적용한 후, API를 POST로 요청하고 브라우저의 캐시 대신 라이브러리의 캐시에 저장하게 되었습니다. 그리고 불필요한 값은 제거하여 프론트엔드에게 전달합니다. • 그런데 Apollo GraphQL의 Client 캐시는 카카오페이지 웹 적용에 이슈가 있었습니다. Apollo Client는 정규화 캐싱 정책을 따르는데, 쿼리도 기본적으로 CACHE ID를 사용해 모든 데이터를 store에 저장합니다. 따라서 레이아웃만 같고 데이터가 다른 여러 뷰가 동시에 그려진다면, 쿼리 호출 순서에 의해 의도와 다른 저장값이 나오는 이슈가 있었습니다 . • 카카오페이지 프론트엔드는 id 방식으로 캐싱하는 Apollo Client 대신 document 방식으로 캐싱하는 URQL을 사용하게 되었습니다. 또한 redux도 추가하게 되었습니다. GraphQL과 URQL만으로는 사용자의 클릭 이벤트가 발생하거나 스크롤로 데이터가 추가되는 등 비동기 상황의 복잡성까지 줄이지 못했기 때문입니다. URQL은 데이터를 fetch하고, 화면에 사용되는 데이터 저장은 redux에 하게 되었습니다. • 결과적으로 Web BFF를 통해, 비즈니스 로직과 데이터 처리 부분을 분리하여 복잡도를 낮출 수 있었습니다. ⟪참고⟫ - 테오의 프론트엔드. "시니어 개발자가 말하는, 프론트엔드 업무와 잘하는 프론트엔드 개발자란", 2022.1.24, https://yozm.wishket.com/magazine/detail/1294/ - Viduni Wickramarachchi, "The BFF Pattern (Backend for Frontend): An Introduction", 2021.2.24, https://blog.bitsrc.io/bff-pattern-backend-for-frontend-an-introduction-e4fa965128bf