algolia-search
React InstantSearch 를 활용한 Algolia 검색 구현
웹 애플리케이션에 검색 기능을 추가하려면 복잡한 인덱싱 전략과 UI 패턴에 대한 이해가 필요합니다. 이 스킬은 Algolia 통합, React InstantSearch 훅, 그리고 최적의 검색 경험을 위한 관련성 튜닝에 대한 전문적인 가이드를 제공합니다.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"algolia-search" 사용 중입니다. 실시간 결과와 함께 검색 상자 생성
예상 결과:
적절한 Algolia 구성과 함께 InstantSearch provider 로 래핑된, 입력 처리를 위한 useSearchBox 훅과 실시간 검색 결과 표시를 위한 useHits 를 사용하는 React 컴포넌트.
"algolia-search" 사용 중입니다. 카테고리 필터링을 어떻게 구현하나요?
예상 결과:
refinementList 훅을 사용하고 속성을 카테고리 필드로 설정하세요. 히트 카운트와 함께 각 카테고리 옵션에 대한 체크박스를 표시하는 RefinementList 컴포넌트에 연결하세요.
보안 감사
안전Static analysis flagged 3 patterns as potential security issues, but all are false positives. The flagged lines contain documentation text about Algolia search implementation, not executable code. Line 3 and 70 contain descriptive text misidentified as weak crypto. Line 53 discusses Algolia indexing best practices, not system reconnaissance. This is a documentation-only skill file with no security risks.
품질 점수
만들 수 있는 것
이커머스 상품 검색
온라인 스토어를 위한 카테고리 필터, 가격 범위, 실시간 결과를 포함한 빠르고 패싯화된 상품 검색을 구현합니다.
문서 사이트 검색
기술 콘텐츠 및 API 참조를 위한 관련성 튜닝과 함께 문서 사이트에 자동완성 검색을 추가합니다.
콘텐츠 탐색 포털
블로그나 미디어 라이브러리를 위한 페이지네이션, 정렬, 멀티인덱스 검색 기능을 갖춘 검색 가능한 콘텐츠 허브를 구축합니다.
이 프롬프트를 사용해 보세요
Algolia InstantSearch 훅을 사용하여 React 검색 컴포넌트를 생성하세요. 간단한 제품 카탈로그를 위한 검색 상자, 히트 표시, 기본 스타일을 포함하세요.
카테고리, 가격 범위, 브랜드 필터를 위한 refinement 리스트와 함께 패싯 검색을 구현하세요. useRefinementList 를 사용하고 패싯팅을 위해 Algolia 인덱스 설정을 구성하세요.
InstantSearchNext 컴포넌트를 사용하여 Next.js 서버사이드 렌더링과 함께 Algolia InstantSearch 를 설정하세요. App Router 애플리케이션을 위한 URL 동기화 및 초기 서버 상태 처리를 포함하세요.
Algolia 를 PostgreSQL 데이터베이스와 동기화하는 인덱싱 전략을 설계하세요. deleteBy 를 사용하지 않고 속성 전용 변경을 위한 partialUpdateObjects 를 구현하고 레코드를 효율적으로 배치 처리하세요.
모범 사례
- 최적의 성능을 위해 배치당 10MB 또는 1K-10K 레코드로 배치 인덱스 작업 수행
- 특정 속성만 업데이트할 때 전체 레코드 교체 대신 partialUpdateObjects 사용
- deleteBy 연산은 계산 비용이 많이 들므로 피하고 대신 객체 삭제와 배치 사용
피하기
- 점진적 업데이트 대신 모든 데이터 변경 시 전체 재인덱싱 수행
- 배치 연산 대신 개별 레코드를 Algolia 에 전송
- 배치 객체 삭제 대신 대량 삭제를 위해 deleteBy 사용