🛠️ 처음부터 만드는 Debounce — 연속 호출을 마지막 호출로 통합하기

언제 필요할까?

사용자가 입력할 때마다 함수가 실행되면 낭비가 크다. 예를 들어 검색창에 한 글자씩 입력할 때마다 API를 호출하면?
Debounce는 연속된 호출 중 마지막 호출만 실행한다. 사용자가 입력을 멈춘 후 일정 시간이 지나야 함수가 실행된다.

기본 구현

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

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

실제 사용 예제

```javascript
// 검색 API 호출 (500ms 동안 입력이 없어야 실행)
const search = debounce(async (query) => {
const results = await fetch(`/api/search?q=${query}`);
console.log(await results.json());
}, 500);
// input 이벤트마다 호출해도 마지막 입력 후 500ms 뒤에만 API 실행
inputElement.addEventListener('input', (e) => {
search(e.target.value);
});
```

Throttle과의 차이

Throttle: 일정 시간 간격으로 실행 (스크롤, 마우스 이동)
Debounce: 호출이 멈춰야 실행 (검색, 자동저장, 유효성 검사)

고급: 즉시 실행 옵션

```javascript
function debounce(fn, delay, { leading = false } = {}) {
let timeoutId;

return function(...args) {
const shouldCall = leading && !timeoutId;
clearTimeout(timeoutId);
if (shouldCall) fn(...args);
timeoutId = setTimeout(() => fn(...args), delay);
};
}
```
첫 호출 즉시 실행 후, 그 다음 입력은 debounce 대상.