React 앱에서 MiniSearch를 활용한 고급 검색 및 필터링 구현 방법
2024-11-22 18:17:03MiniSearch란 무엇인가?
MiniSearch는 자바스크립트로 구현된 경량 라이브러리로, 소규모에서 중규모 데이터셋에 대한 전방 검색(full-text search)을 지원합니다. 이 라이브러리의 주요 특징으로는 퍼지 매칭, 접두사 검색, 관련성에 따른 랭킹, 필드에 가중치를 두는 기능 등이 있습니다. 이러한 기능을 통해 사용자는 오타가 있더라도 적합한 검색 결과를 얻을 수 있습니다.
퍼지 매칭
퍼지 매칭은 입력된 단어가 정확하지 않더라도 유사한 단어를 찾을 수 있도록 돕습니다. 예를 들어, "wlf"라 입력했을 때 "wolf"를 찾을 수 있는 것입니다.
접두사 검색
접두사 검색은 말 그대로 단어의 시작 부분만 입력해도 해당 단어와 관련된 결과를 찾을 수 있게 해줍니다. "car"라 입력하면 "cart", "carbonated" 등의 결과를 얻을 수 있습니다.
관련성 랭킹
MiniSearch는 검색 결과를 관련성에 따라 랭크를 매겨 사용자 경험을 향상시킵니다. 이를 통해 사용자는 검색어와 가장 관련성이 높은 결과를 우선적으로 볼 수 있습니다.
React 앱에 MiniSearch 설정하기
1. 프로젝트 설정
React 애플리케이션에서 MiniSearch를 설정하기 위해 Vite를 사용하여 프로젝트를 생성합니다. 터미널을 통해 아래 명령어로 프로젝트를 시작할 수 있습니다:
npm create vite@latest .
React와 JavaScript를 선택하여 초기 설정을 완료한 이후, 다음 명령어로 프로젝트를 실행합니다:
npm install
npm run dev
2. 패키지 설치
다음으로 MiniSearch 패키지를 설치합니다:
npm install minisearch
3. 데이터 준비하기
백엔드 없이 외부 데이터 파일을 불러와 사용할 것입니다. data 폴더를 생성하고 db.json 파일을 준비합니다. 예시 데이터는 다음과 같습니다:
{
"blogs": [
{
"title": "Wolfenstein",
"text": "Wolfenstein is a groundbreaking video game...",
"author": "voke",
"id": "1"
}
]
}
MiniSearch 적용하기
React 컴포넌트에서 MiniSearch를 사용하여 검색 기능을 적용할 수 있습니다. 예를 들어, App.jsx에서 데이터 파일을 읽어 MiniSearch를 사용하도록 설정합니다.
React 컴포넌트 코드
import MiniSearch from 'minisearch'
const App = () => {
const data = // JSON 데이터 로드 로직
const miniSearch = new MiniSearch({
fields: ['title', 'text', 'author'], // 검색할 필드
storeFields: ['title', 'text', 'author']
})
miniSearch.addAll(data.blogs)
const handleSearch = (query) => {
const results = miniSearch.search(query)
console.log(results)
}
return (
<div>
<input type="text" onChange={(e) => handleSearch(e.target.value)} />
</div>
)
}
export default App
결론
MiniSearch는 React 애플리케이션에 빠르고 강력한 검색 기능을 추가할 수 있는 훌륭한 도구입니다. 위에서 설명한 방법을 통해 사용자는 정확하고 효율적인 검색을 경험할 수 있으며, 데이터가 외부에 존재하더라도 문제없이 검색할 수 있습니다. MiniSearch와 함께 웹 애플리케이션의 검색 경험을 한층 향상시켜 보세요.