이번 글에서는 JavaScript에서 자주 사용되는 Fuse.js 라이브러리를 이용하여 상품 검색 기능을 구현하는 방법에 대해 알아보겠습니다.

Fuse.js란?

Fuse.js는 JavaScript에서 검색 기능을 구현할 수 있는 라이브러리로 간단한 구문 검색 및 유사성 검색을 제공합니다. Fuse.js는 가중치를 두고 각 항목을 비교하기 때문에 다양한 검색 요구에 맞게 상품 검색 기능을 구현할 수 있습니다.

Fuse.js 설치 및 세팅

Fuse.js를 사용하기 위해서는 먼저 라이브러리를 설치해야 합니다. npm을 이용하여 설치하려면 다음 명령어를 실행하세요.

npm install fuse.js

설치가 완료되면 Fuse.js를 사용할 JavaScript 파일에 다음과 같이 라이브러리를 가져옵니다.

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

Fuse.js를 이용한 상품 검색 구현

이제 실제로 Fuse.js를 활용하여 상품 검색 기능을 구현해보겠습니다. 예를 들어, 상품 목록이 다음과 같이 주어졌다고 가정해보겠습니다.

const products = [
  { id: 1, name: 'Apple iPhone 12', category: 'Electronics' },
  { id: 2, name: 'Samsung Galaxy S21', category: 'Electronics' },
  { id: 3, name: 'Sony WH-1000XM4', category: 'Electronics' },
  { id: 4, name: 'Nike Air Force 1', category: 'Shoes' },
  { id: 5, name: 'Adidas Superstar', category: 'Shoes' },
];

이제 Fuse.js를 초기화하고 검색 옵션을 설정해야 합니다.

const options = {
  keys: ['name', 'category'],
};

const fuse = new Fuse(products, options);

keys 속성에는 Fuse.js가 어떤 속성을 대상으로 검색할지 지정합니다. 위 예시에서는 상품의 이름과 카테고리를 검색 대상으로 설정했습니다.

이제 실제 검색을 수행해보겠습니다.

const searchTerm = 'iPhone';
const results = fuse.search(searchTerm);

console.log(results);

위 예시에서는 ‘iPhone’이라는 검색어로 상품을 검색하고 결과를 console에 출력하도록 설정했습니다.

출력된 결과는 검색어와 가장 유사한 순서로 정렬된 상품 목록이 반환됩니다. 각 결과 항목은 원래의 상품 객체와 일치하는 속성들을 포함합니다.

정리

이제 Fuse.js를 사용하여 상품 검색 기능을 구현하는 방법에 대해 알아보았습니다. Fuse.js는 간편한 검색 기능을 제공하며 다양한 검색 요구에 맞게 활용할 수 있습니다. Fuse.js의 공식 문서에서 더 많은 사용 예제 및 옵션에 대해 자세히 알아볼 수 있으니 참고하시기 바랍니다.

참고 자료

• Fuse.js 공식 문서