[javascript] Fuse.js를 이용한 동영상 검색 기능 구현 방법

01 Dec 2023

javascript

Fuse.js는 JavaScript에서 검색 기능을 구현하기 위한 유용한 라이브러리입니다. 동영상 검색 기능을 구현하기 위해 Fuse.js를 이용하는 방법에 대해 알아보겠습니다.

1. Fuse.js 설치

먼저, Fuse.js를 설치해야 합니다. npm을 이용하여 설치할 수 있습니다.

npm install fuse.js

2. Fuse.js 설정하기

Fuse.js의 인스턴스를 생성하고 검색에 필요한 옵션을 설정해야합니다. 주요 옵션은 다음과 같습니다.

keys: 검색에 사용할 속성들의 배열입니다. 동영상 제목, 설명 등을 포함할 수 있습니다.
threshold: 일치하는 정도를 결정하는 임계값입니다. 0부터 1까지의 값을 가질 수 있습니다.
includeScore: 검색 결과에 점수를 포함할지 여부를 결정하는 옵션입니다.

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

const options = {
  keys: ['title', 'description'],
  threshold: 0.4,
  includeScore: true
};

const fuse = new Fuse(videoData, options);

3. 동영상 검색하기

Fuse.js를 설정한 후에는 실제로 동영상을 검색할 수 있습니다. search 메서드를 사용하여 검색어에 해당하는 결과를 얻을 수 있습니다.

const searchQuery = 'JavaScript tutorial';
const searchResults = fuse.search(searchQuery);

console.log(searchResults);

search 메서드의 반환값은 검색 결과를 나타내는 객체의 배열입니다. 각 객체에는 원본 동영상 데이터와 검색 점수가 포함되어 있습니다.

예시 코드

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

const videoData = [
  {
    id: 1,
    title: 'JavaScript Crash Course',
    description: 'Learn JavaScript in 1 hour'
  },
  {
    id: 2,
    title: 'Advanced JavaScript Concepts',
    description: 'Deep dive into JavaScript'
  },
  {
    id: 3,
    title: 'JavaScript Promises',
    description: 'Master asynchronous programming with promises'
  },
  // more video data...
];

const options = {
  keys: ['title', 'description'],
  threshold: 0.4,
  includeScore: true
};

const fuse = new Fuse(videoData, options);

const searchQuery = 'JavaScript tutorial';
const searchResults = fuse.search(searchQuery);

console.log(searchResults);

위 코드는 Fuse.js를 사용하여 동영상 데이터에서 searchQuery에 해당하는 동영상을 검색하는 예시입니다.

Fuse.js를 활용하면 동영상 검색 기능을 쉽고 효과적으로 구현할 수 있습니다.

참고 자료

Fuse.js 공식 문서: https://fusejs.io/