[javascript] Fuse.js를 이용한 전화번호부 검색 기능 구현 방법
Fuse.js는 JavaScript로 작성된 가볍고 강력한 문자열 검색 라이브러리입니다. 이를 사용하면 전화번호부와 같은 데이터에서 효과적으로 검색 기능을 추가할 수 있습니다.
Fuse.js 설치하기
Fuse.js를 사용하기 위해 먼저 npm 패키지 관리자를 통해 Fuse.js를 설치해야 합니다. 아래의 명령어를 사용하여 설치합니다.
npm install fuse.js
전화번호부 데이터 준비하기
Fuse.js는 어떤 형태의 데이터든 상관없이 검색할 수 있습니다. 따라서 우리는 전화번호부 데이터를 준비하여 검색할 수 있도록 개발해야 합니다.
예를 들어, 아래와 같은 배열 형태의 전화번호부 데이터를 가정해 봅시다.
const phoneNumberList = [
{ name: "John Doe", phoneNumber: "123-456-7890" },
{ name: "Sarah Smith", phoneNumber: "987-654-3210" },
// ...
];
Fuse.js로 검색 기능 구현하기
이제 Fuse.js를 사용하여 전화번호부 데이터에서 검색 기능을 구현해봅시다.
const Fuse = require("fuse.js");
// Fuse.js 옵션 설정
const options = {
includeScore: true, // 검색 결과에 점수 포함 여부
keys: ["name", "phoneNumber"], // 검색 대상 필드
};
// Fuse 객체 생성
const fuse = new Fuse(phoneNumberList, options);
// 검색어를 이용하여 전화번호부 검색
const searchQuery = "John";
const searchResults = fuse.search(searchQuery);
// 검색 결과 출력
searchResults.forEach((result) => {
console.log(result.item); // 검색된 전화번호부 항목 출력
console.log(result.score); // 검색 결과 점수 출력
});
위의 코드에서는 Fuse
객체를 생성하고, 검색할 전화번호부 데이터와 옵션을 설정합니다. 그 후, search
메서드를 사용하여 검색어를 이용하여 전화번호부를 검색합니다.
검색 결과는 searchResults
배열로 반환되며, 각 검색 결과는 item
과 score
속성을 가집니다. item
은 검색된 전화번호부 항목을 나타내고, score
는 결과의 유사도를 나타냅니다.
이제 Fuse.js를 사용하여 전화번호부 검색 기능을 구현할 수 있습니다!
참고 자료
- Fuse.js 공식 문서: https://fusejs.io/