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

Debounce란?

연속된 호출 중 마지막 호출만 실행하는 패턴입니다. 검색 입력창의 자동완성, 윈도우 리사이즈 이벤트 처리 등에 필수적으로 쓰입니다.
Throttle이 "일정 간격마다 실행"이라면, Debounce는 "조용해진 후 실행"입니다.

직접 구현하기

```javascript
function debounce(fn, delay) {
let timer = null;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
}
```
핵심은 단 한 줄, `clearTimeout(timer)`입니다. 새 호출이 들어올 때마다 이전 타이머를 취소하고 다시 시작합니다.

실전 예제: 검색 입력

```javascript
const search = debounce((query) => {
console.log(`API 호출: ${query}`);
}, 300);
search('R'); // ❌ 취소됨
search('Re'); // ❌ 취소됨
search('React'); // ✅ 300ms 후 실행
```

한 단계 더: leading 옵션

첫 호출을 즉시 실행하고 싶을 때가 있습니다.
```javascript
function debounce(fn, delay, { leading = false } = {}) {
let timer = null;
return function (...args) {
const isFirst = timer === null;
clearTimeout(timer);
if (leading && isFirst) {
fn.apply(this, args);
}
timer = setTimeout(() => {
if (!leading) fn.apply(this, args);
timer = null;
}, delay);
};
}
```
`leading: true`면 첫 클릭은 바로 실행되고, 연타는 무시됩니다. 버튼 중복 클릭 방지에 딱 맞는 패턴이죠.

핵심 정리

| 개념 | Throttle | Debounce |
|------|----------|----------|
| 실행 시점 | 일정 간격마다 | 마지막 호출 후 |
| 비유 | 엘리베이터 출발 주기 | 엘리베이터 문 닫힘 대기 |
| 용도 | 스크롤, 드래그 | 검색 입력, 리사이즈 |
> 📎 [Lodash debounce 구현](https://lodash.com/docs/4.17.15#debounce)을 참고하면 `cancel`, `flush`, `maxWait` 같은 고급 옵션도 확인할 수 있습니다.