Rx를 공부하던 중, 흐름 제어에 대한 내용을 보고 문득 인턴 근무기간동안 공부했던 내용이 생각났다.
검색어 자동완성 기능을 구현할 일이 있었는데, 이 때 throttle과 debounce 방식 중 어떤 것이 낫냐는 회의를 하면서, 이 내용을 꼭 블로그에 적어야지! 하고 잊어버렸다... 1년이 다 지나가지만 지금이라도 적어보자..!
그게 뭔데
한 마디로 설명하자면 위와 같다. 어떤 이벤트가 특정 시간동안 너무 빈번하게 발생되면 성능 상의 문제를 야기할 수 있기 때문에, 적절한 제어를 통해 과도한 호출이 일어나지 않도록 해야 한다.
빈번하게 발생하면 뭐가 문제인데
이해하기 쉽게 대표적인 예시를 들어 보자. 스크롤 이벤트,자동 완성등이 이를 사용하는 대표적인 예시다.
스크롤 이벤트의 경우 스크롤이 진행되는 동안 계속해서 발생한다. 빠르게 내리든 천천히 내리든 같은 양의 이벤트가 발생하기 때문에, 2~3초 안에 몇 백, 몇 천개의 이벤트가 발생할 수 있는 것이다.
자동 완성의 경우도 마찬가지로, 쓰로틀 이라는 검색어를 입력하는 과정에서 ["ㅆ", "쓰", "쓸", "쓰로", "쓰롵", "쓰로트", "쓰로틀"] 이 모든 검색어에 대해 자동 완성 리스트를 검색하는 API를 호출하게 된다.
굉장히 비효율적이고, 성능 저하가 일어날 수 있으며, 불필요한 이벤트가 많이 발생한다. 이벤트가 발생할 때마다 불필요하게 많은 API를 호출하면서 성능적으로도 문제가 생길 수 있지만, 만약 비용이 드는 외부 API인 경우라면 금액적으로도 많은 손실이 일어날 수 밖에 없다.
Throttle vs Debounce
이제 대충 무엇인지, 왜 사용하는 것인지는 알게 되었다. 그러면 이제 두 방법 사이에는 어떤 차이가 있는지 알아보자.
Throttle
어떤 이벤트가 발생하면, 우선 이벤트의 발생을 막은 뒤 타이머를 동작시킨다. 그 후, 타이머가 종료되기 전까지 마지막으로 발생한 이벤트를 최종적으로 발생시킨다.
debounce
쓰로틀과 마찬가지로, 이벤트가 발생하면 우선 타이머를 실행시킨다. 그 후, 타이머가 종료되기 전에 이벤트가 다시 발생하면 다시 타이머를 초기화시킨다. 타이머가 종료되면 마지막으로 발생한 이벤트를 최종적으로 발생시킨다.
정리
쓰로틀과 디바운스에 대해 간략하게 정리해 보았다.
차이점을 다시 한 번 살펴보자면, 쓰로틀은 특정 시간마다 적어도 1번은 무조건 실행이 된다는 것이다. 반면 디바운스는 지속적으로 타이머 간격보다 짧게 이벤트가 발생하면, 언제까지 대기할 지 장담할 수 없다.
특정 시간마다 적어도 1번의 실행이 보장된다는 것은 어떻게 보면 필요없는 이벤트가 발생할 수도 있다는 것이지만, 사용자로 하여금 시스템이 정상적으로 동작하고 있다는 느낌을 줄 수 있다. 반면 디바운스는 필요 없는 이벤트의 발생을 최대한 줄일 수 있지만 시스템이 멈춘 것 같은 느낌을 줄 수도 있다.
물론 여기에는 적절한 타이머 간격을 세운다는 가정이 필요하다. 간격이 짧다면 이벤트를 지연시키는 이유가 없고, 길다면 사용자가 불편을 느낄 수 있다.
따라서, 적절한 시간간격과 함께(보통은 100~300ms 정도를 적절한 간격으로 보고 있는 것 같다.) 서비스에 따라 쓰로틀 혹은 디바운스 방법을 적용해서 이벤트가 적절한 빈도로 발생되게 하자!
참고
https://kellis.tistory.com/142
https://medium.com/@kwoncharles/debounce와-throttle의-차이-34845fbfa1ff
Uploaded by Notion2Tistory v1.1.0