용어 사전 coding 용어 페이지

디바운스

연속된 호출을 잠시 모았다가 마지막 한 번만 실행하는 최적화 기법

debounce #javascript#performance#frontend

English version

다른 이름

debounce지연 실행

선수 개념

콜백 이벤트 루프

관련 개념

스로틀 콜백 이벤트 루프

핵심 아이디어

디바운스는 짧은 시간 안에 연달아 발생한 여러 호출을 모두 실행하지 않고, 마지막 호출만 남겨 두는 패턴입니다. 사용자가 검색창에 글자를 빠르게 입력할 때마다 요청을 보내지 않고, 입력이 잠시 멈췄을 때 한 번만 실행하는 식으로 자주 쓰입니다.

이 패턴의 핵심은 "지금 즉시 실행"보다 "조용해진 뒤 한 번 실행"에 있습니다. 그래서 호출 횟수를 줄이고 서버 요청이나 렌더링 낭비를 막는 데 효과적입니다. 다만 중간 과정은 버린다는 점에서 스로틀과 목적이 다릅니다.

이 블로그에서의 역할

Mathbong의 JavaScript 시리즈에서는 이벤트 루프를 이해한 뒤, 콜백 실행 시점을 다듬는 대표 패턴으로 디바운스를 설명합니다. 검색 입력, 자동 저장, 폼 검증처럼 "마지막 값만 중요할 때" 다시 등장하는 허브 용어입니다.

이 개념을 다루는 글

[JavaScript 시리즈 10편] 이벤트 루프, 디바운스, 스로틀로 반응성 다듬기 브라우저 이벤트 루프 개념을 짚고 스크롤·입력 최적화를 위한 debounce/throttle 구현을 연습합니다.[JavaScript Series 10] Improving Performance with the Event Loop, Debounce, and Throttle Review how the browser event loop works and practice debounce/throttle patterns to tame scroll and input bursts.