[javascript] Fuse.js를 이용한 실시간 공연 정보 검색 기능 구현 방법

01 Dec 2023

javascript

이번 글에서는 Fuse.js 라이브러리를 활용하여 실시간 공연 정보 검색 기능을 구현하는 방법에 대해 알아보겠습니다.

Fuse.js란?

Fuse.js는 JavaScript로 개발된 강력한 문자열 검색 라이브러리입니다. 이 라이브러리를 활용하면 사용자가 입력한 텍스트와 가장 일치하는 결과를 찾을 수 있으며, 거리 기반 매칭, 정확도, 가중치 등 다양한 검색 옵션을 제공합니다. 이를 활용하여 실시간 공연 정보 검색 기능을 간편하게 구현할 수 있습니다.

실시간 공연 정보 검색 기능 구현 방법

1. Fuse.js 설치

먼저, Fuse.js를 사용하기 위해 프로젝트에 라이브러리를 설치해야 합니다. npm을 통해 Fuse.js를 설치할 수 있습니다.

npm install fuse.js

2. Fuse.js 설정

검색 기능에 필요한 설정을 정의해야 합니다. Fuse.js는 초기화할 때 검색 대상 데이터와 검색 옵션 객체를 인자로 받습니다. 예를 들면 다음과 같습니다.

const data = [
  { title: "공연1", artist: "아티스트1" },
  { title: "공연2", artist: "아티스트2" },
  // ...
];

const options = {
  keys: ["title", "artist"],
  // 다른 검색 옵션 설정
};

const fuse = new Fuse(data, options);

위 코드에서 data에는 검색 대상 데이터 배열이 포함되어 있으며, keys 속성을 통해 검색할 필드를 정의합니다.

3. 검색 기능 구현

이제 검색 기능을 구현할 차례입니다. 사용자가 입력한 텍스트에 대해 Fuse.js를 활용하여 검색을 수행하고, 가장 일치하는 결과를 출력합니다.

const searchInput = document.getElementById("search-input");
const searchResults = document.getElementById("search-results");

searchInput.addEventListener("keyup", (event) => {
  const query = event.target.value;
  const result = fuse.search(query);

  searchResults.innerHTML = "";

  result.forEach((item) => {
    const li = document.createElement("li");
    li.textContent = `${item.title} - ${item.artist}`;
    searchResults.appendChild(li);
  });
});

위 코드에서 searchInput은 검색어 입력을 위한 input 요소를, searchResults는 검색 결과를 출력할 ul 요소를 나타냅니다. keyup 이벤트가 발생할 때마다 Fuse.js를 활용하여 검색을 수행하고, 결과를 동적으로 생성된 li 요소에 추가하여 결과를 출력합니다.

마무리

이러한 방법으로 Fuse.js를 이용하여 실시간 공연 정보 검색 기능을 구현할 수 있습니다. Fuse.js는 강력한 검색 기능을 제공하며, 다양한 프로젝트에 활용할 수 있습니다. Fuse.js 공식 문서를 참고하여 더 많은 기능과 옵션을 탐색해보세요.

참고 자료

Fuse.js 공식 문서: https://fusejs.io/
Fuse.js GitHub 저장소: https://github.com/krisk/Fuse