🛠️ 처음부터 만드는 Debounce — 마지막 호출만 실행하는 12줄 구현

# 처음부터 만드는 Debounce
Debounce는 연속으로 발생하는 이벤트 중 마지막 호출만 실행하는 패턴입니다. 검색 입력, 창 크기 조정, 자동저장 등에 사용됩니다.

12줄 구현

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

동작 원리

1. 함수 호출 시 기존 타이머를 취소 (`clearTimeout`)
2. 새로운 타이머 시작
3. 지정된 시간 동안 추가 호출이 없으면 실행
4. 호출이 들어오면 다시 타이머 리셋

실제 사용 예제

```javascript
// 검색 입력
const handleSearch = debounce((query) => {
console.log(`API 호출: ${query}`);
}, 300);
input.addEventListener('input', (e) => handleSearch(e.target.value));
// r → re → reac → react
// 300ms 후 '검색: react' 한 번만 실행
// 창 크기 조정
const handleResize = debounce(() => {
console.log('레이아웃 다시 계산');
}, 500);
window.addEventListener('resize', handleResize);
```

Throttle과의 차이

| 패턴 | 동작 | 사용 사례 |
|------|------|----------|
| Debounce | 마지막 호출만 실행 | 검색, 자동저장 |
| Throttle | 일정 간격으로 실행 | 스크롤, 마우스 이동 |

심화: Immediate 옵션

첫 호출을 즉시 실행하고 싶으면:
```javascript
function debounce(fn, delay, immediate = false) {
let timeoutId;
return function(...args) {
const shouldCall = immediate && !timeoutId;
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
timeoutId = null;
if (!immediate) fn(...args);
}, delay);
if (shouldCall) fn(...args);
};
}
```

참고

[Lodash debounce](https://lodash.com/docs/#debounce)

[MDN - Debouncing and Throttling](https://developer.mozilla.org/en-US/docs/Glossary/Debounce)