JSON 질의 라이브러리는 세 갈래로 구현된다. 1 작은 인터프리터(jsonata, GROQ 의 groq-js, mistql): 질의 문자열을 렉서가 토큰으로 자르고, 파서가 AST 로 만든다 — jsonata 는 Pratt 의 하향식 연산자 우선순위 파서를 쓴다. 평가기가 그 AST 를 걸으며 JSON 데이터에 적용한다. 예를 들어 Order[Price > 30].Product 는 경로 노드 아래 Order 단계(필터 Price > 30 이 붙음)와 Product 단계로 파싱되고, Order 배열의 원소마다 필터를 적용한 뒤 남은 원소의 Product 를 모은다. 2 엔진을 빌린다(defiant.js): JSON 을 XML 로 바꾼 뒤 XPath 질의를 브라우저 내장 XPath 엔진(node.evaluate)에 맡기고, 찾은 XML 노드를 다시 JSON 으로 바꾼다. 3 질의 언어가 아니라 색인이다(js-search): 문서의 글자를 소문자로 맞추고 단어로 자른 뒤 접두어로 펼쳐(cat 을 c, ca, cat 으로) 토큰에서 문서로 가는 역색인을 만든다. 검색할 때는 검색어를 같은 방식으로 자르고 토큰마다 문서 집합을 찾아 교집합을 낸 뒤 TF-IDF 로 정렬한다.

Footnotes

  1. XPath 표현식으로 JSON 검색 ↩

  2. JSON 쿼리·변환 언어. XPath 3.1의 위치 경로에서 영감 ↩

  3. 클라이언트 측 검색 ↩

  4. Sanity의 쿼리 언어. 여러 문서를 묶어 필요한 필드만 뽑는다 ↩

  5. Query JSON documents in the Terminal with GROQ | CSS-Tricks ↩

  6. JSON 유사 구조에서 계산하는 소형 내장 언어 ↩

#json#search
#123

검색어 필터링 UI → Debounce (300-500ms)

타이핑 완료 후 검색이 더 자연스러움. “자바스크립트” 입력 시 매 글자마다 검색하면 비효율적. Debounce 는 호출이 멈출 때까지 기다리고, Throttle 은 계속 호출돼도 정해진 최대 빈도로 실행한다.1

const handleSearch = debounce((term) => performSearch(term), 300)
input.addEventListener('input', (e) => handleSearch(e.target.value))

Throttle은 실시간 검색 결과를 보여주면서 요청 제한할 때 사용 (1초마다 최대 1회 등).

Footnotes

  1. Debounce - MDN Glossary: “The key difference is that throttling enforces limits on continuous operations, while debouncing waits for invocations to stop for a specific time to consolidate many noisy invocations into one single invocation.” ↩

#debounce#throttle#search#ux
#518