🌱 기초 프론트엔드
디바운싱(Debouncing)이란?
쉽게 이해하기
엘리베이터 문이 닫히려다가 누가 오면 다시 열리고, 다시 닫히려다가 또 누가 오면 다시 열리죠. 마지막 사람이 탄 후 일정 시간이 지나야 문이 완전히 닫혀요. 디바운싱도 이처럼 마지막 이벤트 이후 일정 시간이 지나야 실행되도록 만드는 거예요.
핵심 정리
연속된 이벤트를 제어해서 불필요한 실행을 줄이는 기법입니다.
자세히 알아보기
디바운싱은 짧은 시간에 여러 번 발생하는 이벤트를 제어하는 성능 최적화 기법입니다. 이벤트가 연속으로 발생할 때, 마지막 이벤트가 발생하고 일정 시간이 지난 후에만 실제 함수를 실행하도록 만들어요.
가장 대표적인 예시가 검색창 자동완성입니다. 사용자가 '자바스크립트'를 입력할 때 매 글자마다 서버에 요청을 보내면 'ㅈ', '자', '자ㅂ', '자바'... 이렇게 수십 번의 요청이 발생해요. 디바운싱을 적용하면 사용자가 입력을 멈춘 후 0.3초 정도 지나야 요청을 보내므로, 불필요한 서버 호출을 크게 줄일 수 있습니다.
구현은 setTimeout과 clearTimeout을 활용합니다. 이벤트가 발생할 때마다 기존 타이머를 취소하고 새 타이머를 설정하는 거죠. 라이브러리를 사용하면 Lodash의 `_.debounce()` 함수처럼 간단하게 적용할 수 있어요.
디바운싱은 검색 자동완성, 윈도우 리사이즈 이벤트, 스크롤 이벤트 처리 등에서 필수적으로 사용됩니다. 성능 개선과 서버 부하 감소에 큰 효과가 있어서, 실무에서 자주 사용하는 최적화 기법이에요.