CSS를 이용한 클라이언트 측 전체 텍스트 검색

Source

• Evernote/IFTTT Feedly/Client-side full-text search in CSS.md

Summary

François Zaninotto가 제안한 CSS 기반 클라이언트 측 검색 기법입니다. 검색 대상 요소에 자식 노드의 텍스트를 합친 data-index 속성을 추가하고, [data-index*=""] 선택자를 사용하여 매칭을 수행합니다. DOM 크기가 약 2배 증가하는 단점이 있으나, 속도가 빠르고 구현이 간단한 장점이 있습니다.

Key Points

• 검색 대상 요소에 data-index 속성 추가 (자식 텍스트 내용 통합)
• CSS 속성 선택자 [data-index*=""] 활용하여 텍스트 매칭
• DOM 메모리 사용량 증가(약 2배) trade-off 존재
• 서버 요청 없이 빠른 클라이언트 측 검색 가능

Related

• 웹 애플리케이션 모델 저장소의 텍스트 및 내용 기반 검색

• 웹 검색 쿼리의 감정 분석 및 활용

• List.js: HTML 리스트의 검색, 정렬, 필터링을 위한 경량 JavaScript 라이브러리

• CSS 면접 질문 및 실습 과제 모음

• HTML5 Web App Client-Side Storage 옵션 및 팁

• HTTP 클라이언트 라이브러리의 리다이렉트 지원 방식 제안

• vlHMM 기반 컨텍스트 인식 검색

• 크롬 개발자 도구 101

• HTML에서 Javascript와 CSS 기반으로 애니메이션을 구현하는 방법

• 8bit.js: Web Audio API 기반 8비트 사운드 라이브러리

• HTML5 게임 오프라인 지원 가이드

• 리눅스 환경 HLS 스트리밍 참조 링크 모음

• 파이썬 urllib를 이용한 웹 소스 출력 스크립트

• 31 CSS Web Design Galleries You’ll Love

• Prototype용 선택 상자 플러그인

• CSS 최신 동향 파악을 위한 Adobe Web Platform 블로그

• ML 기반 번들링: JavaScript 툴링의 미래

• Web Animations API: element.animate() (Chrome 36)

• Requirify: 브라우저 콘솔에서 동적 라이브러리 로딩

• HTML5 Video Player Comparison (2011)

• CSS :scope 가상 클래스의 용도 및 동작 방식

• Three.js 시작 가이드 (Aerotwist)

• 북마클릿(Bookmarklet) 정의

• HTTP Archive: jQuery 호스팅 및 버전 분산 분석 (2013)

• D3.js를 활용한 한국 지도 시각화 가이드

• grunt-usemin을 사용한 프론트엔드 자산 패키징

• The “When Can I Use” Web Widget

• awesome-javascript (스크랩 실패)

• VueJS 프로젝트에 Prettier + ES6 Lint 적용

• Chromecast 에서 Game Boy 에뮬레이터 실행 방법 (개념 증명)

• Web Framework Benchmark Inspired

• requestAnimationFrame 사용법

• Godot 엔진을 활용한 Spine(SD) 애니메이션 실행 가이드

• The Web Ahead: Jen Simmons 인터뷰 요약

• Hiding Native HTML5 Video Controls in Full-Screen Mode

• JavaScript 학습 자료 (2013)

• NDC 2012 강연 자료 링크 모음

• 게임 개발팀 A의 정기 회의 매뉴얼

• Distributed Electronic Rights in JavaScript

• Bower: 웹 프론트엔드 패키지 관리자

• PC 게임 실행 가능 여부 확인 방법

• 오프라인 웹 애플리케이션 만들기 (Mozilla 웹 기술 블로그)

• 2012년 비즈니스 및 마케팅 트렌드 예측 자료 12선 (슬라이드쉐어)

• Web Workers: JavaScript 멀티스레딩

• 대시보드 장착 Nexus 7 및 KITT 테마 커스텀 런처

• Yeoman: 도구를 활용한 더 나은 웹 개발

• Web Fundamentals 및 Web Starter Kit 리소스

• 미래형 반응형 웹 디자인 (Warpspire)

• JavaScript 성능 향상을 위한 Thread-level Speculation (TLS)

• Design Patterns in JavaScript (tcorral)

• 웹의 병목 현상: JavaScript

• JavaScript 기반 분산 컴퓨팅 고려사항

• KT 경제경영연구소 보고서 모음 (니오 필진)

• 브라우저 동작의 이해 - 리플로우와 리페인트 및 그 최적화

• 브라우저 개발자 도구의 25 가지 비법 (2011)

• API 산업 초기 단계 및 Daum DNA API Meetup 후기

• Google, Web Components 를 웹 개발의 미래로 제시 (2013)

• JavaScript 의 현대적 활용 분야 (2019)

• 2017 년 JavaScript 테스트 개요 (Powtoon Engineering)

• API 하이퍼미디어 형식 선택 가이드 (HAL, JSON-LD, Collection+JSON, SIREN)

• 비동기적 JavaScript

• 웹의 불안전한 JavaScript 사용 관행에 대한 측정 연구

• JavaScript this 키워드 동작 원리

• Chrome DevTools 모바일 스크린캐스트 및 에뮬레이션

• 웹 증강을 위한 엔드유저 언어: 생산자와 소비자 모두를 위한 접근

• Web Workers API 개요 및 기본 사용법

• Play Framework 2.2 기반 Facebook Canvas 게임 개발 일지

• Puppeteer를 활용한 로컬 개발 서버 대체 방안 (web.dev 사례)

• Distributed Web Worker 개발 중 Promise 및 이벤트 처리 이슈

• HTML5 Developer Conference 후기 1

• JavaScript 과잉 조직화 (Over-Organizing) 의 적절성

• Web Push Notifications for a Simple Login System

• JavaScript 패키지 매니저의 간략한 역사 (npm, Yarn, pnpm)

• 텍스트 교체하기: 5가지 방법 (Swapping Out Text, Five Different Ways)

• 구글의 대화형 검색 (2013)

• HTML5 Canvas 실시간 드로잉 성능 최적화 가이드

• 크롬 컨퍼런스 핵심 요약 (Web Components, DevTools, Chrome Apps)

• End-to-End Hypermedia: 미디어 타입 선택 가이드

• JSWhiz: JavaScript 메모리 누수 정적 분석 도구

• 풀스택 JavaScript 프레임워크 학습 조언 (Quora)

• 종성 분리 알고리즘

• jQuery 이벤트 핸들링: .on() 사용 권장

• 대용량 텍스트 컬렉션에서의 효율적 퍼지 검색

• Gittip-links Chrome Extension 개발 기록

• Scala + Play Framework 2 Server 성능 향상 시키기