[javascript] Fuse.js를 이용한 실시간 데이터 검색 기능 구현 방법

01 Dec 2023

javascript

Fuse.js는 JavaScript에서 사용할 수 있는 강력한 검색 라이브러리입니다. 이 라이브러리를 사용하면 대용량의 데이터에서 빠르고 정확한 검색을 할 수 있습니다.

이번 포스트에서는 Fuse.js를 사용하여 웹 애플리케이션에 실시간 데이터 검색 기능을 구현하는 방법을 알아보겠습니다.

1. Fuse.js 설치

먼저, Fuse.js를 프로젝트에 설치해야 합니다. 설치하기 위해 다음 명령어를 사용합니다.

npm install fuse.js

2. Fuse.js로 데이터 검색하기

Fuse.js를 사용하여 데이터를 검색하는 예제를 살펴보겠습니다.

// Fuse.js 라이브러리를 불러옵니다.
const Fuse = require('fuse.js');

// 검색할 데이터 배열을 생성합니다.
const data = [
  { title: 'Apple', category: 'Fruit' },
  { title: 'Banana', category: 'Fruit' },
  { title: 'Carrot', category: 'Vegetable' },
  { title: 'Tomato', category: 'Vegetable' },
];

// Fuse.js의 옵션을 설정합니다.
const options = {
  keys: ['title'], // 검색할 필드를 지정합니다.
};

// Fuse 인스턴스를 생성합니다.
const fuse = new Fuse(data, options);

// 검색어를 입력받은 후 데이터를 검색합니다.
const search = (query) => {
  const result = fuse.search(query);
  console.log(result);
};

// 검색어를 입력받고 검색 함수를 호출합니다.
const query = prompt('검색어를 입력하세요:');
search(query);

위 예제는 title 필드를 기준으로 데이터를 검색하도록 설정한 후, 사용자로부터 검색어를 입력받고 입력받은 검색어로 데이터를 검색하는 간단한 예제입니다.

3. 실시간 검색 기능 구현하기

Fuse.js를 사용하여 실시간 검색 기능을 구현하는 방법을 알아보겠습니다.

// Fuse.js 라이브러리를 불러옵니다.
const Fuse = require('fuse.js');

// 검색할 데이터 배열을 생성합니다.
const data = [
  { title: 'Apple', category: 'Fruit' },
  { title: 'Banana', category: 'Fruit' },
  { title: 'Carrot', category: 'Vegetable' },
  { title: 'Tomato', category: 'Vegetable' },
];

// Fuse.js의 옵션을 설정합니다.
const options = {
  keys: ['title'], // 검색할 필드를 지정합니다.
};

// Fuse 인스턴스를 생성합니다.
const fuse = new Fuse(data, options);

// 실시간 검색 함수를 생성합니다.
const realtimeSearch = (query) => {
  const result = fuse.search(query);
  console.log(result);
};

// input 요소에 이벤트 리스너를 추가합니다.
const input = document.querySelector('#search-input');
input.addEventListener('input', (event) => {
  const query = event.target.value;
  realtimeSearch(query);
});

위 예제는 사용자가 입력한 값을 실시간으로 검색하여 결과를 출력하는 기능을 구현한 예제입니다. input 요소에 input 이벤트 리스너를 등록하고, 입력된 값을 검색어로 사용하여 데이터를 검색합니다. 검색 결과는 콘솔에 출력됩니다만, 필요에 따라 검색 결과를 화면에 출력할 수도 있습니다.

이렇게 Fuse.js를 사용하여 실시간 데이터 검색 기능을 구현할 수 있습니다.

결론

이번 포스트에서는 Fuse.js를 사용하여 실시간 데이터 검색 기능을 구현하는 방법에 대해 알아보았습니다. Fuse.js는 강력한 검색 기능을 제공하므로, 대용량 데이터에서도 빠르고 정확한 검색을 할 수 있습니다. Fuse.js를 활용하여 웹 애플리케이션 등에 검색 기능을 추가해보세요!

참고:

Fuse.js GitHub Repository