쿼리 통계

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

쿼리 메이커 생성하기

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

인사이트로 가속하기

이제 쿼리를 필터링할 수 있으니, 데이터를 집계해봅시다. Insight는 현재 쿼리와 필드별 추가 쿼리 필터를 기준으로 문서 수를 계산합니다. 주방 디스플레이 시스템이 셰프에게 대기 중인 주문 수나 토핑 요청 수를 보여주는 것처럼 생각해보세요.

먼저, constant 파일에 Insight 클래스를 정의합니다. 각 필드는 카운트에 사용할 Akan 문서 쿼리 필터를 accumulate 옵션에 지정합니다:

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

사용된 카운트 필터 패턴을 살펴봅시다:

{}

현재 쿼리에 일치하는 모든 주문을 카운트합니다. 기본 카운트는 accumulate를 빈 객체로 둡니다.

{ toppings: "strawberry" }

카운트 전에 필드 필터를 추가합니다. toppings가 배열 필드이므로 "strawberry" 토핑을 포함한 주문 수를 계산합니다.

UI에서 적절한 레이블링을 위해 insight 필드에 대한 dictionary 항목을 추가합니다:

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

이제 집계된 인사이트를 대시보드 레이아웃으로 표시하는 View 컴포넌트를 만들어봅시다:

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

View 컴포넌트는 각 인사이트 메트릭을 반응형 그리드에 표시합니다. 셰프는 얼마나 많은 요거트를 준비해야 하는지, 어떤 토핑이 가장 인기 있는지 빠르게 확인할 수 있습니다.

이제 View를 스토어에 연결하는 Zone 컴포넌트를 만듭니다. Zone 컴포넌트는 데이터 페칭과 상태 관리를 처리합니다:

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

Zone 컴포넌트의 주요 기능:

st.slice[slice.sliceName].use.icecreamOrderInsight(): 지정된 슬라이스에 대한 집계된 인사이트 데이터를 가져오는 자동 생성된 훅입니다. 프레임워크가 모든 집계 파이프라인 실행을 처리합니다.
useInterval: 슬라이스 튜토리얼에서 이어진 코드이며, 여전히 단순한 3초 폴링입니다 - 인사이트는 푸시되는 것이 아니라 타이머에 맞춰 다시 집계됩니다. 슬라이스에 .live()를 선언하면 변경분이 구독자에게 전달됩니다.

마지막으로, 실시간 집계 통계를 표시하기 위해 페이지에 Insight Zone을 추가합니다:

apps/koyo/page/_index.tsx

사용자가 상태별로 주문을 필터링하면, 인사이트 대시보드가 자동으로 업데이트되어 필터링된 주문에 대한 집계 통계만 보여줍니다.

다음 튜토리얼에서는 서로 다른 모델 간의 데이터 연결 방법을 살펴볼 것입니다. 이를 통해 주문과 고객 연결, 제품과 카테고리 연결, 복잡한 데이터 그래프 구축 같은 관계를 만들 수 있게 됩니다.

이전스칼라 사용하기 다음데이터 연결하기