본문으로 건너뛰기

개요

TanStack Pacer는 함수 실행 시점을 제어하는 디바운스, 스로틀, 요청률 제한, 큐, 배칭 유틸리티 라이브러리입니다. 많은 라이브러리가 debounce 헬퍼를 제공하지만, Pacer는 그런 한 줄짜리 헬퍼가 생략하는 세부 기능이 계속 필요했기 때문에 만들어졌습니다. 완전한 타입 안전성, 트리 셰이킹, 취소, 렌더링할 수 있는 대기 상태, 다섯 가지 패턴과 모든 프레임워크 어댑터에서 일관된 단일 API를 제공합니다. 실행 타이밍은 대개 경쟁 상태가 발생하거나 API에 요청이 몰려 문제가 드러날 때까지 나중 문제로 밀려납니다. Pacer의 역할은 올바른 패턴을 손쉽게 선택하도록 만드는 것입니다.

[!IMPORTANT] TanStack Pacer는 현재 베타이며 API는 여전히 변경될 수 있습니다.

이 라이브러리의 범위는 확장될 수 있지만, 각 유틸리티의 번들 크기는 작고 핵심 기능에 집중된 상태로 유지하는 것이 목표입니다.

기원​

TanStack Pacer의 많은 아이디어와 코드는 새로운 것이 아닙니다. 실제로 이러한 유틸리티 중 다수는 오랫동안 다른 TanStack 라이브러리에 포함되어 있었습니다. TanStack Query, Router, Form은 물론 Tanner의 초기 Swimmer 라이브러리에서도 코드를 추출했습니다. 그런 다음 유틸리티를 정리하고 부족한 부분을 보완하여 독립형 라이브러리로 출시했습니다.

기능​

[!NOTE] 현재 TanStack Pacer는 주로 클라이언트 측 라이브러리이지만 서버에서도 작동할 수 있도록 코어를 설계하고 있습니다.

  • 디바운스
    • 호출이 멈출 때까지 기다린 후 가장 최근 호출을 실행합니다
    • Promise 지원과 오류 처리를 갖춘 동기 및 비동기 변형을 제공합니다
    • 선행, 후행, 활성화 옵션을 제공합니다
  • 스로틀
    • 균등한 실행 간격을 두어 함수 실행 빈도를 제한합니다
    • Promise 지원과 오류 처리를 갖춘 동기 및 비동기 변형을 제공합니다
    • 선행, 후행, 활성화 옵션을 제공합니다
  • 요청률 제한
    • 일정 시간 창 안에서 함수를 실행할 수 있는 횟수를 제한합니다
    • Promise 지원과 오류 처리를 갖춘 동기 및 비동기 변형을 제공합니다
    • 고정 창 또는 슬라이딩 창 동작을 지원합니다
  • 큐
    • 어떤 호출도 잃지 않고 모든 호출을 순서대로 실행합니다
    • FIFO, LIFO, 우선순위 순서를 지원합니다
    • 대기 시간과 동시 실행 제한을 설정할 수 있습니다
    • 시작, 중지, 항목 만료를 제어합니다
  • 배칭
    • 항목을 모아 한 번의 호출로 함께 처리합니다
    • 크기, 시간, 둘 중 먼저 충족되는 조건 또는 사용자 지정 조건으로 배치를 실행합니다
  • 비동기 지원
    • 모든 유틸리티에 결과를 기다리는 비동기 버전이 있습니다
    • 선택적인 오류, 성공, 완료 콜백을 제공합니다
    • 재시도와 중단을 지원합니다
  • 상태 관리
    • 내부적으로 TanStack Store를 사용하며 세밀한 반응성을 제공합니다
    • 기존에 사용 중인 어떤 상태 관리 방식과도 함께 작동합니다
    • 요청률 제한이나 큐 같은 일부 유틸리티는 상태를 로컬 또는 세션 스토리지에 유지할 수 있습니다
  • 편리한 훅
    • useDebouncedCallback, useThrottledValue, useQueuedState 같은 사전 구성 훅으로 반복 코드를 줄입니다
    • 단순 콜백부터 전체 인스턴스 API까지 여러 추상화 계층을 제공합니다
  • 타입 안전성
    • 함수는 항상 올바른 인수 타입으로 호출됩니다
    • 사용자의 타입에 맞게 조정되는 제네릭 유틸리티를 제공합니다
  • 프레임워크 어댑터
    • React, Preact, Solid, Angular를 지원합니다
  • 트리 셰이킹
    • 트리 셰이킹이 기본으로 작동하며 각 유틸리티에 자체 심층 import도 있어, 라이브러리에서 번들 크기 보고서를 부풀리지 않고 하나의 유틸리티만 가져올 수 있습니다

대화형 비교 데모​

다섯 유틸리티를 가장 빠르게 이해하는 방법은 동일한 입력을 처리하는 모습을 살펴보는 것입니다. 범위 슬라이더를 움직여 디바운스, 스로틀, 요청률 제한, 큐, 배칭이 각각 어떻게 반응하는지 비교합니다.

Pacer Lite​

Pacer Lite(@tanstack/pacer-lite)는 오버헤드를 최소화하려는 npm 패키지를 위한 코어 라이브러리의 경량 버전입니다. 각 Lite 유틸리티는 전체 버전과 동일하게 동작하지만, 더 작은 번들을 위해 반응성, 프레임워크 어댑터, Devtools 지원과 일부 고급 옵션을 제외합니다. 애플리케이션을 개발한다면 일반 패키지를 사용합니다. 라이브러리를 배포하면서 단 1킬로바이트도 중요하다면 Lite를 선택합니다.