DevRoutine — 매일 기술 면접 질문

디바운스는 연속 이벤트가 멈춘 뒤 한 번 실행하고, 스로틀은 일정 간격마다 최대 한 번 실행합니다. 검색 입력은 디바운스, 스크롤 처리나 리사이즈 계산은 스로틀이 자주 어울립니다.

핵심 개념

핵심 기준은 호출 빈도 제어 방식과 사용 예시입니다. 이 개념은 단순한 용어가 아니라, 실제 코드나 시스템에서 반복적으로 생기는 문제를 다루기 위해 등장했습니다.

JavaScript는 실행 문맥, 비동기 흐름, 참조 관계가 코드 동작에 직접 영향을 주는 언어입니다. 그래서 문법을 외우는 것보다 값이 언제 결정되고 어떤 순서로 실행되는지 이해하는 것이 중요합니다.

동작 흐름

먼저 어떤 문제가 있는지 확인합니다.
이 개념이 그 문제를 어떤 기준으로 나누거나 해결하는지 봅니다.
실제 코드에서는 입력, 상태, 실행 순서, 비용이 어떻게 바뀌는지 확인합니다.
마지막으로 한계와 부작용을 함께 점검합니다.

실제 예시

JavaScript

function debounce(fn, delay) {
  let timerId;
  return (...args) => {
    clearTimeout(timerId);
    timerId = setTimeout(() => fn(...args), delay);
  };
}

const search = debounce((keyword) => {
  fetch(`/api/search?q=${keyword}`);
}, 300);

디바운스는 마지막 입력 이후 한 번만 실행합니다. 스로틀은 일정 간격마다 실행을 허용하므로 스크롤 이벤트처럼 계속 발생하는 작업에 더 어울립니다.

실무에서 주의할 점

암묵적 변환이나 실행 문맥에 기대면 작은 리팩터링에도 동작이 달라질 수 있습니다.
비동기 코드에서는 실행 순서와 에러 전파 경로를 반드시 확인해야 합니다.
브라우저 이벤트나 타이머를 사용했다면 정리(cleanup) 시점을 놓치지 않는 것이 좋습니다.

함께 연결해서 보면 좋은 키워드

JS, 성능, 디바운스, 스로틀

정리

한 줄로 정리하면, 디바운스는 연속 이벤트가 멈춘 뒤 한 번 실행하고, 스로틀은 일정 간격마다 최대 한 번 실행합니다. 검색 입력은 디바운스, 스크롤 처리나 리사이즈 계산은 스로틀이 자주 어울립니다. 실무에서는 개념을 적용하는 조건과 적용하지 않았을 때 생기는 문제까지 함께 이해하는 것이 중요합니다.

디바운스와 스로틀 구현 비교

디바운스는 마지막 이벤트만 살리고, 스로틀은 일정 시간마다 실행 기회를 줍니다.

JavaScript

function throttle(fn, interval) {
  let last = 0;
  return (...args) => {
    const now = Date.now();
    if (now - last >= interval) {
      last = now;
      fn(...args);
    }
  };
}

window.addEventListener('scroll', throttle(() => {
  console.log(window.scrollY);
}, 200));

선택 기준

상황	적합한 방식	이유
검색 자동완성	debounce	입력이 멈춘 뒤 요청
창 크기 변경 후 레이아웃 계산	debounce 또는 throttle	최종값만 필요하면 debounce
스크롤 위치 추적	throttle	지속적으로 최신 상태 반영
버튼 중복 클릭 방지	throttle/lock	일정 시간 중복 실행 제한

React에서의 주의점

컴포넌트가 리렌더링될 때마다 새 debounced 함수가 만들어지면 이전 타이머를 제어하지 못할 수 있습니다. useMemo, useRef, cleanup을 함께 고려해야 합니다.

디바운스(debounce)와 스로틀(throttle)의 차이는 무엇인가요?

답변 포인트

정답 및 해설