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

# Debounce: 연속된 호출의 마지막만 실행
Debounce는 연속으로 발생하는 이벤트 중 마지막 호출만 일정 시간 후에 실행하는 기법입니다. 검색 입력, 폼 유효성 검사, API 요청 등에서 불필요한 처리를 줄일 수 있습니다.

Throttle과의 차이

Throttle: 일정 시간마다 주기적으로 실행

Debounce: 마지막 호출 후 일정 시간이 지나면 딱 한 번 실행

```javascript
// 기본 구현
function debounce(func, delay) {
let timeoutId;

return function debounced(...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
// 사용 예
const search = debounce((query) => {
console.log(`검색: ${query}`);
}, 500);
search('a'); // 취소됨
search('ab'); // 취소됨
search('abc'); // 500ms 후 실행: "검색: abc"
```

실전: 검색 입력

```javascript
const searchInput = document.querySelector('input');
const searchAPI = debounce(async (query) => {
const res = await fetch(`/api/search?q=${query}`);
console.log(await res.json());
}, 300);
searchInput.addEventListener('input', (e) => {
searchAPI(e.target.value);
});
```

심화: 취소 기능 추가

```javascript
function debounceWithCancel(func, delay) {
let timeoutId;

const debounced = function(...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => func.apply(this, args), delay);
};

debounced.cancel = () => clearTimeout(timeoutId);
return debounced;
}
const save = debounceWithCancel(saveData, 1000);
save.cancel(); // 대기 중인 호출 즉시 취소
```
검색, 리사이즈, 자동 저장 등에서 API 호출을 줄여 성능을 개선합니다.
📖 [MDN - Debounce 패턴](https://developer.mozilla.org/en-US/docs/Glossary/Debounce)