3.0-알파 자동 완성 프런트 엔드

2.9에서는 몇 가지 일이 발생했습니다.

작성자 자동 완성 색인이 백엔드에 추가되었습니다.

Search에 대한 새 작성자 자동 완성 쿼리가 생성되었습니다.

Parser 서비스가 부팅되었습니다.

그래서 3.0 알파에서 처리해야 할 몇 가지 사항이 있었습니다.

Implement autocomplete in the front-end

Add tests for the new query in Search

Add autocomplete indexing in Parser

# 2와 # 3 나는 너무 당황하지 않았습니다. #3의 경우 기본적으로 복사-붙여넣기에 불과했습니다. Parser가 이전에 올바르게 작동하는 한 인덱싱을 추가하면 작동합니다. 검색 테스트의 경우, 이 시점에서 ES-mock과 나는 이미 ES 검색 쿼리를 조롱하는 측면에서 서로 매우 친숙합니다.

프런트 엔드의 경우. 나는 솔직히 그렇게 할 준비가되어 있지 않았습니다. 나는 이 과정의 2주차에 React와 프론트엔드를 포기했다고 생각했지만 백엔드를 넣었기 때문에 패키지 거래의 일부인 것 같습니다.

프런트엔드 로직

논리는 매우 간단했습니다. 검색 텍스트가 변경될 때마다(또는 몇 초마다) 검색 서비스 API에서 결과를 얻고 사용자가 선택할 수 있는 결과를 나열합니다.

나는 OSD600이 내가 알지 못했지만 useEffect와도 부딪쳤던 멋진 트릭을 기록하고 싶습니다. 다음과 같이 보입니다.

  useEffect(() => {
    // debounce so it searches every 0.5 seconds, instead of on every stroke
    const debounce = setTimeout(() => {
      (async () => {
        const prepareUrl = () => `${searchServiceUrl}/authors/autocomplete/?author=${text}`;
        // Do the request if there is something to search for
        const shouldFetch = () => text.length > 0;
        const data = await fetchResults(shouldFetch() ? prepareUrl() : null);
        if (data) {
          setOptions(data);
        }
      })();
    }, 500);

나는 주로 (func)(); 부분을 지적하고 싶습니다. 솔직히 이름이 무엇인지 전혀 모릅니다. 그러나 OSD600으로 돌아가서 useEffect에서 가져오기 기능을 호출하려고 할 때 비슷한 문제가 발생했습니다. 이런 트릭이 통한다는 사실에 정말 놀랐습니다.

내 버전의 경우 useSWR를 사용하려고 했는데 다른 모든 구성 요소가 사용하고 있었기 때문입니다. 그러나 그것은 나에게 너무 이상하게 행동했습니다. 우선, 올바른 변경에 대한 API 결과를 얻으려고 시도하지 않습니다. 예를 들어 "Ro"를 입력하면 "R"로 시작하는 결과만 찾습니다. 백스페이스를 사용하여 검색 텍스트를 삭제하면 0.5초마다가 아니라 키를 누를 때마다 가져오기가 실행되는 이상한 디바운스 문제도 있는 것 같습니다. 그래서 결국 구fetch와 useEffect로 대체 루트를 찾았다.

MUI 자동 완성 구성 요소

자동완성 인덱싱이 들어오지 않을 경우 대비책으로 생각되기 때문에 이 구성요소를 사용하기로 했습니다. 원래 아이디어는 저자의 정적 목록을 제공하고 자동완성 버전을 수행하도록 할 수 있다는 것이었습니다. 이제 언젠가 ElasticSearch가 어떤 이유로 찢어지는 경우 대비책 역할도 할 것입니다.

결론

솔직히 말해서, 나는 그것이 일반적으로 프론트 엔드인지 아니면 특히 Telescope 프론트 엔드가 내가 태클하는 것을 좋아하지 않는지 결정할 수 없습니다. 그러나 스타일 외에도 내가 끔찍하다는 것을 인정하지만 내 코드가 필요한 작업을 수행했다고 느꼈습니다. 잘못된 텍스트를 검색하지 않고 백스페이스를 포함하여 모든 키를 누를 때마다 실행되지 않도록 작동하게 한 것이 가장 자랑스럽습니다.