Throttling & Debouncing at Search

보통 쓰로틀링(Throttling)과 디바운싱(Debouncing)은 다른 개념이라 동시에 비교할 일이 없다. 그러나, 검색할 때는 흔히 비교되는 친구다. 단어 그대로 번역하면 쓰로틀링은 목을 조른다는 뜻이고, 디바운싱은 떨리지 않게한다는 의미다. 전혀 다른 의미 2개가 검색에선 비교대상인지 참 궁금해졌다.

 

검색은 보통 onChange를 통해 검색을 구현한다. onChange할 때마다 서버 데이터를 요청한다면 꽤 많은 트래픽이 발생한다. 회사 입장에선 모두 비용이다. 쓰로틀링과 디바운싱을 사용하면 이런 비용을 줄일 수 있다. 

 

Throttling

쓰로틀링은 그 뜻에서 착한해 무언가를 억제한다는 표현으로 된다. 검색 시 억제할 것은 역시 데이터 전송이다. 쓰로틀링은 onChange될 때마다 서버 요청하지 않고, 글자가 입력되더라도 개발자가 지정한 시간만큼 잠시 참았다가 일정 시간 이후 서버에 요청 보낸다. 이럴 경우 서버 부하(트래픽 등)를 줄일 수 있어 경제적이다.

첫 입력한 키보드로부터 2초 후 검색한다고 해보자, 그럼 그 사이 사용자는 몇글자를 치든 간에 2초 뒤 자동 검색된다. 그리고 2초 뒤 다시 무언가 키보드 입력이 있을 경우 다시 2초 뒤 또 실행된다. '안녕하세요'가 검색어라면 onChange 시 ㅇ,ㅏ,ㄴ,ㅕ,ㅇ,ㅎ,ㅏ,ㅅ,ㅔ,ㅇ,ㅛ. 11번  통신 했을 것을, 2초 안에 '안녕하세요'를 다 입력했다면 한 번만 서버와 통신 한다.

이미지 출처 : https://guiyomi.tistory.com/122

// 코드 예시
inputEl.addEventListener('input', () => {
  if (timer) clearTimeout(timer);
  timer = setTimeout(handleChange, 300);
});
// 보통 300ms 혹은 500ms로 사용한다.

Debouncing

디바운싱은 글자 입력 후 일정 시간 동안 입력이 없을 경우 서버와 통신한다. 즉, 사용자가 몇글자를 입력하든 개발자가 설정한 시간 이내에 글자가 입력되면 서버와 통신하지 않고 계속 기다린다. 시간을 1초로 설정했다고 가정하자. '안녕하세요'를 입력하고 1초가 지나면 자동으로 서버와 통신한다. 만약 '안녕'만 입력하고 1초가 지나면? '안녕'이란 글자만 검색한다.

Debounce는 사전에 없는 단어다. 더군다나 debouncing도 마찬가지. 이 단어를 검색하면 위키백과 혹은 IT용어사진에서만 뜬다. 찾다보면 전기 분야에서 이 단어를 사용하기 시작했다는 것을 알 수 있다. 스위치가 on/off되는데, 이때 스위치 접점이 느슨해져 미세하고 붙었다 떨어졌다하며 여러번 깜빡이는 현상이 있는데, 이를 bouncing이라 칭했다. 그러다보니 깜빡임을 없이 하고자 그 반대말로 debouncing을 사용한 것. 검색에서는 여러 글자가 계속 깜박거리며 입력는데, debouncing으로 안정화시킨 셈이다.

이미지 출처 : https://guiyomi.tistory.com/122

// 코드 예시
inputEl.addEventListener('input', () => {
   if (!timer) timer = setTimeout(inputChange, 500);
});

 

마무리

사실 검색을 기준으로 얘기했지만, 쓰로틀링과 디바운싱은 검색 외에 웹에서 발생하는 모든 이벤트에서 사용한다. 찾아본 자료에서는 검색 이외에 브라우저 사이즈 값을 주고 받을 때도 자주 사용했다. lodash 등 여러 라이브러리에서도 쓰로틀링과 디바운싱 기능을 제공하는 것으로 봐선 생각보다 자주 쓰이는 듯.

두 가지 모두 setTimeout을 가지고 쓴다는 점이 내게는 흥미로웠다. 개념은 다르지만, 시간을 사용하는 문제라 그런 듯하다. 디바운싱은 계속 체킹하면서 clear를 계속 쓰는 것, 입력 후 특정 시간 이후 실행하는 것. 아주 간단하지만, 중요한 개념이라고 여겨진다.

※ 잘못된 내용이 있을 경우 댓글로 알려주세요. 배우고 익히고 수정하겠습니다:)