[인프런 워밍업 스터디 클럽 1기_FE] 스터디 5조 Deboune and Throttle
Debouncing and Throttling들어가며웹 애플리케이션을 개발할 때, 이벤트을 처리하는 것은 중요한 과제 중 하나입니다. 특히, 사용자의 이벤트에 반응하여 적절한 작업을 수행하는 것은 좋은 사용자 경험을 제공하기 위해 필수적입니다. 이때 debounce와 throttle은 이벤트 효율적으로 핸들링하는 데에 큰 도움이 됩니다. 또한, 이벤트 횟수를 조절하는 것으로 서버 자원을 아낄 수도 있습니다. 이번 스터디에서는 debounce와 throttle의 개념과 활용 방법에 대해 알아보겠습니다.DebounceDebounce는 반복적으로 발생하는 이벤트를 일정 시간 동안 딜레이시켜 마지막 이벤트만을 처리하는 방식입니다. 자동문을 생각하면 이해하기 쉽습니다. 사람이 지나가면 일정 시간 동안 열려있다가, 일정 시간 동안 사람이 지나지 않으면 문이 닫히죠? 이러한 특징을 살려 주로 검색이나 자동완성 기능을 구현할 때 사용됩니다. 사용자가 타이핑하는 동안 실시간으로 검색을 실행하는 것이 아니라, 사용자가 일정 시간 동안 입력을 멈출 때에만 검색을 실행하여 서버 부하를 줄일 수 있습니다. 특히 한글은 조합언어의 특성이 있어 입력에 경우 input 이벤트가 영어에 비해 더 잦은 빈도로 발생하므로 이에 대한 처리를 해주는 것이 좋습니다.구현//debounce let timer; function debounce(fn, delay) { //timer가 있다면 제거 if (timer) { clearTimeout(timer); } //개로운 타이머 생성 timer = setTimeout(() => { fn(); }, delay); }구현은 간단합니다. 단순히 호출 될 때마다 setTimeout을 갱신해주면 됩니다. 참고로, _(lodash)에서는 painting 성능을 위해 requestAnimationFrame()을 이용해 구현하고 있습니다. ThrottleThrottle은 일정 시간 동안 한 번의 이벤트만 처리하는 방식입니다. scroll이나 resize 같은 빈번한 이벤트의 처리를 제한하여 성능을 향상시키는 데 사용됩니다. 스크롤 이벤트의 경우, 사용자가 스크롤할 때마다 이벤트가 발생하지만, throttle을 적용하면 일정 주기마다 한 번씩만 이벤트를 처리하여 부하를 줄일 수 있습니다.구현//throttle let throttled = true; function throttle(fn, delay) { if (throttled) { throttled = false; setTimeout(() => { fn(); throttled = true; }, delay); } }첫 함수만 통과후 throttled 값을 false로 만들고, delay 후에 다시 함수가 호출 될 수 있도록 설계했습니다. 결론debounce와 throttle은 이벤트를 효율적으로 핸들링 하는데 유용한 방법입니다. 이러한 기술을 활용하여 웹 애플리케이션의 성능을 향상시키고 사용자 경험을 개선할 수 있습니다. 이번 스터디를 통해 debounce와 throttle의 개념과 활용 방법에 대해 잘 이해하고, 실제 프로젝트에 적용하여 보다 나은 웹 애플리케이션을 만들어 보시기를 바랍니다.이미지 출처 : https://medium.com/fantageek/throttle-vs-debounce-in-rxswift-86f8b303d5d4
