[javascript] Fuse.js를 이용한 지식베이스 검색 기능 구현 방법

01 Dec 2023

javascript

지식베이스 검색은 웹 애플리케이션에서 많이 사용되는 기능 중 하나입니다. Fuse.js는 클라이언트 측에서 사용할 수 있는 JavaScript 라이브러리로, 지식베이스의 텍스트 검색 기능을 간편하게 구현할 수 있도록 도와줍니다. 이번 기사에서는 Fuse.js를 사용하여 지식베이스 내의 콘텐츠를 효율적으로 검색하는 방법을 알아보겠습니다.

Fuse.js란?

Fuse.js는 JavaScript를 기반으로한 경량의 전문화된 검색 라이브러리입니다. 이 라이브러리는 텍스트 매칭 및 포괄적인 검색 알고리즘을 제공하여 사용자가 지식베이스에 대한 질문이나 검색어를 효과적으로 입력하고 결과를 얻을 수 있도록 도와줍니다.

Fuse.js는 다양한 옵션과 하이라이팅 기능을 제공하여 검색 결과를 관리하고 사용자에게 보다 관련성 높은 결과를 제공할 수 있도록 합니다.

Fuse.js 설치하기

Fuse.js를 사용하기 전에 우선 Fuse.js를 설치해야 합니다. 이를 위해서는 프로젝트의 package.json 파일에 Fuse.js를 의존성으로 추가하거나, npm을 사용하여 Fuse.js를 직접 설치할 수 있습니다.

npm install fuse.js

Fuse.js를 이용한 지식베이스 검색 구현

다음으로, Fuse.js를 이용하여 지식베이스 내의 콘텐츠를 검색하는 기능을 구현해보겠습니다.

먼저, Fuse.js를 불러오고 검색할 데이터를 준비합니다.

const Fuse = require('fuse.js');

const knowledgeBase = [
  { id: 1, title: 'JavaScript Basics', content: 'An introduction to JavaScript programming language.' },
  { id: 2, title: 'HTML & CSS', content: 'Learn the foundational technologies of the web.' },
  { id: 3, title: 'React.js', content: 'A JavaScript library for building user interfaces.' },
];

다음으로, Fuse.js를 초기화하고 검색에 필요한 옵션을 설정합니다.

const options = {
  includeScore: true, // 결과의 관련성 점수를 포함
  threshold: 0.2, // 검색 결과의 관련성을 결정하는 임계값
  keys: ['title', 'content'], // 검색에 사용될 키
};

const fuse = new Fuse(knowledgeBase, options);

이제, 검색어를 입력하여 지식베이스를 검색하는 함수를 작성해봅시다.

function searchKnowledgeBase(query) {
  const results = fuse.search(query);

  if (results.length > 0) {
    return results.map((result) => ({
      id: result.item.id,
      title: result.item.title,
      score: result.score,
    }));
  }

  return [];
}

위의 함수는 주어진 검색어를 사용하여 지식베이스를 검색하고, 결과를 관련성 점수와 함께 반환합니다. 결과가 없는 경우 빈 배열을 반환합니다.

이제 검색 기능을 테스트해보겠습니다.

const searchResults = searchKnowledgeBase('JavaScript');

console.log(searchResults);

출력 결과는 다음과 같을 것입니다.

[
  { id: 1, title: 'JavaScript Basics', score: 0.3 },
  { id: 3, title: 'React.js', score: 0.6 },
]

결론

Fuse.js를 사용하면 웹 애플리케이션에서 지식베이스 검색 기능을 구현할 수 있습니다. Fuse.js는 다양한 옵션과 검색 알고리즘을 제공하여 사용자에게 효과적인 검색 결과를 제공할 수 있습니다. 위의 예시를 참고하여 Fuse.js를 사용하여 지식베이스 검색을 구현해보세요.

참고자료

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