디바운스와 쓰로틀

규갓 God Gyu·2024년 12월 6일

면접질문

목록 보기
24/142

이벤트 핸들러가 너무 자주 실행되지 않도록 조절하는 기법

디바운스
이벤트가 연속적으로 발생할 때, 마지막 이벤트가 발생한 후 일정 시간이 지나야 이벤트 핸들러가 실행되는 방식
ex-검색창에 사용자가 키를 입력할 때마다 검색 요청을 보내면 부하가 지나치게 커지기 때문에, 사용자가 입력을 멈춘 후 일정 시간이 지나면 검색 요청을 보내는 방식으로 디바운스를 적용

쓰로틀
일정 시간 간격동안 발생한 이벤트 중 첫 번째 또는 마지막 이벤트만 처리
ex-사용자가 연속 클릭을 한다면 클릭할 때마다 이벤트가 발생하는데, 이를 매번 처리하면 부하가 불필요하게 커지니, 쓰로틀을 적용해 일정 간격 내 한 번만 처리하게 할 수 있음

결국 디바운스는 마지막 이벤트 후에 딜레이를 두고 처리, 쓰로틀은 일정 시간 간격을 두고 이벤트를 처리

무한 스크롤엔 쓰로틀을 사용하는게 더 적합
스크롤은 연속적인 동작이며, 사용자가 페이지 하단에 도달했을 때 즉각적인 반응을 기대,
쓰로틀은 스크롤이 하단에 위치하게 된 순간 즉시 추가 데이터 요청을 수행, 사용자에게 더 자연스러운 스크롤 경험을 제공

반면 디바운스를 걸어버리면 사용자가 반복적 스크롤할 시 스크롤이 멈춘 후에야 데이터를 불러오기 시작하므로 지연 발생할 수 있음
반면 쓰로틀은 스크롤 중에도 주기적으로 체크하므로, 스크롤이 하단에 위치한 즉시 데이터를 선제적으로 로드하는 것이 좋음

profile
웹 개발자 되고 시포용

0개의 댓글