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

01 Dec 2023

javascript

부동산 정보 검색 기능을 구현하려면 Fuse.js라는 유용한 자바스크립트 라이브러리를 사용할 수 있습니다. Fuse.js는 텍스트 검색에 특화된 라이브러리로, 사용자가 키워드를 입력하면 가장 관련성 높은 결과를 찾아주는 기능을 제공합니다.

Fuse.js 설치

먼저 Fuse.js를 설치해야 합니다. npm을 사용하는 경우 다음 명령을 실행하세요:

npm install fuse.js

또는 CDN을 사용하려면 HTML 파일의 <head> 태그 내에 다음 스크립트 태그를 추가하세요:

<script src="https://cdn.jsdelivr.net/npm/fuse.js"></script>

데이터 준비

부동산 정보를 저장하는 배열을 만들어야 합니다. 각 항목은 객체 형태로 되어야 하며 필요한 정보를 포함해야 합니다. 예를 들어, 주소, 가격, 면적 등을 포함할 수 있습니다.

const realEstateData = [
  {
    address: '서울시 강남구',
    price: 100000000,
    area: 50,
    // 추가 정보...
  },
  {
    address: '서울시 강북구',
    price: 80000000,
    area: 70,
    // 추가 정보...
  },
  // 추가 부동산 정보...
];

Fuse.js 인스턴스 생성

Fuse.js 인스턴스를 생성하여 검색 기능을 활용할 수 있습니다. 다음과 같이 생성할 수 있습니다:

const fuse = new Fuse(realEstateData, {
  keys: ['address'], // 검색할 필드
});

검색할 필드를 keys에 배열 형태로 전달합니다.

검색 수행

사용자가 키워드를 입력하면 해당 키워드와 가장 관련성 높은 결과를 찾을 수 있습니다. Fuse.js는 search() 메서드를 제공합니다. 다음은 검색 결과를 얻는 예시입니다:

const keyword = '강남구';
const results = fuse.search(keyword);

console.log(results[0].item);

results 배열에는 검색 결과가 포함되어 있으며, 가장 관련성이 높은 결과는 results[0]에 위치합니다. item 속성을 통해 해당 결과를 얻을 수 있습니다.

추가 설정 및 커스터마이징

Fuse.js는 다양한 설정과 커스터마이징 옵션을 제공합니다. 예를 들어, 검색 결과를 정렬하거나 가중치를 부여할 수 있습니다. Fuse.js 공식 문서를 참조하여 검색 기능을 더욱 향상시킬 수 있는 방법을 알아보세요.

참조

Fuse.js 공식 문서: https://fusejs.io/
npm 패키지: https://www.npmjs.com/package/fuse.js