Fuse.js는 JavaScript에서 사용할 수 있는 강력한 검색 라이브러리입니다. 객체 배열에서 키워드를 사용하여 빠르게 검색할 수 있습니다. 이 예제에서는 Fuse.js를 사용하여 객체 배열에서 검색을 수행하는 방법을 살펴보겠습니다.

설치

먼저, Fuse.js 라이브러리를 설치해야 합니다. npm을 사용하거나 CDN을 통해 라이브러리를 가져올 수 있습니다.

NPM을 사용하는 경우:

npm install fuse.js

CDN을 사용하는 경우:

<script src="https://cdn.jsdelivr.net/npm/fuse.js/dist/fuse.min.js"></script>

예시 데이터

다음은 우리가 검색할 예시 데이터입니다. 이 데이터는 사람들의 이름과 이메일 주소로 이루어진 객체 배열입니다.

const people = [
  { name: "John Doe", email: "john.doe@example.com" },
  { name: "Jane Smith", email: "jane.smith@example.com" },
  { name: "Bob Johnson", email: "bob.johnson@example.com" },
  { name: "Alice Williams", email: "alice.williams@example.com" },
  // ...더 많은 사람들의 데이터
];

Fuse.js로 검색하기

이제 Fuse.js를 사용하여 객체 배열에서 검색해보겠습니다. 우선 Fuse 인스턴스를 생성해주어야 합니다. 아래의 코드를 사용해서 인스턴스를 생성하세요.

const fuse = new Fuse(people, {
  keys: ["name", "email"],
});

위 코드에서 keys는 검색할 키워드를 지정하는 부분입니다. 이 예시에서는 "name"과 "email" 키를 사용하여 검색을 수행합니다. 필요에 따라 다른 키를 추가할 수도 있습니다.

이제 검색을 수행해보겠습니다. 아래의 코드를 사용하여 키워드를 포함하는 객체를 검색할 수 있습니다.

const results = fuse.search("john");

search 함수의 인자로 검색할 키워드를 전달합니다. 위 코드에서는 "john"을 검색 키워드로 사용하고 있습니다.

검색 결과는 배열로 반환됩니다. 만약 검색 결과가 없는 경우, 빈 배열이 반환됩니다. 만약 검색 결과가 있다면, 해당 객체들의 배열이 반환됩니다.

검색 결과 사용하기

검색 결과를 사용하는 방법은 다양합니다. 여기서는 결과를 콘솔에 출력하는 예제를 보여드리겠습니다.

results.forEach((result) => {
  console.log(result.item);
});

위 코드는 검색 결과 배열을 순회하며 각 객체의 정보를 콘솔에 출력합니다. result.item은 검색된 객체 자체를 나타냅니다.

결론

Fuse.js를 사용하면 JavaScript에서 객체 배열을 효과적으로 검색할 수 있습니다. 이러한 기능을 사용하면 다양한 유형의 데이터에서 빠르게 검색할 수 있으므로, 데이터베이스나 API 호출 등의 비용을 줄일 수 있습니다. Fuse.js의 공식 문서를 참조하여 더 자세한 사용법을 확인해보세요.

참고 자료:

• Fuse.js 공식 문서