BFF(Backend For Frontend)가 무엇일까?

2024. 9. 5. 23:07WEB.DEV

반응형

MSA(MicroService Architecture)

BFF를 이야기 하기 전에 어떠한 이유에 의해 BFF가 나오게 되었는지 알기 위해서 MSA 부터 알아 볼 필요가 있다. MSA는 MicroService Architecture의 약자로 독립적인 배포가 가능한 서비스들로 구성된 아키텍처이다. 기존에는 대부분 모든 서비스가 한 곳에 모인 Monolithic 구조로 개발을 진행을 했었지만, 요즘에 서비스의 규모가 커지면서 Monolithic 구조로는 해결이 어려운 문제들이 나타나게 되었고, 이를 해결 하기 위해 나타난 것이 MSA라고 보면 됩니다.

MSA는 각 서비스를 도메인별로 분리시키고, 서비스는 작은 서비스의 집합으로 구성되며 각 서비스는 독립적이고 단일 비즈니스 기능에 대해서만 책임을 가지게 됩니다.

이를 프론트엔드 입장에서 보게 되면, 프론트엔드는 화면을 그려 사용자에게 보여주는게 궁극적인 목표라고 할 수가 있다. 그런데 MSA 구조에서는 각 기능별로 나눠져 있는 여러 서비스를 호출을 해야 화면을 완성할 수가 있습니다. 따라서 화면을 그리기 위해 다수의 API를 호출하여 데이터를 불러와서 적절히 합쳐야 하는 경우가 발생합니다.

BFF(Backend For Frontend)

위의 경우를 해결하기 위해 등장한 것이 BFF입니다. BFF란 Backend For Frontend의 약자로, 말 그대로 프론트엔드를 위한 백엔드를 의미합니다. 즉, 프론트엔드를 요구사항에 맞게 구현하기 위해 도움을 주는 백엔드라고 간단하게 정의할 수 있습니다.

그렇다면 BFF를 통해 어떠한 것들을 할수 있을까요?

  1. 여러 API를 호출하여 프론트엔드에 맞게 처리를 하여 제공을 할 수 있다.
  2. BFF에서 여러 API를 호출한 다음 프론트엔드 화면 요구사항에 맞게 데이터를 가공하여 제공을 하여 프론트에드는 구체적인 구현에 대한 내용을 감추고 화면 구현과 유저 인터렉션에 대해서만 신경을 쓸수가 있게 된다.
  3. 데이터를 전송하는 과정에서 불필요한 데이터 혹은 보안에 민감한 정보들이 존재할 경우 숨길 수 있다.
  4. 예를 들어, 결제를 위한 API KEY와 SECRET KEY가 있다고 할 때, 브라우저에서 네트워크 통신을 하게 되면 노출될 가능성이 높아져 문제가 발생할 수가 있다. 이럴 때 BFF에서 정보를 보관하고 API 요청 시 사용을 하게 되면 브라우저 네트워크 통신에 숨길 수 있게 된다.
  5. 무거운 연산을 대신 처리할 수 있다.
  6. 프론트엔드에서 무거운 연산을 할 경우 렌더링 성능에 악영향을 끼칠 수 있다. 이런 경우 무거운 연산을 BFF에서 처리를 하여 프론트엔드에 제공을 하여 렌더링 성능을 개선할 수 있다.

결론

BFF는 프론트엔드에서 작업을 하는데 있어 도움을 준다고 할 수 있고, 다음의 경우 도입을 고려해 볼수 있을거 같다.

  1. 하나의 뷰를 그리기 위해 여러 API를 호출하여 처리를 해야 하는 경우
  2. 데이터를 전송할 때 불필요하거나 민감한 정보를 숨길 필요가 있을 경우
  3. 무거운 연산을 처리해야 하는 경우
728x90
반응형

'WEB.DEV' 카테고리의 다른 글

type과 interface의 차이는 무엇일까?  (0) 2024.09.05
.css와 .module.css의 차이  (2) 2024.09.05
자바스크립트 API 호출 방법  (2) 2022.06.30
자바스크립트 Async / Await  (0) 2022.06.30
자바스크립트 함수 선언 방법  (0) 2022.06.30