🛠️ 처음부터 만드는 Debounce — 연속 이벤트를 마지막 한 번만 처리하기

# Debounce 만들기
Debounce는 연속으로 발생하는 이벤트 중 마지막 이벤트만 실행하는 패턴입니다. Throttle과 비슷하지만 다릅니다.

개념 차이

Throttle: "일정 시간마다" 실행 (최대 X초마다)

Debounce: "마지막 이벤트부터 X초 기다려서" 실행 (입력이 멈추면 그때 실행)

실제 예시

검색창에서 사용자가 "hello"를 입력합니다:
```js
const debounceSearch = debounce((query) => {
console.log('검색:', query);
}, 500);
input.addEventListener('input', (e) => {
debounceSearch(e.target.value);
});
// h → 입력 중 (무시)
// he → 입력 중 (무시)
// hel → 입력 중 (무시)
// hell → 입력 중 (무시)
// hello → 500ms 후 '검색: hello' (마지막 값만 처리)
```

단계별 구현

1단계: 기본 구조

```js
function debounce(fn, delay) {
let timeoutId;

return function(...args) {
// 이전 타이머 취소
clearTimeout(timeoutId);

// 새 타이머 설정 — delay ms 후 fn 실행
timeoutId = setTimeout(() => {
fn(...args);
}, delay);
};
}
```

2단계: this 바인딩 고정

```js
function debounce(fn, delay) {
let timeoutId;

return function(...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
fn.call(this, ...args);
}, delay);
};
}
```

완성된 코드

```js
function debounce(fn, delay) {
let timeoutId;

return function(...args) {
// 이전 타이머 취소
clearTimeout(timeoutId);

// delay ms 후 실행
timeoutId = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
}
// 사용
const saveDraft = debounce((text) => {
console.log('자동 저장:', text);
}, 1000);
document.querySelector('textarea').addEventListener('input', (e) => {
saveDraft(e.target.value);
});
```

실무 활용

검색 입력: API 호출 전에 사용자가 입력을 멈출 때까지 대기

폼 필드 검증: 입력 완료 후 유효성 검사

윈도우 리사이즈: 브라우저 크기 조정 완료 후 레이아웃 재계산

자동 저장: 문서 수정을 멈춘 후 저장

공식 문서: [MDN setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout)