"이벤트 폭주를 막아라" 디바운싱(Debouncing)과 쓰로틀링(Throttling)

"검색창에 글자 하나 칠 때마다 API 요청이 가고 있나요?"
짧은 시간 동안 쏟아지는 수많은 이벤트를 제어하여 브라우저와 서버의 부하를 획기적으로 줄이는 두 가지 기법을 알아봅니다.

1. 디바운싱 (Debouncing)

연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음 함수)만 호출하도록 하는 방식입니다. 주로 '입력이 멈춘 뒤' 실행되어야 하는 경우에 사용합니다.

• 적용 사례: 검색창 자동완성 (타이핑이 끝난 후 API 요청), 창 크기 조절(resize) 이벤트.
• 핵심: "계속 이벤트가 오면 무시하고, 마지막 이벤트 이후 n초가 지나면 그때 처리한다."

2. 쓰로틀링 (Throttling)

마지막 함수가 호출된 후 일정 시간이 지나기 전까지는 다시 호출되지 않도록 하는 방식입니다. 즉, 일정 시간 간격으로 실행을 보장합니다.

• 적용 사례: 무한 스크롤(scroll) 이벤트, 클릭 중복 방지.
• 핵심: "아무리 이벤트가 많이 와도 n초에 한 번만 실행한다."

💡 실무 노트

이 두 기법은 라이브러리(Lodash 등)를 쓰면 한 줄로 해결되지만, 그 차이를 명확히 아는 것이 중요합니다.

팁: 검색 기능에는 디바운싱이 압도적으로 유리합니다. 만약 검색에 쓰로틀링을 쓰면 사용자가 '제미나이'라고 치는 동안 '제', '제미', '제미나이' 총 3번의 요청이 간격에 맞춰 갈 수 있지만, 디바운싱은 타자가 멈춘 후 '제미나이' 딱 한 번만 보내기 때문이죠. 반면 스크롤 이벤트처럼 데이터 로딩이 주기적으로 필요한 곳은 쓰로틀링이 적합합니다. 상황에 맞는 적절한 도구 선택이 프론트엔드 성능 최적화의 첫걸음입니다.

"제어되지 않는 이벤트는 비용입니다. 효율적인 흐름 제어가 매끄러운 UX를 만듭니다."