Skip to content

MDN Web Docs

MDN 웹 문서(영어: MDN Web Docs, 이전 이름 모질라 개발자 네트워크(영어: Mozilla Developer Network), 모질라 개발자 센터(영어: Mozilla Developer Center))는 웹 표준과 모질라 프로젝트에 대한 개발 문서들이 담긴 모질라의 공식 웹사이트이다.

Categories

MDNs autocomplete search works

MDN의 검색 자동완성 구현 방법:

  • 사용자가 뭔가 검색하려고 할 때 11,690개의 글 제목 인덱스를 내려 받아서 로컬 검색을 진행
    • Brotli 로 압축한 144KB 짜리 JSON파일 (title,url)
    • 검색창에 onmouseover, onfocus 시, 또는 문서 전체에서 '/' 입력시 검색 시작으로 인식해서 파일 다운로드 (데이터 파일과 검색 함수 파일)
  • 데이터 파일을 다운 받아서 FlexSearch 라이브러리로 인덱스를 구성하고 downshift 로 UI처리
    • FlexSearch : 빠른 full-text 검색 라이브러리
    • downshift : React용 자동완성 컴포넌트
    • 어떤 결과가 먼저 보여질 지는 서버에서 JSON 데이터 구성시 PV에 따라서 정렬하고 그 순서에 따라서 나오게 함

See also

Favorite site