-
BFF(Backend For Frontend) 소개Tip 2024. 8. 8. 14:42728x90반응형
BFF(Backend For Frontend) 디자인 패턴에는 특정 프런트엔드 애플리케이션 또는 프런트엔드 애플리케이션 집합의 요구 사항에 맞게 특별히 맞춤화된 백엔드 서비스를 말합니다.
이 패턴은 복잡한 사용자 인터페이스를 개발하고 프런트엔드와 마이크로서비스 기반 백엔드 간의 상호 작용을 관리하는 문제를 해결하기 위해 등장했습니다.
1. BFF의 장점
1. 우려사항 분리(유지 관리성)
프런트엔드별 로직을 코어 백엔드에서 분리하여 코드베이스를 더 쉽게 유지 관리하고 독립적으로 발전시킬 수 있습니다.
2. 향상된 보안(토큰 관리)
BFF는 서버 측에서 토큰 및 기타 민감한 데이터를 처리함으로써 그러한 정보가 클라이언트 측 취약점에 노출될 위험을 줄입니다.
3. 성능 최적화(맞춤형 응답)
BFF는 프런트엔드의 정확한 요구 사항에 맞게 여러 서비스의 데이터를 집계하고 변환하여 불필요한 데이터 전송을 줄이고 성능을 향상할 수 있습니다.
4. 프런트엔드 유연성(맞춤형 API)
다양한 프런트엔드(웹, 모바일 등)의 특정 요구 사항에 맞는 최적화된 전용 백엔드 서비스를 보유하여 사용자 인터페이스의 유연성과 응답성을 향상할 수 있습니다.
5. 단순화된 프런트엔드 개발(통합 데이터 소스)
BFF는 여러 백엔드 서비스의 복잡성을 추상화함으로써 프런트엔드 코드를 단순화하여 개발 및 유지 관리를 더욱 간단하게 만듭니다.
2. BFF의 단점
1. 복잡성 증가(여러 백엔드)
추가 백엔드 계층을 도입하면 시스템 아키텍처가 복잡해져서 더 많은 조정과 관리가 필요할 수 있습니다.
2. 로직의 잠재적 중복(일관성 문제)
여러 BFF에 걸쳐 비즈니스 로직이 중복될 위험이 있으며, 이로 인해 불일치 및 유지 관리 문제가 발생할 수 있습니다.
3. 성능 오버헤드(추가 네트워크 hop)
이제 각 요청에는 BFF에 대한 추가 네트워크 hop이 포함되며, 이로 인해 제대로 관리되지 않으면 지연 시간이 발생할 수 있습니다.
4. 배포 및 운영(배포 노력 증가)
여러 BFF 서비스를 관리한다는 것은 배포, 모니터링 및 유지 관리해야 할 구성 요소가 더 많아지고 운영 복잡성이 증가함을 의미합니다.
3. BFF 예시
1. 단일 페이지 애플리케이션(SPA)
SPA에서 BFF 패턴은 토큰 및 민감한 데이터를 서버 측에서 관리하여 보안을 강화하고 클라이언트 브라우저에서 이러한 요소의 노출을 줄입니다.
2. 마이크로서비스 아키텍처
마이크로서비스 생태계에서 BFF는 여러 서비스의 데이터를 집계하여 프런트엔드에 대한 통합 응답을 제공하여 프런트엔드 로직을 단순화하고 성능을 향상할 수 있습니다.
3. 전자상거래 플랫폼
전자 상거래 사이트는 BFF를 사용하여 다양한 서비스에서 제품 데이터, 사용자 리뷰 및 재고 상태를 가져오고 변환하여 맞춤형의 효율적인 데이터 페이로드를 프런트엔드에 전달할 수 있습니다.
BFF(Backend For Frontend) 패턴은 유지 관리성, 보안, 성능 및 프런트엔드 유연성 측면에서 상당한 이점을 제공하므로 복잡한 애플리케이션, 특히 마이크로서비스를 활용하는 애플리케이션에 귀중한 아키텍처 선택이 됩니다.
그러나 이는 또한 추가적인 복잡성과 잠재적인 논리 중복을 초래하므로 이점을 완전히 실현하려면 신중하게 관리해야 합니다.
BFF를 효과적으로 구현하려면 아키텍처 계획, 강력한 보안 관행 및 성능 최적화 기술의 균형이 필요합니다.
4. 참조
The Complete Guide to BFF (backend for frontend) – Christian Lüdemann (christianlydemann.com)
Backend for Frontend (BFF) Architecture: Benefits, Tips & Practices (codalien.com)
The Backend for Frontend Pattern (BFF) (auth0.com)
반응형'Tip' 카테고리의 다른 글
마이크로 서비스 아키텍처(Microservice Architecture) 소개 (1) 2024.10.02 React에서 스크롤을 하단에 고정하는 방법(feat. css) (0) 2024.09.07 FSD 폴더 구조 소개 (feat. NextJS App Router, Pages) (0) 2024.07.27 2024년 JavaScript 트렌드 (0) 2024.07.26 리액트(React) vs 앵귤러(Angular) vs 뷰(Vue) (0) 2024.07.11