디바운스(Debounce)란 무엇인가?
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- 대상: 프론트엔드 개발자, 이벤트 처리 및 성능 최적화를 다루는 개발자
- 난이도: 중급 (JavaScript 기초 지식 필요)
핵심 요약
- 디바운스는
scroll,resize,keyup등의 이벤트에서 과도한 함수 실행을 방지하는 기술 - 함수 실행을 일정 시간 동안 중단된 후에만 실행하여 API 호출 횟수 감소 및 UI 응답성 향상
setTimeout과clearTimeout을 활용한 비동기 처리 방식
섹션별 세부 요약
1. 디바운스의 정의
- 디바운스는 이벤트가 반복적으로 발생할 때 함수를 즉시 실행하지 않고 일정 시간(예: 300ms) 동안 중단된 후에만 실행
keyup이벤트에서 사용자 입력 시 즉각적인 네트워크 요청을 방지debounce함수는 최근 이벤트만 인식하고, 이전 이벤트는 무시
2. 디바운스의 주요 활용 사례
- 검색창 입력 시 실시간 검색 (예:
keyup이벤트 처리) - 윈도우 크기 조정(
resize) 시 UI 재렌더링 최적화 - API 호출 횟수 제한 (예: 1초에 한 번만 실행)
3. 디바운스 구현 방법
setTimeout을 사용해 일정 시간 후에 함수 실행clearTimeout을 통해 중복된 타이머 제거debounce함수는 고차 함수로, 실행 조건을 동적으로 제어
결론
- 디바운스는
setTimeout과clearTimeout을 사용해 이벤트 처리 성능을 최적화하는 기법 lodash의_.debounce나underscore의_.throttle과 같은 라이브러리 활용이 효율적- 이벤트 처리 시 디바운스 적용을 통해 UI 응답성과 네트워크 부하 감소 가능