[javascript] Fuse.js를 이용한 날씨 정보 검색 기능 구현 방법

01 Dec 2023

javascript

이번 포스트에서는 Fuse.js 라이브러리를 이용하여 날씨 정보를 검색하는 기능을 구현하는 방법을 알아보겠습니다. Fuse.js는 JavaScript에서 사용할 수 있는 가볍고 유연한 텍스트 검색 라이브러리입니다.

Fuse.js를 사용하여 날씨 정보를 검색하는 기능을 구현하려면 다음 단계를 따라 진행하면 됩니다.

1. Fuse.js 설치

먼저, Fuse.js를 프로젝트에 설치해야 합니다. npm을 사용하는 경우 다음 명령어를 사용하여 설치할 수 있습니다:

npm install fuse.js

2. Fuse.js 초기화

Fuse.js를 사용하기 위해 해당 라이브러리를 가져와야 합니다. 다음과 같이 초기화합니다:

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

3. 데이터 준비

날씨 정보를 검색하기 위해 데이터를 준비해야 합니다. 예를 들어, 다음과 같은 형식의 날씨 정보 배열을 사용할 수 있습니다:

const weatherData = [
  { city: '서울', temperature: 24, humidity: 50 },
  { city: '대전', temperature: 27, humidity: 45 },
  { city: '부산', temperature: 28, humidity: 70 },
  { city: '인천', temperature: 25, humidity: 55 },
  // ...
];

4. Fuse.js 옵션 설정

Fuse.js에서 사용할 옵션을 설정해야 합니다. 이 옵션은 검색 동작에 영향을 줍니다. 예를 들어, 다음과 같은 옵션을 설정할 수 있습니다:

const options = {
  keys: ['city'],
  threshold: 0.4,
};

keys: 검색할 대상 필드를 정의합니다. 여기에서는 ‘city’ 필드를 사용하여 검색합니다.
threshold: 검색 결과의 유사도 임계값을 설정합니다. 기본값은 0.6입니다.

5. Fuse.js 검색 기능 구현

이제 Fuse.js를 사용하여 날씨 정보를 검색하는 기능을 구현할 수 있습니다. 다음과 같은 코드를 사용하면 됩니다:

const fuse = new Fuse(weatherData, options);
const searchResults = fuse.search('서울');

console.log(searchResults);

fuse.search: 지정된 검색어에 대한 결과를 반환합니다. 이 예제에서는 ‘서울’로 검색합니다.

완성된 예제

아래는 앞서 설명한 내용을 종합한 최종 예제 코드입니다:

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

const weatherData = [
  { city: '서울', temperature: 24, humidity: 50 },
  { city: '대전', temperature: 27, humidity: 45 },
  { city: '부산', temperature: 28, humidity: 70 },
  { city: '인천', temperature: 25, humidity: 55 },
  // ...
];

const options = {
  keys: ['city'],
  threshold: 0.4,
};

const fuse = new Fuse(weatherData, options);
const searchResults = fuse.search('서울');

console.log(searchResults);

이제 Fuse.js를 사용하여 날씨 정보를 검색하는 기능을 구현할 준비가 되었습니다. Fuse.js의 다양한 옵션을 활용하여 원하는 검색 동작을 정의할 수 있으니 참고하시기 바랍니다.