쿼리 통계

여러 주문이 동시에 들어오면, 한꺼번에 아이스크림을 만들면 손님들이 기다리는 시간을 줄일 수 있습니다. 이를 위해서는 현재 주문들의 아이스크림 양, 토핑정보 등에 대한 인사이트를 추출해야 합니다.

쿼리 메이커 생성하기

인사이트를 추출하기 전에, 어떤 데이터를 쿼리할지 정의해야 합니다. 쿼리 메이커를 사용하면 사용자가 동적으로 데이터를 필터링할 수 있습니다 - 마치 바리스타가 다음에 어떤 음료를 만들지 확인하기 위해 주문을 상태별로 확인하는 것처럼요. 검색 파라미터를 지원하도록 Slice를 개선해봅시다.

먼저, 상태 필터를 받을 수 있도록 Slice를 업데이트합니다. .search() 메서드는 사용자가 프론트엔드에서 설정할 수 있는 쿼리 파라미터를 정의합니다:

apps/koyo/lib/icecreamOrder/icecreamOrder.signal.ts

이 Slice 정의의 핵심 구성 요소를 이해해봅시다:

🔍.search()

프론트엔드에서 설정할 수 있는 검색 가능한 파라미터를 정의합니다. 여기서 "statuses"는 주문을 필터링하기 위한 IcecreamOrderStatus 값 배열을 받습니다.

⚡inWaiting / inPickup

고정된 상태 필터가 있는 미리 정의된 슬라이스입니다. inWaiting은 활성화 및 처리 중인 주문을, inPickup은 고객 픽업 준비가 된 주문을 보여줍니다.

로컬라이제이션을 위해 슬라이스와 검색 파라미터에 대한 dictionary 항목을 추가합니다:

apps/koyo/lib/icecreamOrder/icecreamOrder.dictionary.ts

이제 사용자가 필터링할 상태를 선택할 수 있는 UI 컴포넌트를 만들어봅시다. 이 쿼리 메이커 컴포넌트는 자동 생성된 스토어 훅을 사용합니다:

apps/koyo/lib/icecreamOrder/IcecreamOrder.Util.tsx

쿼리 메이커 컴포넌트의 주요 기능:

🎣

st.use.queryArgsOfIcecreamOrderInPublic(): 스토어에서 현재 쿼리 인자를 읽는 자동 생성된 훅입니다. statuses 배열을 반환합니다.

📝

st.do.setQueryArgsOfIcecreamOrderInPublic(): 스토어의 쿼리 인자를 업데이트하며, 이는 자동으로 필터링된 데이터의 재조회를 트리거합니다.

마지막으로, 사용자가 동적으로 주문을 필터링할 수 있도록 페이지에 쿼리 메이커를 추가합니다:

apps/koyo/app/[lang]/page.tsx

인사이트로 가속하기

이제 쿼리를 필터링할 수 있으니, 데이터에서 의미 있는 인사이트를 추출해봅시다. Insight는 MongoDB 집계 파이프라인을 사용하여 문서 전체에서 데이터를 집계하는 강력한 기능입니다. 주방 디스플레이 시스템이 셰프에게 준비해야 할 각 재료의 정확한 양을 보여주는 것처럼 생각해보세요 - 총 요거트 양, 각 토핑의 개수 등.

먼저, constant 파일에 Insight 클래스를 정의합니다. 각 필드는 값이 어떻게 집계되어야 하는지 지정하기 위해 accumulate 옵션을 사용합니다:

apps/koyo/lib/icecreamOrder/icecreamOrder.constant.ts