
## BFF란?

Backend for Frontend, 말 그대로 프론트엔드를 위한 백엔드 서버를 의미한다. 프론트엔드를 위한 백엔드 서버라… 백엔드 서버는 모두 프론트에서 쓰이기 위해 넘겨지는 것이 아니었던 것일까??(지극히 프론트엔드적 관점이다)

BFF라는 단어를 들어보기는 했지만 회사를 들어오기 전까지는 BFF의 이유와 필요성을 알지 못했다. 프론트에서 필요한 데이터가 있다면 백엔드에게 변경사항을 알려주고 원하는 정보들을 받아왔었다. `이번에 화면 기획이 이렇게 바뀌었고 이런 정보가 필요하니 응답값을 변경해주세요~` 라는 요청을 하고는 했었다. 감사하게도 가공이 필요없는 이쁜 응답을 받도록 변경해주셨고, 프론트엔드는 정보를 받아 상태를 관리하고 화면에 뿌려주었다.

이게 가능했던 이유는 백엔트 팀과 프론트엔드 팀이 1:1로 작업을 하기 때문이었다. 서비스가 작으면 작을수록 서버와 클라이언트가 1:1 관계를 가지게 된다. 해당 API는 나만, 그 페이지만, 그 컴포넌트만 호출하기 때문에 서버가 클라이언트 맞춤형 응답을 내려줘도 괜찮다.

하지만 프로젝트가 점차 커진다면?!?!

![Untitled](https://github.com/prefer2/prefer2.dev/assets/67692759/0cc4d96d-5199-4cef-b9f4-3b7c93f2596e)

위의 e-commerce 예시처럼 회원, 주문, 장바구니, 상품 등 도메인 단위로 코드를 관리해야할 필요성이 생긴다. 각 도메인별로 나누어 독립적인 서비스로 만들수 있고 유지 관리하기 쉬워진다. 최근 이런 독립적이고 작은 서비스로 나누는 형식을 `Micro Service Architecture(MSA)`라고 칭한다.

실제로 회사의 백엔드 팀들이 MSA 형식으로 나뉘어져 있는지는 잘 모르겠다. 매우 큰 규모의, 역사가 있는 서비스의 회사이기 때문에 각 도메인별로 작게 나뉘어져 있고, 각 팀에서는 방대한 양의 데이터를 관리한다. 내가 속한 팀의 서비스는 굉장히 많은 도메인에 다양한 요청을 보내 응답을 받아 화면에 보여주어야 한다.

## Why BFF

서버를 구성하여 추가적인 게이트웨이를 만드는 것은 꽤나 공수가 많이 든다. 나뉘어져 있는 서버의 정보들을 원하는 값들을 모으는 것 말고도 BFF에는 많은 장점이 있다.

결제 시스템에서 사용하는 주문서를 예시로 들어보자. 주문서에는 주문자의 이름, 주소, 핸드폰 번호같은 개인 정보부터 주문 상품 정보, 회원 별 포인트, 사용자별 광고 등 하나의 페이지지만 다양한 정보들이 필요하다. 다양한 정보를 보여줘야 할 뿐만 아니라 해당 페이지에서 다루는 정보들은 개인 정보와 관련된 값들이 대부분이라 보안적으로 매우 중요하다.

우선 해당 페이지에서 보여줘야 하는 값들은 컴포넌트별로 요청을 보내 보여주는 것에 의미가 없다. 결제 시스템이다보니 하나의 요청에 대한 값이라도 실패하면 해당 페이지를 보여주지 않는 것이 의미있다. 또한 회원정보를 기반으로 해당 회원이 소지한 포인트, 카드정보 등을 가져와야하기 때문에 api 요청에 순서도 존재한다. 

카드 정보 요청, 포인트 요청 등과 같은 개인정보와 매우 밀접하고 보안적으로 중요한 정보들은 요청조차도 최대한 숨기는게 좋다. 네트워크 탭을 통해 어떤 요청을 보내고 있는지 알 수 있다면 해당 요청의 값을 바꿔가며 다른 사람의 소중한 정보들을 훔쳐볼 수 있게된다.

![image](https://github.com/prefer2/prefer2.dev/assets/67692759/6fda5403-5442-487b-bf74-da97bf12f55b)
_호기심이 많은 우리 개발자들은 네트워크 탭을 열어 어떤 요청들을 보내나 구경하고는 한다_

BFF라는 한단계를 추가하게 되면 클라이언트 단에서는 페이지 전체에 대한 요청 하나만을 BFF에게 요청하게 되고, 네트워크 탭에서는 해당 요청만을 확인할 수 있게 된다. 일종의 은닉화가 되는 것이다.

마지막으로 CORS 이슈를 다루기가 쉬워진다. 서버에서 바라보는 end-point는 BFF 서버 하나가 된다. 다양한 페이지에서 서버값을 사용한다면 CORS 이슈를 해결하기 위해서 이에 대한 소통을 자주 해야 한다. BFF쪽에 대한 정보만을 서버에게 알려주면 되기 때문에 해당 이슈를 해결하기 쉬워진다. 프론트의 변경사항은 BFF에서 프론트 개발자가 그때그때 해결하면 된다.


## 참고자료

[카카오페이지는 BFF(Backend For Frontend)를 어떻게 적용했을까?](https://fe-developers.kakaoent.com/2022/220310-kakaopage-bff/)

[BFF - Backend for Frontend Design Pattern with Next.js](https://dev.to/adelhamad/bff-backend-for-frontend-design-pattern-with-nextjs-3od0)

[BFF?](https://github.com/sbyeol3/articles/issues/42)


백엔드를 위한 강의인 것 같지만 왜 microservice가 필요한지 재미나게 알려주시는 강의

[[우아콘2020] 배달의민족 마이크로서비스 여행기](https://www.youtube.com/watch?v=BnS6343GTkY)

나만을 위한 서버라구...? 감동....

Tags - bff (1)

알아보자 BFF