React에서 MiniSearch 사용: 고급 검색 및 필터링이 쉬워졌습니다.

제1장
MiniSearch란 무엇이며 JavaScript 필터링을 어떻게 향상합니까?

MiniSearch는 중소 규모 데이터세트 내에서 전체 텍스트 검색을 위한 경량 JavaScript 라이브러리입니다. 데이터를 색인화하고 퍼지 일치, 접두사 검색, 관련성에 따른 순위 지정, 필드 가중치 부여와 같은 고급 검색 기능을 허용합니다.

그리고 퍼지 매칭이란 정확하게 입력되지 않은 단어나 단어의 일부를 찾는 것을 의미합니다. 예를 들어, "wolf" 대신 "wlf"를 입력하면 퍼지 검색에서는 "wolf"가 포함된 결과를 찾습니다.

그리고 접두사 검색을 통해 접두사 검색은 항목의 시작 부분에 있는 단어나 부분을 찾습니다. 따라서 "car"를 검색하는 경우 접두사 검색에서는 "cart" 또는 "carbonated"도 검색됩니다.

miniSearch가 제공하는 이러한 기능을 사용하면 원하는 내용을 완벽하게 입력하지 않아도 찾을 수 있습니다. 따라서 검색 결과가 더욱 정확하고 유용해집니다.

왜 필요한가요?

이것이 제공하는 첫 번째 이점은 고급 검색 기능입니다.
기존 필터링은 일반적으로 정확한 값이나 기본 패턴과 일치합니다. MiniSearch는 더욱 정교한 텍스트 일치 기능을 제공합니다. 이러한 고급 검색 기능은 사용자의 실수를 추측할 수 있습니다. 예를 들어 "back" 대신 "bak"를 입력하면 MiniSearch가 무슨 뜻인지 알 수 있습니다.

기존 필터링/검색에 비해 또 다른 장점은 관련성 순위입니다.
MiniSearch는 관련성을 기준으로 결과 순위를 매기므로 검색이 많은 애플리케이션의 사용자 경험이 향상됩니다. 이렇게 하면 가장 관련성이 높은 결과가 먼저 표시됩니다. 예를 들어, "JavaScript"를 검색하는 경우 시스템은 "JavaScript"를 눈에 띄게 또는 자주 언급하는 문서나 항목의 우선순위를 지정하여 전반적인 검색 경험을 향상시킵니다.

이제 기본 React.js 애플리케이션을 만들고 클라이언트측에서 MiniSearch를 어떻게 사용하는지 살펴보겠습니다.

제2장
MiniSearch로 React 앱을 설정하는 방법:

자, 프로젝트를 설정해 보겠습니다. 그리고 우리가 프로젝트를 설정하기 위해 항상 신뢰할 수 있는 vite를 사용할 것입니다. 제가 사용할 텍스트 편집기나 IDE는 악당인 Visual Studio 코드 편집기입니다.

터미널에서 이러한 프롬프트를 사용하여 Vite를 설정하겠습니다. 그리고 저는 이미 이전에 이러한 폴더를 생성했습니다:

visual_testing 폴더로 이동하려면:

PS C:\Users\vawkei\Documents> cd .\visual_testing\

building-in-public-slack 폴더로 이동하려면:

PS C:\Users\vawkei\Documents\visual_testing> cd .\building-in-public-slack\

Minisearch 폴더로 이동하려면:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack> cd .\minisearch\

프런트엔드 폴더로 이동하려면:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch> cd .\frontend\

그런 다음 프론트엔드 폴더에 Vite를 설치하겠습니다. Vite가 우리가 원하는 위치인 프론트엔드 폴더에 있기 때문입니다.

다음 코드 줄로 설치하겠습니다.

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm create vite@latest .

그런 다음 선택할 수 있는 옵션이 제공됩니다. 여기서는 Javascript와 React를 사용하겠습니다. 프레임워크로 반응하고 변형으로 Javascript로 반응합니다.

완료되었습니다. 다음과 같은 인사를 드립니다:

PS C:\Users\vawkei\Documents> cd .\visual_testing\

그 다음에는 minisearch 패키지와 React-router-dom 패키지를 설치하겠습니다. 이 튜토리얼에서는 반응 라우터 패키지가 필요하지 않지만:

PS C:\Users\vawkei\Documents\visual_testing> cd .\building-in-public-slack\

다음 코드를 실행하여 scss도 설치합니다.

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack> cd .\minisearch\

이제 여기에는 백엔드가 없습니다. 대신 데이터를 외부 어딘가에 배치하겠습니다. 이에 대해서는 나중에 자세히 설명하겠습니다.

이제 터미널에서 npm run dev를 실행하여 작은 앱을 시작하면 터미널에서 다음과 같은 응답을 받게 됩니다.

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch> cd .\frontend\

다음 링크를 따라가야 합니다(Ctrl 클릭).

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm create vite@latest .

Ctrl을 누르면 다음을 클릭할 수 있습니다.

Done. Now run:

 npm install
 npm run dev

브라우저에 다음과 같은 페이지가 표시됩니다.

제3장
App.jsx 정리":

App.jsx는 초기에 다음과 같습니다.

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm install minisearch react-router-dom

그리고 이것이 바로 위 사진에서 본 리액트 로고와 vite 로고를 담당하는 부분입니다. 그러나 우리는 App.jsx의 현재 콘텐츠로 작업하고 싶지 않으므로 이를 정리해야 합니다. 정리 후 내용은 다음과 같습니다.

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm install sass

브라우저에 빈 화면이 나타납니다.

제4장
프로젝트 준비: 모의 데이터베이스 만들기:

일반적으로 데이터베이스, 슈퍼베이스, 파이어베이스 등에서 데이터를 가져와야 합니다. 아니면 어딘가에 API가 있을 수도 있습니다. json 파일에서 데이터를 가져옵니다. 저는 그것을 db.json이라고 부르겠습니다. 파일은 애플리케이션의 루트에 있는 data라는 폴더에 있습니다. db 파일의 내용은 다음과 같습니다.

 VITE v5.4.11  ready in 332 ms

 ➜  Local:   http://localhost:5173/
 ➜  Network: use --host to expose
 ➜  press h + enter to show help

그렇습니다! 당신의 친구는 게이머입니다. 그리고 이 타이틀을 꼭 플레이해보고 싶다는 사실을 알려드리고자 합니다.
이제 파일을 빠르게 살펴보겠습니다.

파일에는 블로그 항목 배열이 포함된 JSON 개체가 포함되어 있습니다. 각 개체는 비디오 게임을 나타내며 다음 필드를 갖습니다.

제목: 비디오 게임 이름

텍스트: 게임에 대한 간략한 설명

작성자: 블로그 글을 쓴 사람

id: 각 블로그 게시물의 고유 식별자입니다. 예: "1","2","3"

제5장
JSON 서버로 모의 백엔드 설정:

데이터베이스를 실행하려면 터미널로 이동해야 합니다. 터미널에서 다른 포트를 열고 터미널에서 다음 명령을 실행할 수 있습니다.

http://localhost:5173/

우리가 받게 될 응답은 다음과 같습니다.

http://localhost:5173/

이는 모의 서버/데이터베이스가 실행 준비가 되었음을 의미합니다.

제6장
프런트엔드 구축: BlogList 구성 요소 생성:

알았어! 이제 src 폴더로 이동하여 거기에 컴포넌트 폴더를 생성하겠습니다. 구성요소 폴더 내에 다른 폴더를 만들고 이름을 블로그로 지정하겠습니다. 블로그 폴더 안에 blog-list라는 또 다른 폴더를 생성하겠습니다. 그리고 이 블로그 목록 폴더 안에 두 개의 파일을 생성하겠습니다. BlogList.jsx 및 BlogList.module.scss. 여기서는 후자에 대해서는 다루지 않겠습니다.

그런 다음 BlogList 구성 요소를 다음과 같이 설정합니다.

PS C:\Users\vawkei\Documents> cd .\visual_testing\

제7장
React의 라우팅: App.jsx에서 BlogList 렌더링:

이제 BlogList의 기본 구조를 구축했으므로 이를 App.jsx에 연결하여 화면/브라우저에서 렌더링할 수 있도록 해야 합니다. 이를 위해 App.jsx 파일을 살펴보고 다음 코드를 작성해 보겠습니다.

PS C:\Users\vawkei\Documents\visual_testing> cd .\building-in-public-slack\

레이아웃은 여기서 유용하지 않으므로 건드리지 않았습니다.

그런 다음 main.jsx에서 다음과 같이 브라우저 라우터를 설정합니다.

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack> cd .\minisearch\

이 모든 것이 준비되면 App.jsx에서 일어나는 모든 일이 이제 브라우저/화면에 표시됩니다.

제8장
BlogList.jsx로 돌아가기:
BlogList.jsx에서 블로그 및 로드 상태 설정

여기서 작업할 몇 가지 상태를 만들고 localhost:8000에서 실행되는 로컬 서버에서 블로그 데이터를 가져올 것입니다.

제가 만들 첫 번째 상태는 블로그용입니다. 앱이 렌더링될 때 빈 배열로 시작되고 나중에 모의 서버에서 블로그 데이터를 받을 때 업데이트됩니다.

그런 다음 제가 만들 두 번째 상태는 로드용입니다. 데이터가 아직 로드되고 있는지 추적합니다. false로 시작하며 데이터를 가져오는 동안 true로 설정할 수 있습니다.

쯧쯧쯧쯧:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch> cd .\frontend\

제9장
가져온 데이터 표시:
Jsx 구축:

우선 jsx 컴포넌트를 빌드해보겠습니다. 그리고 이를 위해 반품 부분에 아래와 같이 적어보겠습니다.

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm create vite@latest .

10장
가져온 데이터 표시:
이제 효과를 사용합니다:

별로 효과가 없습니다. 콘솔에서 데이터를 가져오더라도 화면에는 표시되지 않습니다. 그리고 화면에 표시되려면 반응의 악당 중 하나인 useEffect의 도움이 필요합니다.

useEffect란 무엇인가요?
NetNinja에 따르면 "이 후크는 구성 요소가 렌더링될 때마다 함수를 실행합니다. 구성 요소는 처음 로드될 때 처음에 렌더링되고 상태가 변경될 때도 발생한다는 점을 기억하세요. DOM을 다시 렌더링하므로 업데이트할 수 있습니다. 해당 상태(변경된 상태)를 브라우저에 표시합니다.

쯧쯧쯧쯧
이전에 fetchBlogs를 위해 작성한 함수를 useEffect:
에 넣습니다.

PS C:\Users\vawkei\Documents> cd .\visual_testing\

영화 인셉션 같나요? 진정하세요. 잠시 설명하겠습니다. 영화 오멘은 아니지만, 오! 남자들! 여기가 바로 Mern의 크리스토퍼 놀란 {M.E.R.N}이군요???

그런 다음 Jsx에서는 다음과 같이 코딩합니다.

PS C:\Users\vawkei\Documents\visual_testing> cd .\building-in-public-slack\

12장
MiniSearch의 모든 모습:

자, 이제 화면에 블로그를 렌더링할 수 있습니다. 이제 MiniSearch를 활용해 보겠습니다. 전체 코드는 다음과 같습니다.

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack> cd .\minisearch\

이 코드는 전체 텍스트 검색을 활성화하기 위해 MiniSearch의 새 인스턴스를 생성합니다. 기능은 다음과 같습니다.

필드: 데이터에서 검색을 위해 색인화할 필드(제목, 작성자, 텍스트)를 지정합니다.

storeFields: 검색 결과에 포함될 필드를 정의합니다. 이러한 필드는 쉽게 검색할 수 있도록 색인화된 데이터와 함께 저장됩니다.

그럼 다음은:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch> cd .\frontend\

이 코드는 페이지 렌더링 후 miniSearch에 의해 색인된 총 문서 수를 제공합니다.

이제 더 나아가 보겠습니다. 페이지가 렌더링되고, 렌더링될 때 블로그 상태는 처음에는 비어 있습니다. 우리 코드에서 이를 확인할 수 있습니다.

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm create vite@latest .

 

그런 다음 fetchBlogs 함수를 사용하여 데이터를 가져옵니다. 실제로 데이터가 있으며 다음 코드를 검색하여 데이터가 있음을 알 수 있습니다.

Done. Now run:

 npm install
 npm run dev

이제 코드는 다음과 같습니다.

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm install minisearch react-router-dom

이는 이전에 색인화된 모든 항목을 제거하는 데 사용됩니다. 이는 새 데이터를 다시 색인화해야 하거나 현재 검색 색인을 지워야 하는 경우에 유용합니다. 우리는 깨끗한 상태를 갖고 싶어서 사용합니다.

그럼 다음은:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm install sass

miniSearch.addAll(data) 메소드는 데이터 배열의 모든 항목을 MiniSearch 인덱스에 추가합니다.

따라서 데이터를 얻은 후 다음 코드를 실행하여 블로그를 업데이트합니다.

 VITE v5.4.11  ready in 332 ms

 ➜  Local:   http://localhost:5173/
 ➜  Network: use --host to expose
 ➜  press h + enter to show help

블로그 상태를 업데이트하면 빈 블로그 배열이 데이터로 채워집니다.

이 과정에서 miniSearch 인스턴스를 정리하여 다음 코드로 새로운 데이터를 인덱싱할 수 있는 공간을 제공합니다.

http://localhost:5173/

다음 코드를 실행하여 수신된 데이터를 여기에 추가합니다.

http://localhost:5173/

이 모든 일이 발생하면 miniSearch 인스턴스에 데이터가 로드되어야 합니다. 그렇습니다. 다음 코드 줄을 확인해보세요:

import { useState } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
           {" "}
      <div>
               {" "}
        <a href="https://vite.dev" target="_blank">
                    <img src={viteLogo} className="logo" alt="Vite logo" />     
           {" "}
        </a>
                <a href="https://react.dev" target="_blank">
                   {" "}
          <img src={reactLogo} className="logo react" alt="React logo" />     
           {" "}
        </a>     {" "}
      </div>
            <h1>Vite + React</h1>      <div className="card">
               {" "}
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}       {" "}
        </button>
                <p>
          Edit <code>src/App.jsx</code> and save to test HMR        {" "}
        </p>     {" "}
      </div>      <p className="read-the-docs">Click on the Vite and React logos to learn more       </p>
    </>
  );
}
export default App;

거기에 인덱싱된 데이터가 있는 것으로 나타납니다. 그러나 페이지를 다시 렌더링하면 miniSearch가 재설정되므로 데이터가 손실됩니다. 우리는 다음 코드 때문에 이를 알고 있습니다.

function App() {
  return <>     </>;
}

export default App;

그리고 아래는 렌더링 시 코드를 실행할 때 나타나는 console.log의 실제 콘텐츠입니다.

{
 "blogs": [
 {
 "title": "Wolfenstein",
 "text": "Wolfenstein is a groundbreaking video game series that pioneered the first-person shooter genre. Debuting in 1981, it gained fame with Wolfenstein 3D (1992), placing players in World War II as an Allied spy battling Nazis. Known for its intense gameplay, alternate history, and stealth-action elements, the series continues to evolve with modern reboots and thrilling narratives.",
 "author": "voke",
 "id": "1"
 },
 {
 "title": "Bioshock",
 "text": "BioShock is a critically acclaimed video game series blending first-person shooting with deep storytelling. Set in dystopian worlds like the underwater city of Rapture and floating Columbia, it explores themes of power, morality, and free will. Known for its immersive environments, philosophical depth, and plasmid abilities, BioShock redefined narrative-driven gaming since its debut in 2007.",
 "author": "ese",
 "id": "2"
 },
 {
 "id": "3550",
 "author": "jite",
 "title": "Doom",
 "text": "Doom is a legendary first-person shooter series that revolutionized gaming with its 1993 debut. Players battle demons from Hell across Mars and Earth, armed with iconic weapons like the shotgun and BFG. Known for its fast-paced action, heavy metal soundtrack, and gory visuals, Doom remains a cornerstone of the FPS genre and a cultural phenomenon."
 }
 ]
}

제14장
해결책: useRef:

를 사용하여 MiniSearch 유지

miniSearch가 렌더링할 때마다 재설정되는 것을 방지하기 위해 동일한 인스턴스가 렌더링 전반에 걸쳐 유지되도록 이를 useRef로 이동합니다. 방법은 다음과 같습니다.

PS C:\Users\vawkei\Documents> cd .\visual_testing\

이 코드 블록은 useRef를 사용하여 렌더링 전반에 걸쳐 MiniSearch의 단일 인스턴스가 지속되도록 보장합니다. miniSearchRef는 MiniSearch 인스턴스를 생성하고 저장합니다.

이 useRef 코드를 사용하면 집에 있으면서도 말려야 합니다.

handleSearch 기능 설명:

PS C:\Users\vawkei\Documents\visual_testing> cd .\building-in-public-slack\

handleSearch 함수는 사용자가 입력하는 모든 것을 받아 사용자의 입력으로 상태 쿼리를 업데이트합니다. (이벤트.대상.값). 입력이 비어 있으면 결과 상태가 지워지고 추가 처리가 중지됩니다. 그런 다음 miniSearch를 사용하여 퍼지 일치(약간의 불일치 허용)로 색인된 데이터를 검색합니다. 그런 다음 결과 상태를 업데이트합니다.

제15장
최종 코드:
따라서 BlogList의 최종 코드는 다음과 같습니다.

"반응"에서 { useEffect, useRef, useState }를 가져옵니다.
"./BlogList.module.scss"에서 클래스를 가져옵니다.
"minisearch"에서 MiniSearch를 가져옵니다.

const BlogList = () => {
  //블로그와 isLoading 상태를 생성합니다.
  const [블로그, setBlogs] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  //쿼리 및 결과 상태를 생성합니다.
  const [query, setQuery] = useState("");
  const [results, setResults] = useState([]);

  // 블로그 상태가 채워졌는지 확인
  console.log(블로그);

  const miniSearchRef = useRef(
    새로운 미니서치({
      fields: ["title", "author", "text"], // 검색할 필드
      storeFields: ["title", "author", "text"], // 반환할 필드
    })
  );
  const miniSearch = miniSearchRef.current;
  console.log("렌더링 후 색인된 블로그:", miniSearch.documentCount);

  //모의 데이터베이스에서 블로그를 가져오는 중:
  const fetchBlogs = async () => {
    setIsLoading(true);

    노력하다 {
      const 응답 = fetch("http://localhost:8000/blogs")를 기다립니다.

      if (!response.ok) {
        새로운 오류()를 던져라;
      }

      const 데이터 = 응답을 기다립니다.json();
      console.log(데이터);

      miniSearch.removeAll();

      miniSearch.addAll(data);
      console.log("색인된 블로그:", miniSearch.documentCount);

      setBlogs(데이터);
    } 잡기(오류) {
      const 메시지 =
        오류 인스턴스오류? error.message: "뭔가 잘못되었습니다.";
      console.log(메시지);
    } 마지막으로 {
      setIsLoading(false);
    }
  };

  // 검색 기능:
  const handlerSearch = (이벤트) => {
    setQuery(event.target.value);

    if (event.target.value.trim() === "") {
      setResults([])를 반환합니다.
    }

    console.log(event.target.value);

    const searchResults = miniSearch.search(event.target.value, { 퍼지: 0.5 });
    console.log("searchResults:", searchResults);
    setResults(searchResults);
  };

  // 검색결과나 블로그를 조건부로 표시하거나 표시함
  const displayPosts = 결과.길이 > 0? 결과: 블로그;

  useEffect(() => {
    fetchBlogs();
  }, []);

  반품 (
    <div>
            <h2>블로그목록</h2>
      {isLoading && <p>Loading...</p>}     {" "}
      <div className={classes.search}>
               {" "}
        <input placeholder="search" value={query} onChange={handleSearch} />     {" "}
      </div>
            <div className={classes.blogs}>
        {displayPosts.map((블로그) => {
          // {blogs.map((블로그) => {
          반품 (
            <div
              키={blog.id}
              className={classes.blog}
             >



<p><strong>제16장</strong><br>
<strong>테스트해 보기:</strong><br>
이제 Wolfenst를 입력하면 다음과 같이 표시됩니다.</p>

<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173282557470183.jpg" class="lazy" alt="Using MiniSearch in React: Advanced Search and Filtering Made Easy"></p>

<p>필터링하기 전에 제가 철자를 완전히 입력할 때까지 기다리지도 않았음을 알 수 있습니다.</p>

<p><em>비판적으로 입력해 보겠습니다.</em></p>

<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173282557528617.jpg" class="lazy" alt="Using MiniSearch in React: Advanced Search and Filtering Made Easy"><br>
비판적으로는 제목의 이름이 아니지만 텍스트를 검색하여 비판적이라는 단어가 포함된 모든 콘텐츠를 표시합니다. 그리고 바이오쇼크는 비판적인 내용을 담고 있는 유일한 콘텐츠라고 해도 과언이 아닙니다.</p>

<p><strong>마지막 생각</strong><br>
이번 MiniSearch 여정을 함께해주셔서 감사합니다! 귀하의 시간과 인내심에 진심으로 감사드리며, 이 가이드가 Reactjs 프로젝트에 MiniSearch를 효과적으로 통합하는 방법을 탐색하고 이해하는 데 도움이 되기를 바랍니다.</p>

<p><strong>작가소개</strong><br>
Voke Bernard는 역동적인 React.js 및 Express.js 애플리케이션 구축을 전문으로 하는 열정적이고 주도적인 M.E.R.N 개발자입니다. 그는 항상 새로운 프로젝트에 협력하기를 원합니다. 그와 함께 일하고 싶다면 언제든지 연락주세요.</p>


          

            
        

위 내용은 React에서 MiniSearch 사용: 고급 검색 및 필터링이 쉬워졌습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!