쓰로틀링, 디바운싱 (throttling, debouncing) 뜻, 쓰로틀링 사용이유, 디바운싱 사용이유, throttle, debounce

 

javascript를 계속 공부하다보면 쓰로틀링, 디바운싱이라는 용어를 듣게 되는경우가 있습니다.
이것이 무엇인지 알아보겠습니다.

쓰로틀링 뜻, 디바운싱 뜻, throttling 뜻, debouncing 뜻

디바운스와 쓰로틀링 UI에서 발생하는 이벤트를 제어하는 방법입니다.
과도하게 이벤트 처리 함수(콜백함수)가 호출되지 않도록 하여 부하방지를 위해 쓰이는 방법입니다.

쓰로틀링 (throttling): 사용자가 이벤트를 수행하는 동안 지정된 시간 간격으로 함수를 호출하는 방법입니다.
디바운싱 (debouncing): 사용자가 특정 시간 동안 이벤트를 수행하지 않았을 때 함수를 호출하는 방법입니다.

쓰로틀링 쓰는 이유, 디바운싱 쓰는 이유, throttling 쓰는 이유, debouncing 쓰는 이유

이 기술을 쓰는 대표적인 사유는 검색어 자동완성기능이 있습니다.
아래와 같이 키보드 타이핑을 하면 검색어가 자동완성되는 아래와 같은 기능을 많이들 보셨을 겁니다.

예를 들어 쓰로틀링과 디바운싱을 안썼을 때, Italy 라는 단어를 검색해보자고 합시다.
그러면 클라이언트(웹브라우저)에서 서버로 요청(request) 보내어, 검색어에 일치하는 결과물들을 출력해줄 것입니다.
I를 검색할때도, It까지 눌렀을때, Ita 까지 눌렀을대, Ital, Italy 라고 각각 타이핑할떄마다 request를 보내게 될 것입니다.
키보드 타이핑을 할 때마다 서버 요청을 하면 서버 부하도 증가하고, 클라이언트에서도 통신을 하느라 UI가 많이 느려져보이겠지요.
또한, api 횟수 제한이 있거나, 혹은 api 호출마다 비용이 든다면 서비스 운영에도 문제가 되겠지요.
그렇기에 request를 줄여 속도를 개선하기 위해 쓰로틀링과 디바운싱이 쓰이게 되었습니다.

쓰로틀링, 디바운싱 예제코드

이해를 돕기 위해 코드를 살펴보겠습니다.

먼저, 쓰로틀링, 디바운싱을 사용하지 않았을때의 코드입니다.
키보드를 타이핑할때마다 요청을 하게 되겠지요.

let input = document.getElementById('input');
input.addEventListener('keypress', function(e){
 fetch('https://restcountries.eu/rest/v2/name/'+input.value)
 .then(function(res){
 document.getElementById('list').innerHTML = res.data;
 });
};

다음으로 쓰로틀링을 사용 했을때의 코드입니다.
키보드 타자를 치더라도, 일정한시간(500ms)이 지나야 이벤트를 실행시킵니다.

let isThrottle = false;
let input = document.getElementById('input');
input.addEventListener('keypress', function(e){
 if(isThrottle) return;
 
 isThrottle = true;
 fetch('https://restcountries.eu/rest/v2/name/'+input.value)
 .then(function(res){
 document.getElementById('list').innerHTML = res.data;
 });
 setTimeout(() => {
 isThrottle = false;
 }, 500);
};

마지막으로 디바운싱을 사용했을 때의 코드입니다.
키보드 타자를 여러번 치더라도, 마지막으로 타이핑 한후 500ms 안에 실행되었다면 맨 마지막에만 실행이됩니다.

let inDebounce = null;
let input = document.getElementById('input');
input.addEventListener('keypress', function(e){
 clearTimeout(inDebounce);
 inDebounce = setTimeout(() => {
 fetch('https://restcountries.eu/rest/v2/name/'+input.value)
 .then(function(res){
 document.getElementById('list').innerHTML = res.data;
 });
 }, 500);
};
 

throttling과 debouncing을 더 쉽게 사용하기 - lodash 사용하기

위와 같이 throttling 과 debouncing을 사용하기 위해서는 setTimeout을 쓰고, 변수를 따로 지정해주어야 하는 번거로움이 있습니다.
그러나 아래와 같이 lodash 라이브러리를 사용하면 그런 번거로움없이도 throttling 과 debouncing을 쉽게 사용할수 있습니다.

// _.throttle(콜백함수, 밀리세컨드) 메소드를 사용하여 throttling 구현
let input = document.getElementById('input');
input.addEventListener('keypress', function(e){
 _.throttle(()=>{
 fetch('https://restcountries.eu/rest/v2/name/'+input.value)
 .then(function(res){
 document.getElementById('list').innerHTML = res.data;
 });
 }, 500);
};


// _.debounce(콜백함수, 밀리세컨드) 메소드를 사용하여 debouncing 구현
let input = document.getElementById('input');
input.addEventListener('keypress', function(e){
 _.debounce(()=>{
 fetch('https://restcountries.eu/rest/v2/name/'+input.value)
 .then(function(res){
 document.getElementById('list').innerHTML = res.data;
 });
 }, 500);
};
 

총평

토이프로젝트에서는 외부 api 를 쓰지 않는 이상 딱히 많이 쓰고있지는 않습니다.
부하가 중요하거나, 외부 api 호출시 비용이 드는 업무, 호출횟수가 드는 업무에 대해서만 사용합니다.
그마저도 외부 api 호출은 중간에 cache 서버를 둔다던지 해서 호출횟수를 아끼기때문에 생각보다 쓸일은 없을수도 있겠습니다.
우선 기능개발을 하고 유지보수하면서 다루게 되는 부분이 되는 요소이고, 가끔씩 면접이나 코딩문제에서 나오는거 같습니다.



쓰로틀링, 디바운싱 (throttling, debouncing) 뜻, 쓰로틀링 사용이유, 디바운싱 사용이유, throttle, debounce
#쓰로틀링,#디바운싱,#throttling,#debouncing,#javascript,#lodash,#debounce,#throttle

https://devscb.com/post/78

Throttling, debouncing (throttling, debouncing) meaning, reason for using throttling, reason for using debouncing, throttle, deb