[javascript] Fuse.js와 관련된 실무 적용 사례 소개
Fuse.js는 JavaScript에서 사용할 수 있는 강력한 검색 라이브러리입니다. 이 라이브러리는 fuzzy 검색, 패턴 매칭, 가중치 할당 등 다양한 기능을 제공하여 사용자가 원하는 데이터를 효율적으로 검색할 수 있게 도와줍니다. 이번 글에서는 Fuse.js를 실무에 적용한 몇 가지 사례를 소개하고자 합니다.
1. 온라인 쇼핑 웹사이트의 검색 기능 개선
온라인 쇼핑 웹사이트에서 Fuse.js를 사용하여 검색 기능을 개선하는 사례가 많이 있습니다. Fuse.js는 사용자의 검색어와 상품 정보를 비교하여 가장 잘 맞는 상품을 추천할 수 있습니다. 이를 통해 사용자는 원하는 상품을 더 쉽게 찾을 수 있고, 웹사이트는 검색 결과의 정확도를 향상시킬 수 있습니다.
const products = [
{ id: 1, name: 'iPhone 12 Pro', brand: 'Apple', price: 1299 },
{ id: 2, name: 'Galaxy S21 Ultra', brand: 'Samsung', price: 1199 },
{ id: 3, name: 'Pixel 5', brand: 'Google', price: 699 },
// ... 상품 정보 데이터
];
const options = {
includeScore: true,
keys: ['name', 'brand']
};
const fuse = new Fuse(products, options);
const result = fuse.search('iPhone');
console.log(result[0].item); // { id: 1, name: 'iPhone 12 Pro', brand: 'Apple', price: 1299 }
위의 예시에서는 온라인 쇼핑 웹사이트에 등록된 상품 정보들을 Fuse.js에 전달하여 “iPhone”이라는 검색어와 일치하는 상품을 찾고 있습니다. Fuse.js는 사용자의 검색어와 상품 이름 및 브랜드를 비교하여 가장 유사한 결과를 반환합니다.
2. 사용자 데이터 필터링
Fuse.js는 데이터 필터링에도 유용하게 사용될 수 있습니다. 예를 들어, 사용자가 특정 조건에 맞는 데이터를 찾고자 할 때 Fuse.js를 활용할 수 있습니다. 이를 통해 사용자는 원하는 데이터를 보다 쉽게 찾을 수 있습니다.
const users = [
{ name: 'John Doe', age: 25, location: 'New York' },
{ name: 'Jane Smith', age: 30, location: 'Los Angeles' },
{ name: 'David Johnson', age: 35, location: 'Chicago' },
// ... 사용자 정보 데이터
];
const options = {
includeScore: false,
threshold: 0.5,
keys: ['name', 'location']
};
const fuse = new Fuse(users, options);
const result = fuse.search('Chicago');
console.log(result[0].item); // { name: 'David Johnson', age: 35, location: 'Chicago' }
위의 예시에서는 사용자 정보를 Fuse.js에 전달하여 “Chicago”를 포함하는 사용자를 찾고 있습니다. Fuse.js는 사용자의 검색어와 이름 및 위치 정보를 비교하여 가장 일치하는 결과를 반환합니다.