[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 배열로 반환되며, 각 검색 결과는 itemscore 속성을 가집니다. item은 검색된 전화번호부 항목을 나타내고, score는 결과의 유사도를 나타냅니다.

이제 Fuse.js를 사용하여 전화번호부 검색 기능을 구현할 수 있습니다!

참고 자료