🛠️ 처음부터 만드는 Debounce — 입력을 일정 시간 뒤에 처리하기

Debounce란?

Throttle과 비슷하지만 다르다. Throttle은 '일정 간격으로 실행', Debounce는 '마지막 호출 이후 일정 시간이 지난 후 실행'.
검색창 자동완성, 폼 입력 유효성 검사, 윈도우 리사이즈 처리에 필수.

핵심 아이디어

```javascript
function debounce(fn, delay) {
let timerId;
return function(...args) {
clearTimeout(timerId);
timerId = setTimeout(() => fn(...args), delay);
};
}
```
매번 호출할 때마다 이전 타이머를 취소하고, 새 타이머를 설정. 마지막 호출 이후 delay ms가 지나야 실행됨.

실제 사용

```javascript
const handleSearch = debounce((query) => {
console.log('API 호출:', query);
}, 500);
searchInput.addEventListener('input', (e) => {
handleSearch(e.target.value);
});
// 사용자가 입력을 멈춘 후 500ms 뒤에만 API 호출
```

더 나은 구현

```javascript
function debounce(fn, delay, immediate = false) {
let timerId;
return function(...args) {
const callNow = immediate && !timerId;
clearTimeout(timerId);
timerId = setTimeout(() => {
timerId = null;
if (!immediate) fn(...args);
}, delay);
if (callNow) fn(...args);
};
}
```
`immediate` 옵션으로 '첫 호출 시 즉시 실행 후, 이후 호출은 debounce'도 가능.

팁

검색/입력: `debounce(apiCall, 300~500)`

리사이즈/스크롤: `debounce(handleResize, 200)`

폼 저장: `debounce(saveForm, 1000)`