PDF 파일 검색 - React에서 Google 사용자 지정 검색 엔진(gcse) 구성 요소 코딩

최종 검토일: 2022년 9월

소개

대부분의 대규모 조직은 PDF 문서의 방대한 아카이브를 보유합니다. 여기에서 정보를 검색하는 것은 큰 도전입니다.

사실, 나는 당신이 당신 자신의 힘으로 이것에 대해 어떻게 설정할 수 있는지 전혀 모릅니다. 다행스럽게도 Google의 사용자 지정 검색 엔진(gcse) 기능 덕분에 이 작업을 5분 만에 처리할 수 있습니다.

gcse는 잘 알려지지 않았지만 매우 놀랍도록 유용한 Google 마법의 일부입니다. 문서 아카이브 관리를 담당하는 사람이라면 누구나 도구 상자의 맨 위에 있어야 합니다. 기본적으로 URL의 지정된 폴더 요소에서 Google 검색 엔진의 전체 기능을 타겟팅할 수 있습니다. 그리고 Google 검색에서 PDF 파일을 렌더링된 웹사이트만큼 쉽게 처리한다는 사실을 알고 계셨습니까?

절차 설정의 첫 번째 단계는 프로그램 검색 엔진 홈페이지를 사용하여 검색 대상을 지정하는 것입니다. 참조Getting started with Programmable Search Engine

이를 위해 Google 계정만 있으면 됩니다. 위에 언급된 지침에 따라 검색 엔진을 등록할 수 있으며, 자신이 선택한 태그로 이름을 지정하고 Google에서 제공한 고유한 검색 엔진 ID를 입력할 수 있습니다.

웹앱에서 GCSE 참조 코딩

기존 자바스크립트 웹앱에서 gcse를 사용하려면 다음과 같은 작은 자바스크립트 패킷만 있으면 됩니다.

<script src="https://cse.google.com/cse.js?cx=" + mySearchengineId></script>
<div class="gcse-search"></div>

이것의 효과는 텍스트 검색 입력 필드와 검색 아이콘 버튼을 표시하는 것입니다.

검색 사양을 제출하면 일반적으로 선택한 gcse 레이아웃에 따라 팝업 창에 결과가 표시됩니다.

이 배열은 과거에 완벽하게 작동했습니다. 문제가 발생한 유일한 경우는 내 webapp의 스타일시트에 있는 <td> 및 <th> 스타일이 스크립트에서 Google의 이러한 요소 사용과 충돌했을 때였습니다. 이것은 클래스 이름으로 내 스타일을 한정함으로써 쉽게 해결되었습니다.

그러나 React 웹앱에서 cse를 사용하고 싶었을 때 처음에는 당황했습니다. Google 스크립트는 복잡한 html 더미일 뿐이지만 구성 요소의 "return"문의 내용에 삽입해야 합니다. 나는 스크립트 자체를 직접 참조할 수 없으며 내가 이해할 수 없는 이유 때문에 그 내용과 그들이 통신하는 데 사용하는 메커니즘<div class="gcse-search"></div>을 모방하려는 시도는 실패한 것으로 판명되었습니다.

이것에 대한 웹상의 정보는 고르지 않지만 결국 나는 React cascading select에서 khrismuc에 의해 등록된 샌드박스에 도달했습니다.

이는 React useEffect 후크를 사용하여 DOM에 도달하고 Google의 cse 스크립트를 호출합니다. 특별한 경우(응용 프로그램에 대한 뉴스레터 PDF 폴더를 검색하는 경우)에서 내가 해야 할 일은 다음과 같이 구성 요소를 직접 만드는 것이었습니다.

import React, { useEffect } from "react";

function NewsletterGcseSearch() {
    useEffect(() => {
        const script = document.createElement("script");
        document.head.append(script);
        script.src = "https://cse.google.com/cse.js?cx=00111 .... 6146:di0ylihvlxu";
    }, []);

    return (
            <div className="gcse-search"></div>
    );
}

export { NewsletterGcseSearch };

여기에서 분명히 내 검색 엔진 ID를 가렸지만 당신이 아이디어를 얻을 것이라고 확신합니다. 그런 다음 내가 해야 할 일은 구성 요소를 내 웹 앱으로 가져와 <NewsletterGcseSearch/>로 렌더링하는 것뿐이었습니다.

Google(및 khrismuc)에게 감사합니다. 감사합니다.