2023. 4. 10

Junghan Lee·2023년 4월 10일

TIL lodash 검색 디바운싱 쓰로틀링

TIL Diary

목록 보기

33/52

Index

검색 프로세스 이해(ES, Redis 등)
검색버튼 없이 검색 시 발생하는 문제
디바운싱&쓰로틀링
Lodash 디바운싱 구현

Intro

검색? 검색 버튼이 없이 검색할 수 있다? 검색 : 데이터베이스 검색

검색 프로세스 이해(ES, Redis 등)

평소에 사용하는 웹 서비스의 검색은 어떻게 이루어질까?
Browser에서 검색을 요청하면 백엔드에서 DB내부의 수많은 데이터 속에서 요청받은 키워드를 가지고 full-scan하게 된다. 따라서 데이터가 많을수록 속도가 느린데 이런 방식은 변경할 수 있다.

Data를 특정 키워드로 구분지어 해당하는 글을 모아 Inverted Index(역인덱스) 방식으로 저장하게 되면 특정 키워드에 대한 검색이 빨라진다.
이를 쉽게 만들어 주는 도구(DB)가 Elastic Search이다. 이 방식은 Disk에 저장되는 방식으로 컴퓨터가 꺼져도 저장이 유지되고 안전하지만 비교적 속도는 떨어진다.

반면, Memory에 저장되는 방식도 있는데 이는 임시 저장 방식으로 Disk저장보다 안정성은 떨어지나 속도가 빠르며 이런 메모리 저장 기반 방식으로는 Redis가 있다.

서비스를 제공하고 시간이 흐르면 사람들의 검색에 일정 패턴이 생기는데 그러면 사람들이 자주 검색하는 것들은 검색마다 Disk에 가서 꺼내오는 것보다 Memory 기반 DB에 넣어두면 그때 그때 더 빠르게 제공할 수 있고 이를 "검색 로그 캐싱" 이라 한다.

즉, 검색이 진행될 때 캐싱이 되어 있다면 "Redis", 캐싱되어 있지 않은 기록은 "Elastic Search" 방식이 사용된다.

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

검색 버튼을 누르지 않고 검색 기능이 활성화되면 생기는 문제는 뭘까? 바로 page를 변경하며 refetch될 때, state로 관리하는 검색 input 키워드값이 검색을 누르지 않아도 검색되는 것이다.
이런 문제는 검색을 눌렀을 때 들어가 있는 키워드 값을 따로 저장해주는 state를 분리해주어야 한다.

refetch될 때 mySearch로 검색되는 부분을 myKeyword로 바꾸어 해결한다.

const getDebounce = _.debounce((data) => {
    refetch({ search: data, page: 1 });
    setMyKeyword(data);
  }, 200);

디바운싱 & 쓰로틀링

"디바운싱"이란 연이어 발생한 이벤트를 하나의 그룹으로 묶어 처리하는 방식으로 주로 그룹에서 마지막, 혹은 처음에 처리된 함수를 처리하는 방식으로 사용된다.
마지막 호출이 발생한 후 일정 시간이 지날때까지 추가적 입력이 없을 때 실행된다.(특정 시간 이내, 추가 입력 없을 시, 마지막 1회만 실행한다는 로직)

디바운싱이 사용되는 대표적 예제로는 검색 기능이 있다.

반면 "쓰로틀링"이란, 연이어 발생한 이벤트에 대해 일정한 delay를 포함시켜 연속적으로 발생하는 이벤트는 무시하는 방식으로 사용된다. 즉, 지정한 delay동안 호출된 함수는 무시한다.(특정 시간 이내, 추가 입력이 있어도 처음 1번만 실행한다)

쓰로틀링이 사용되는 대표적 예제로 스크롤 기능이 있다.

Lodash 디바운싱 구현

lodash 는 자바스크립트의 유틸리티 라이브러리로, 내장되어 있는 유용한 함수가 많아서 자주 사용된다. Lodash의 많은 기능 중 디바운싱 내용이 있는데 먼저 이를 사용하기 위해선 설치를 해야 한다.
설치는
1) yarn add lodash
2) yarn add -D @types/lodash(타입스크립트)
를 통해 할 수 있다.

Debounce
디바운스는 반복적인 동작을 강제적으로 대기하는 것을 말한다. 예를 들어, input에 onChange를 이용해 console.log()를 찍어 보면 하나 하나 입력할 때마다 onChange가 실행됨을 알 수 있다.

export default function Test2() {

	const handleOnChange = debounce((e) => {
		console.log(e.target.value);
  });
  
	return (
		<>
			<input onChange={handleOnChange}></input>
		</>
	);
}

그럴 경우 중간 과정을 없애고 결과만 한번에 실행해주는 것이 디바운스다.

먼저 사용하고 싶은 컴포넌트 상단에
import{ debounce } from 'lodash' 를 통해 불러온 후
원하는 기능을 디바운스로 감싸주면 된다.

import { debounce } from 'lodash';
export default function Test2() {
  
	const handleOnChange = debounce((e) => {
		console.log(e.target.value);
	}, 500);

	return (
		<>
			<input onChange={handleOnChange}></input>
		</>
	);
}

위에서 굵게 표시된 부분이 디바운스다. 디바운스는 setTimeout과 사용방법이 같다. debounce(콜백 함수, 시간) 첫 번째 인자로는 실행하고 싶은 함수가 들어가고, 다음 인자로 시간이 들어간다.

디바운스는 두 번째 인자로 넣어준 시간 동안 아무 일도 하지 않았을 때 콜백 함수를 실행한다. 즉, 무언가 계속 입력하고 있으면 함수가 실행되지 않고, 입력을 끝내고 가만히 있으면 그 때 함수 결과를 보여 준다.

디바운스의 결과는 ...

위와 다르게 console.log()에 한 번만 찍혔다.