Step 1: debounce와 throttle의 목적 이해하기

프론트엔드 개발에서는 스크롤, 입력, 리사이즈 같은 이벤트가 짧은 시간 동안 반복적으로 발생하는 일이 많다. 이런 이벤트에 매번 함수를 실행하면 불필요한 연산으로 성능 저하가 발생할 수 있다.

이를 해결하는 대표적인 기법이 바로 debounce와 throttle이다.

• debounce: 마지막 이벤트가 발생한 후 일정 시간이 지나야 함수를 실행
• throttle: 일정 시간 간격마다 함수가 한 번만 실행되도록 제한

둘 다 함수 호출 빈도를 제어하는 기술이며, 사용 목적과 작동 방식에 차이가 있다.

Step 2: debounce 함수의 기본 구조 파악하기

debounce 함수는 두 가지 인자를 받는다.

• func: 실행할 함수
• delay: 함수 실행을 지연시킬 시간 (밀리초 단위)

// debounce 구현 예시 (화살표 함수 버전)
const debounce = (func, delay) => {
    let timer;
    return (...args) => {
        clearTimeout(timer);
        timer = setTimeout(() => func(...args), delay);
    };
};

✅ debounce 작동 방식 요약

• 이벤트가 반복되면 이전 타이머를 초기화한다
• 마지막 이벤트 이후 일정 시간(delay)이 지나야 실행된다
• 이벤트가 계속 발생하면 함수는 실행되지 않는다

💡 debounce 사용 예시

• 검색어 자동완성
• 윈도우 크기 조절 이벤트 처리
• 폼 입력 유효성 검사

Step 3: throttle 함수의 개념과 구조 이해하기

throttle 함수도 func과 delay 두 인자를 받고, 다음과 같이 구현할 수 있다.

// throttle 구현 예시
const throttle = (func, delay) => {
    let lastCall = 0;
    return (...args) => {
        const now = new Date().getTime();
        if (now - lastCall >= delay) {
            lastCall = now;
            func(...args);
        }
    };
};

✅ throttle 작동 방식 요약

• 이벤트가 아무리 자주 발생해도 정해진 주기마다 한 번만 실행된다
• 타이머를 사용하지 않고, 마지막 실행 시점을 기준으로 시간 차를 계산한다

💡 throttle 사용 예시

• 무한 스크롤 이벤트
• 스크롤 위치 저장
• 버튼 클릭 제한 (예: 연타 방지)

Step 4: debounce와 throttle 비교 정리

Step 5: 마무리

debounce와 throttle은 모두 반복되는 함수 호출을 제어해서 성능을 최적화하고, 불필요한 실행을 방지하는 데 유용한 기법이다.

• 사용자의 행동이 멈춘 뒤 작업을 처리하고 싶다면 → debounce
• 정해진 주기마다 작업을 처리하고 싶다면 → throttle

상황에 맞는 기술을 골라서 쓰면 훨씬 효율적인 웹 애플리케이션을 만들 수 있다.

답해보기

• throttle은 무엇인가요?
• debounce는 무엇인가요?
• 각 함수 코드를 작성해보세요
• 각 함수는 어떤 상황에서 사용되나요?