[javascript] Fuse.js를 이용한 사진 검색 기능 구현 방법
이번 포스트에서는 Fuse.js라는 JavaScript 라이브러리를 사용하여 사진 검색 기능을 구현하는 방법에 대해 알아보겠습니다. Fuse.js는 이전 포스트에서 언급한 텍스트 검색용 라이브러리로, 특정 키워드를 포함하는 사진을 빠르게 검색할 수 있도록 도와줍니다.
Fuse.js 설치
Fuse.js를 사용하기 위해서는 먼저 해당 라이브러리를 설치해야 합니다. 프로젝트 폴더에서 터미널을 열고 다음 명령어를 실행하여 Fuse.js를 설치합니다.
npm install fuse.js
Fuse.js를 사용하여 사진 검색 기능 구현하기
- HTML 마크업
사진 검색 기능을 구현하기 위해 먼저 HTML 마크업을 작성합니다. 검색어를 입력 받을 input 요소와 검색 결과를 표시할 div 요소를 포함하도록 합니다.
<input type="text" id="searchInput" placeholder="검색어를 입력하세요" />
<div id="searchResults"></div>
- JavaScript 코드
다음으로 JavaScript 코드를 작성해봅시다.
// 사진 데이터
const photos = [
{ id: 1, title: "자연 풍경", tags: "자연, 풍경, 도시" },
{ id: 2, title: "도시 건물", tags: "도시, 건물, 빌딩" },
{ id: 3, title: "바다 풍경", tags: "바다, 해변, 풍경" },
// 추가적인 사진 데이터
];
// Fuse.js 옵션 설정
const options = {
keys: ["title", "tags"],
};
// Fuse.js 검색 객체 생성
const fuse = new Fuse(photos, options);
// 검색어 입력 이벤트 리스너 추가
const searchInput = document.getElementById("searchInput");
const searchResults = document.getElementById("searchResults");
searchInput.addEventListener("input", (e) => {
const searchValue = e.target.value;
const searchResults = fuse.search(searchValue);
// 검색 결과 표시
displayResults(searchResults);
});
// 검색 결과 표시 함수
function displayResults(results) {
searchResults.innerHTML = "";
if (results.length === 0) {
searchResults.innerHTML = "검색 결과가 없습니다";
} else {
results.forEach((result) => {
const photoElement = document.createElement("div");
photoElement.innerHTML = result.title;
searchResults.appendChild(photoElement);
});
}
}
위 코드에서는 Fuse.js를 사용하여 사진 데이터를 검색하기 위한 Fuse 객체를 생성하고, 입력된 검색어에 대해 검색 결과를 표시하기 위한 displayResults 함수가 작성되어 있습니다.
- CSS 스타일링
마지막으로 CSS를 사용하여 검색결과를 예쁘게 스타일링합니다.
#searchResults {
margin-top: 10px;
border: 1px solid #ccc;
padding: 10px;
}
#searchResults > div {
margin-bottom: 5px;
cursor: pointer;
}
#searchResults > div:hover {
background-color: #f9f9f9;
}
결론
이제 Fuse.js를 사용하여 사진 검색 기능을 구현하는 방법에 대해 알아보았습니다. Fuse.js는 간단하게 연동할 수 있으며, 빠른 검색 속도와 유연한 옵션 설정을 제공합니다. 사진이 아닌 다른 데이터에도 적용할 수 있으니, 다양한 프로젝트에 활용해 보는 것을 권장합니다.