[TIL] 2022년 02월 09일 - 검색기능 추가, 쓰트롤링 디바운싱

이번시간에는 전반적인 Freeboard의 검색기능을 추가하는 방법과 쓰트롤링과 디바운싱에 대해 배웠다.

 

커리큘럼

• 검색을 이해하려면 다양한 DB를 알아야 한다 => Database
• 검색 결과를 페이지 네이션과 연결해야 한다 => Search / Pagenation
• 검색하기 버튼 없이 검색하는 법 => Debouncing / Trotthring 

검색에 대해서 알기위해 프론트엔드 백엔드 브라우저가 어떤 방식으로 검색을 이루는지 알아야 한다.

 

브라우저에서 프론트에드에게 search를 보내주는데, 그리고 브라우저는 백엔드에서 만든 DB에게 요청된 

검색단어를 보내주고 그 DB에서는 표형태로 되어있는 검색 내역의 표를 브라우저에게 보내준다.

 

검색 내역의 표안에는 각각의 토큰이 존재하는데 그것을 Redis라는 비관계형 데이터베이스에 저장해주는데

검색어와 검색결과를 저장해준다.

 

예를들어서 검색할 내역이 점심메뉴에 대한 검색결과일때 오늘 점심으로 검색한 결과를 미리 넣어주는 것이다.

이런애들은 disk 기반으로 검색결과는 memory 기반 데이터베이스라고 불린다.

 

두개의 차이점은 disk 기반은 하드디스크의 개념인데 껏다가 켜도 내역이 지워지지 않는다.

memory 기반은 일명의 변수라고 설명할 수 있다.

 

radius cashing 을 사용해 임시로 검색어를 짱박아두는 방식이다.

그래서 disk 까지 가면 속도가 느린데 이런 방식을 사용할 필요는 없고 

 

자주 검색하는 radius에 캐싱하고 필요할때만 꺼내주는 방식을 택하면 된다.

자주 검색어가 없을때는 elastic으로 가서 꺼내주면 된다.

import { useQuery, gql } from '@apollo/client';
import { ChangeEvent, MouseEvent, useState } from 'react';
import { IQuery, IQueryFetchBoardArgs } from '../../src/commons/types/generated/types';

먼저 검색을 구현하기 위해서는 useQuery의 있는 기능인 fetchboards로 검색된 결과를 불러와줘야한다.

 const [search, setSearch] = useState('');
    const [keyword, setKeyword] = useState('');

    const { data, refetch } = useQuery<Pick<IQuery, 'fetchBoards'>, IQueryFetchBoardArgs>(FETCH_BOARDS);

    const onChangeSearch = (event: ChangeEvent<HTMLInputElement>) => {
        setSearch(event.target.value);
    };

    const onClickSearch = () => {
        // 빨간준 뜨는 이유는 매칭이 안되서 그럼 useState에서 ''를 포함시켜 매칭
        // 검색어를 포함한 결과로 refetch 하면 된다.
        refetch({ search: search, page: 1 });
        setKeyword(search);
    };

    const onClickpage = (event: MouseEvent<HTMLSpanElement>) => {
        // 이곳에도 search
        // 처음에 제목이라고 입력하고 검색어와 키워드로 분리
        if (event.target instanceof Element) refetch({ search: keyword, page: Number(event.target.id) });
    };

const로 search를 선언해준뒤 useQuery를 사용해 fetchboards의 데이터와 refetch를 불러오고 

이제는 검색키워드를 입력시 검색결과가 나오는 onChange를 선언해준다.

검색 인풋창에 검색할 키워드를 입력후 검색 버튼을 클릭시 검색 내역이 fetch되는 것을 볼 수 있다.

하지만 지금까지는 검색이 살짝 어색한 부분이 있는데 내가 검색 버튼을 일일이 누르지 않고 

 

일정 시간이 지날때 검색결과를 나오게 할 수 없을까?

그럴 때 사용하는 것이 디바운싱 방식이다.

import _ from 'lodash';

const getDebounce = _.debounce(data => {
        // 1초가 지난후 refetch 마지막 입력이 있고 나서
        refetch({ search: data, page: 1 });
        setKeyword(data);
    }, 1000);

 

디바운싱을 적용하는 방법은 어렵지않다. const로 디바운싱을 선언후 data를 넣어주고 1초가 지난후 

refetch 되도록 refetch를넣어주면 된다.

검색어를 입력후 약 1초가 지난후에 refetch가 이뤄지는 것을 볼 수 있다.