Debounce 와 Throttle

오늘은 많은 홈페이지에서 사용되는 Debounce와 Throttle에 대해서 알아보려고 합니다. 

 

Debounce는 무엇일까요? 

여기서 Debounce는 debouncing 이라는 용어에서 나오게 된 기법이라고 생각하시면 됩니다.

여기서 debouncing 은 기계식 스위치의 동작을 전기적 신호로 변경 시에 생기는 진동 잡음을 제거하기 위하여 사용하는 하드웨어의 지연 회로, 소프트웨어의 적절한 지연시간으로 나와있습니다. 

 

 

저희가 흔히들 쓰는 검색창입니다. 여기서 키를 입력하게 되면 그에 맞는 단어를 조합하여 밑에 자동완성이 되는 것을 볼 수 있는 데요. 

여기서 Keboard가 한자씩 입력될때마다 Api로 데이터를 가져온다면 저의 의도와는 다르게 무관한 요청이 발생되면서 오류가 생기고 이러한 것들은 성능 측면에서 매우 안 좋기 때문에 Debounce는 이런 타이핑이 끝난 후에 요청하여 출력하게 됩니다. 

 

 

 

네이버에서 검색을 할때 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ이라는 것을 짧은 시간에 쭉 누른다면  Debounce 함수를 사용해서 사용한 제일 마지막 행동과 단어를 사용하여 쿼리를 서버에 보내고 이에 맞는 데이터를 불러와줍니다. 

 

 

 

 

ㅋ를 입력하고 ㅋ를 또 입력했을때 총 2개의 쿼리가 날아간 것을 확인할 수 있습니다. 총두 개의 쿼리가 갔네요. 제가 ㅋ이라는 단어를 여러 번 천천히 입력한다면 무수히 많은 쿼리가 날아갈 것입니다. 그래서 Debounce를 사용해서 최적화를 시킨다면 수많은 Api호출로 인해 서버가 터지는 등의 현상이 발생되지 않을 수 있습니다. 개인 서버 같은 경우에 데이터가 방대하다면 충분히 그럴 위험이 있기 때문입니다. 

 

코드를 한번 볼까요? 저는 Vue.js 프레임워크를 사용하고 검색할때마다 서버에서 그에 따른 교육 리스트를 불러왔습니다. 

 

 

데이터에 debounce를 만들어준 후 

write라는 함수가 실행될때 input값에 타자가 들어갈 때 setTimeOut을 사용해서 100ms동안 입력이 없으면

입력이 끝난 것으로 칩니다.

하지만 100ms이전에 타자 입력이 발생하면 clearTimeOut을 사용해서 이전 타이머는 취소하고 새로운 타이머를 다시 설정하는 겁니다.

 

이처럼 리소스 낭비를 하지않기위해 ajax 검색을 통해 많이 사용되는 debounce를 알아봤습니다.

 

Throttle 은 무엇일까요? 

Throttle 은 주로 페이스북이나 인스타그램 처럼 계속해서 스크롤을 내리며 데이터를 보여줄 때 많이 사용합니다. 

특정 주기를 정해서 한 반복주기 내에서는 사용했던 이벤트가 또다시 트리거 되지 않도록 처리하는 기법입니다.

쉽게 말하면 마지막 함수가 사용되고 나서 정해놨던 일정 시간이 지나기전까지는 다시 호출하지 않는 것입니다. 스크롤 이벤트가 진행될 때마다 데이터를 불러오려고 한다면 매우 많은 횟수로 함수가 반복되기 때문입니다. 

 

 

시간이 설정되어있으면 아무동작도 하지 않고 시간이 없다면 타이머를 설정합니다 하지만 이 타이머는 정해진 시간이 지나면 초기화 후에 제가 원하는 함수나 ajax 요청을 하게 됩니다. 

 

이렇게 제가 직접 timeOut을 설정하며 사용해도 되지만 Lodash같은 JavaScript 라이브러리에서 함수를 사용해서 쉽게 사용할 수 있습니다.