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

01 Dec 2023

traffic

이번 포스트에서는 Fuse.js를 이용하여 실시간 교통 정보를 검색하는 기능을 구현하는 방법을 알아보겠습니다.

Fuse.js란?

Fuse.js는 JavaScript에서 사용할 수 있는 강력한 텍스트 검색 라이브러리입니다. 이 라이브러리를 사용하면 텍스트 데이터에서 가장 가까운 매치를 찾을 수 있습니다. Fuse.js는 유사한 단어, 오타 등을 자동으로 처리하여 정확한 결과를 제공합니다.

먼저 Fuse.js 라이브러리를 설치해야 합니다. npm을 통해 설치할 수 있습니다.

npm install fuse.js

Fuse.js를 사용하기 위해 먼저 라이브러리를 초기화해야 합니다. 검색을 수행할 데이터와 검색 옵션을 설정해야 합니다. 예를 들어, 다음과 같이 초기화할 수 있습니다.

const fuseOptions = {
  keys: ['location', 'status'],
  threshold: 0.3,
};

const fuse = new Fuse(data, fuseOptions);

위 코드에서 data는 검색할 데이터 배열입니다. keys는 검색할 필드들을 지정하는 배열입니다. threshold는 검색 결과의 유사도 임계치를 설정하는 값입니다.

이제 Fuse.js를 이용하여 실시간 교통 정보를 검색할 수 있습니다. 다음은 검색 예제입니다.

const searchQuery = '서울';

const searchResults = fuse.search(searchQuery);

console.log(searchResults);

위 코드에서 searchQuery 변수에 검색할 키워드를 지정합니다. fuse.search() 함수를 호출하여 검색을 수행한 뒤, 검색 결과를 searchResults 변수에 저장합니다. searchResults에는 검색 결과의 배열이 반환됩니다.

검색 결과를 화면에 표시하거나 다른 곳에서 사용하려면 검색 결과를 적절하게 활용해야 합니다. 예를 들어, 다음과 같이 검색 결과를 화면에 출력할 수 있습니다.

searchResults.forEach((result) => {
  const { location, status } = result.item;

  console.log(`${location}: ${status}`);
});

위 코드는 검색 결과 배열을 순회하면서 각 아이템의 location과 status를 출력하는 예제입니다.

Fuse.js를 이용하여 실시간 교통 정보 검색 기능을 구현하는 방법을 알아보았습니다. Fuse.js는 다양한 검색 기능을 제공하므로 복잡한 검색 요구사항을 간편하게 처리할 수 있습니다. Fuse.js를 사용하여 다양한 프로젝트에서 효과적인 검색 기능을 구현해보세요.

참고: