[javascript] Fuse.js를 이용한 웹 사이트 내부 검색 기능 구현 방법

01 Dec 2023

javascript

Fuse.js는 JavaScript로 작성된 강력한 문자열 검색 라이브러리입니다. 이 라이브러리를 사용하면 웹 사이트에서 효과적인 내부 검색 기능을 좀 더 쉽게 구현할 수 있습니다.

Fuse.js 설치

Fuse.js를 사용하기 위해서는 먼저 해당 라이브러리를 설치해야 합니다. npm을 사용할 경우, 다음 명령어를 터미널에 입력하여 설치할 수 있습니다.

npm install fuse.js

Fuse.js를 직접 다운로드하여 사용할 수도 있습니다. 이 경우, Fuse.js 스크립트 파일을 HTML 문서에 추가해야 합니다.

Fuse.js 사용 방법

Fuse.js를 사용하여 웹 사이트에서 내부 검색을 구현하는 방법은 다음과 같습니다.

Fuse.js 라이브러리를 임포트합니다.

import Fuse from 'fuse.js';

검색할 대상 데이터를 준비합니다. 이 데이터는 배열 형태로 구성되어야 합니다. 각 항목은 검색 가능한 필드와 해당 필드의 값을 가지고 있어야 합니다.

const data = [
  {
    title: '제품1',
    description: '이 제품은 매우 유용한 제품입니다.',
    price: 100
  },
  {
    title: '제품2',
    description: '이 제품은 놀라운 기능을 가진 제품입니다.',
    price: 200
  },
  // 추가 데이터 항목들...
];

Fuse.js 인스턴스를 생성합니다. Fuse.js 생성자에는 검색할 대상 데이터와 검색 옵션을 전달해야 합니다.

const options = {
  keys: ['title', 'description'], // 검색 가능한 필드들을 지정합니다.
  includeScore: true, // 검색 결과에 점수를 포함할지 여부를 지정합니다.
};

const fuse = new Fuse(data, options);

사용자 입력을 받아서 실시간으로 검색을 수행합니다. Fuse.js의 search 메서드를 사용하여 사용자 입력에 가장 적합한 검색 결과를 가져올 수 있습니다.

const userInput = '제품';

const result = fuse.search(userInput);

console.log(result);

result는 사용자 입력에 가장 적합한 검색 결과로 구성된 배열입니다. 각 결과 항목은 item 속성으로 실제 데이터를 포함하고 있습니다. score 속성은 검색 결과의 유사도 점수를 나타냅니다.

추가 설정 및 활용

Fuse.js는 다양한 옵션을 제공하여 검색 결과를 더욱 정확하게 가져올 수 있습니다. 예를 들어, 검색 필드에 가중치를 부여할 수 있고, 검색 결과를 필터링하거나 정렬할 수도 있습니다. 자세한 내용은 Fuse.js 문서를 참조하세요.

Fuse.js는 웹 사이트의 내부 검색뿐만 아니라 모바일 애플리케이션이나 데스크톱 애플리케이션에서도 사용할 수 있는 강력한 도구입니다. Fuse.js를 활용하여 사용자들에게 더 나은 검색 경험을 제공해보세요.

참고 자료

Fuse.js 공식 문서: https://fusejs.io/
Fuse.js GitHub 저장소: https://github.com/krisk/Fuse