🛠️ 처음부터 만드는 Debounce — 마지막 입력만 실행하기

왜 Debounce가 필요한가?

검색창에 글자를 입력할 때마다 API를 호출하면 낭비입니다. 사용자가 타이핑을 멈춘 후 한 번만 호출하는 게 합리적이죠. 이것이 Debounce입니다.
> Throttle은 "일정 간격마다 한 번", Debounce는 "연속 호출이 멈춘 후 한 번"입니다.

직접 구현하기

```typescript
function debounce any>(
fn: T,
delay: number
): (...args: Parameters) => void {
let timerId: ReturnType | null = null;
return function (...args: Parameters) {
// 이전 타이머가 있으면 취소
if (timerId !== null) {
clearTimeout(timerId);
}
// 새 타이머 설정 — delay 동안 추가 호출이 없으면 실행
timerId = setTimeout(() => {
fn(...args);
timerId = null;
}, delay);
};
}
```
핵심은 단 하나: 호출될 때마다 이전 타이머를 취소하고 새로 시작합니다.

사용 예시

```typescript
const search = debounce((query: string) => {
console.log(`API 호출: ${query}`);
}, 300);
// 빠르게 연속 입력
search("r"); // 취소됨
search("re"); // 취소됨
search("rea"); // 취소됨
search("reac"); // 취소됨
search("react"); // ✅ 300ms 후 실행
```

동작 원리 타임라인

```
입력: r---re---rea---reac---react--------
타이머: [시작→취소] [시작→취소] ... [시작→✅실행]
←300ms→
```

핵심 정리

| 개념 | 설명 |
|------|------|
| `clearTimeout` | 이전 예약을 취소하는 열쇠 |
| `setTimeout` | 마지막 호출 후 delay만큼 대기 |
| 클로저 | `timerId`를 함수 간에 공유 |
Debounce는 검색 자동완성, 윈도우 리사이즈 핸들러, 폼 자동저장 등 "마지막 의도만 반영"하고 싶을 때 사용합니다.