20) 월요일

이희주·2022년 6월 6일

Database Debouncing & Throttling React Search Process

React

이번주 커리큘럼

오늘 수업내용

검색 프로세스의 이해

browser에서 검색을 요청하면 bakcend에서 DB 내부의 수많은 데이터들 속에서 요청받은 키워드 를 가지고 full-scan을 하게되는데,

데이터가 많으면 많을수록 속도가 느리기 때문에 단어(token)를 tokenizing해서 역인덱스(inverted index)방식으로 저장해서 특정 키워드에 대한 검색이 빨리 되도록 했다

=> 이런 방식을 쉽게 만들어주는 도구(DB)

Elastic Serach
disk에 저장되는 방식으로 컴퓨터가 꺼져도 저장이 유지되고 안전하지만, 속도는 조금 느리다

Redis
Memory에 저장되는 임시저장방식으로, Disk저장보다는 안정성이 떨어지지만 속도가 빠르다

사람들이 자주 검색하는 것들은 검색할 때
매번 Disk에 가서 꺼내오는 것 보다 Memory 기반의 DB에 넣어두고 그때마다 꺼내서 제공하면 빨리 빨리 제공을 할 수 있는데, 이런 방식을 검색로그 캐싱 이라고 하고

캐싱이 되어 있다면? Redis, 캐싱되어있지 않다면 Elastic Search 방식을 사용한다!

검색기능 구현

export default function MapBoardPage() {
  const [search, setSearch] = useState("");

  const { data, refetch } = useQuery(FETCH_BOARDS);
  //리패치 함수 가져오기 (버튼을 클릭할 때 마다 패치보드가 다시 실행됨)

  const onClickPage = (event: any) => {
    refetch({ page: Number(event.target.id) });
    //페이지를 클릭할때마다 리패치 되도록 하기
    //event.target.id 는 => span태그 속의 '1'을 가지고 오는데, 얘는 string 이기 때문에 Number태그로 감싸서 number 타입으로 바꿔준다
  };

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

  const onClickSearch = () => {
    refetch({ search, page: 1 });
    // playground에 fetchBoards에서 search 라고 써있어서,, search: 어쩌구  이렇게 씀

    // 검색은,, 리패치다 !
  };

  return (
    <div>
      <MyDiv>
        검색어 입력: <input type="text" onChange={onChangeSearch} />
        <button onClick={onClickSearch}>검색하기</button>
        {/* 검색하기 클릭하면 search 로 리패치 되도록 하기 */}
      </MyDiv>

검색버튼 없이 검색할 때 발생하는 문제

page를 변경하며 refetch 될 때, 검색버튼을 누르지 않아도 state로 관리하는 검색 input 키워드 값이 검색되는 문제가 발생

=> 검색을 눌렀을 때 들어가있는 키워드 값을 따로 저장시켜주는 state를 분리시켜주면 된다
refetch 될 때 mySearch 로 검색된느 부분을 myKeyword로 바꿔서 해결해주기

디바운싱

연이어 발생한 이벤트를 하나의 그룹으로 묶어 처리하는 방식
그룹에서 마지막, 혹은 처음에 처리된 함수를 처리하는 방식으로 사용된다.
마지막 호출이 발생한 후 일정 시간이 지날때까지 추가적 입력이 없을 때 실행됨
(특정 시간을 기준으로 해당 시간 내에 요청된 내용들은 무시)

=> 대표적 예제로는 검색기능이 있다

Lodash 디바운싱 구현

Debounce 는 반복적인 동작을 강제적으로 대기하는 것을 말한다

=> 원하는 기능을 debounce 로 감싸주기

import { debounce } from 'lodash';
  
	const getDebounce = _.debounce((data) => {
    refetch({ search: data.target.value, page: 1 });
  }, 1000);
  // 입력 한 번 마다 1초씩 시간이 주어지고, 다 입력하고 1초가 지나면 함수 내부 내용이 실행됨 !
  // 이 때 실행되어야 할 게 리패치!

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

	return (
		<>
			검색어 입력: <input type="text" onChange={onChangeSearch} />
		</>
	);
}