이제 쿼리를 필터링할 수 있으니, 데이터에서 의미 있는 인사이트를 추출해봅시다. Insight는 MongoDB 집계 파이프라인을 사용하여 문서 전체에서 데이터를 집계하는 강력한 기능입니다. 주방 디스플레이 시스템이 셰프에게 준비해야 할 각 재료의 정확한 양을 보여주는 것처럼 생각해보세요 - 총 요거트 양, 각 토핑의 개수 등.
먼저, constant 파일에 Insight 클래스를 정의합니다. 각 필드는 값이 어떻게 집계되어야 하는지 지정하기 위해 accumulate 옵션을 사용합니다:
사용된 집계 패턴을 살펴봅시다:
🍦{ $sum: "$size" }
일치하는 모든 주문의 size 필드를 합산합니다. 3개 주문의 사이즈가 50, 100, 200이면, yogurtIcecreamQty는 350이 됩니다.
🍓{ $cond: [{ $in: ["strawberry", "$toppings"] }, 1, 0] }
조건식입니다: "strawberry"가 toppings 배열에 있으면 1을 세고, 없으면 0입니다. $sum이 이를 집계하여 총 개수를 구합니다.
UI에서 적절한 레이블링을 위해 insight 필드에 대한 dictionary 항목을 추가합니다:
이제 집계된 인사이트를 아름다운 대시보드 레이아웃으로 표시하는 View 컴포넌트를 만들어봅시다:
View 컴포넌트는 각 인사이트 메트릭을 반응형 그리드에 표시합니다. 셰프는 얼마나 많은 요거트를 준비해야 하는지, 어떤 토핑이 가장 인기 있는지 빠르게 확인할 수 있습니다.
이제 View를 스토어에 연결하는 Zone 컴포넌트를 만듭니다. Zone 컴포넌트는 데이터 페칭과 상태 관리를 처리합니다:
