이제 쿼리를 필터링할 수 있으니, 데이터에서 의미 있는 인사이트를 추출해봅시다. 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 컴포넌트는 데이터 페칭과 상태 관리를 처리합니다:
Zone 컴포넌트의 주요 기능:
🔗st.slice[sliceName].use.icecreamOrderInsight(): 지정된 슬라이스에 대한 집계된 인사이트 데이터를 가져오는 자동 생성된 훅입니다. 프레임워크가 모든 집계 파이프라인 실행을 처리합니다.
마지막으로, 실시간 집계 통계를 표시하기 위해 페이지에 Insight Zone을 추가합니다:
이제 사용자가 상태별로 주문을 필터링하면, 인사이트 대시보드가 자동으로 업데이트되어 필터링된 주문에 대한 집계 통계만 보여줍니다. 이는 실시간 운영 결정에 매우 강력합니다!
🎉 달성한 것들:
- ✓ 검색 가능한 파라미터가 있는 동적 쿼리 메이커 생성
- ✓ MongoDB 집계 파이프라인을 사용한 Insight 클래스 정의 방법 학습
- ✓ 집계 통계를 표시하는 View 컴포넌트 구축
- ✓ 자동 생성된 스토어 훅에 Zone 컴포넌트 연결
- ✓ 실시간 분석을 위해 필터링된 쿼리와 인사이트 통합
다음 튜토리얼에서는 서로 다른 모델 간의 데이터 연결 방법을 살펴볼 것입니다. 이를 통해 주문과 고객 연결, 제품과 카테고리 연결, 복잡한 데이터 그래프 구축 같은 풍부한 관계를 만들 수 있게 됩니다.
