Fuse.js 소개

Fuse.js는 클라이언트 사이드에서 사용할 수 있는 경량화된 JavaScript 라이브러리로, 퍼지 검색(fuzzy search)을 지원합니다. 퍼지 검색은 일반적인 문자열 검색과는 달리, 오타나 어휘적 유사성 등을 고려하여 결과를 반환하는 기능입니다.

Fuse.js 설치

Fuse.js를 사용하기 위해서는 먼저 라이브러리를 설치해야 합니다. 아래 명령어를 사용하여 Fuse.js를 설치합니다.

npm install fuse.js

영화 데이터 준비

Fuse.js를 사용하여 영화 검색 기능을 구현하기 위해서는 영화 데이터가 필요합니다. 예를 들어, 다음과 같은 형태의 JSON 데이터를 사용할 수 있습니다.

[
  {
    "title": "인셉션",
    "director": "크리스토퍼 놀란",
    "year": 2010
  },
  {
    "title": "어벤져스: 엔드게임",
    "director": "안소니 루소, 조 루소",
    "year": 2019
  },
  {
    "title": "타짜",
    "director": "최동훈",
    "year": 2006
  },
  // ...
]

Fuse.js를 이용한 검색 기능 구현

다음은 Fuse.js를 이용하여 영화 검색 기능을 구현하는 예시입니다.

const Fuse = require('fuse.js');

// 영화 데이터
const movies = [
  {
    "title": "인셉션",
    "director": "크리스토퍼 놀란",
    "year": 2010
  },
  {
    "title": "어벤져스: 엔드게임",
    "director": "안소니 루소, 조 루소",
    "year": 2019
  },
  {
    "title": "타짜",
    "director": "최동훈",
    "year": 2006
  },
  // ...
];

// Fuse.js 옵션 설정
const options = {
  keys: ['title', 'director'], // 검색할 필드
  threshold: 0.3, // 검색 결과 반환 임계값 (0 ~ 1 사이, 낮을수록 더 엄격하게 일치해야 함)
};

// Fuse.js 인스턴스 생성
const fuse = new Fuse(movies, options);

// 검색어로 영화 검색
const searchTerm = '타';
const searchResults = fuse.search(searchTerm);

// 검색 결과 출력
console.log(searchResults);

위 코드는 Fuse.js를 사용하여 영화 데이터에서 해당 검색어를 포함하는 영화를 조회하는 예시입니다. keys 옵션으로 검색할 필드를 설정하고, threshold 옵션으로 검색 결과의 일치 정도를 설정할 수 있습니다. 검색 결과는 search() 메소드를 통해 반환되며, 결과를 원하는 형태로 가공하여 출력할 수 있습니다.

Fuse.js를 사용하면 사용자가 입력한 검색어의 오타나 유사한 단어도 포함하여 결과를 반환할 수 있으므로, 더 편리하고 정확한 검색 기능을 구현할 수 있습니다.

참고 자료

• Fuse.js 공식 문서: https://fusejs.io/
• Fuse.js GitHub 레포지토리: https://github.com/krisk/Fuse