Backend for Frontend PatternBFF 패턴

모바일 앱 → Mobile BFF ──┐
웹 앱      → Web BFF    ──┤→ User Service
TV 앱      → TV BFF    ──┘   Product Service
                              Order Service

범용 API만 있을 때:
1. 모바일: 작은 화면 → 필드 5개만 필요 → 30개 필드 수신 (over-fetching)
2. TV: 큰 화면 → 많은 데이터 필요 → 여러 번 API 호출 (under-fetching)
3. 웹: SEO 필요 → 서버사이드 렌더링 지원 필요
→ 하나의 API로 모두 만족시키기 어려움

// web-bff/src/routes/product.ts
@Controller('products')
export class ProductController {
  constructor(
    private productService: ProductService,
    private reviewService: ReviewService,
    private inventoryService: InventoryService,
  ) {}

  // 웹 전용: 풍부한 데이터 집계
  @Get(':id/detail')
  async getProductDetail(@Param('id') id: string) {
    const [product, reviews, inventory] = await Promise.all([
      this.productService.getProduct(id),
      this.reviewService.getTopReviews(id, 5),
      this.inventoryService.getStock(id),
    ]);

    // 웹 클라이언트에 최적화된 응답 형태
    return {
      ...product,
      reviews,
      inStock: inventory.count > 0,
      seoMeta: { title: product.name, description: product.description },
    };
  }
}

# BFF에서 여러 서비스를 하나의 쿼리로 통합
query ProductPage($id: ID!) {
  product(id: $id) {
    id
    name
    price
    reviews(limit: 5) {
      rating
      comment
    }
    inventory {
      inStock
    }
  }
}