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

Debounce란?

함수가 계속 호출될 때 마지막 호출만 실행하는 패턴입니다. 예를 들어 검색창에 글을 입력할 때마다 API를 부르면 낭비가 심하죠. Debounce를 쓰면 입력이 멈춘 후에만 한 번 실행됩니다.
Throttle과의 차이:

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

Debounce: 마지막 호출 이후 일정 시간 동안 호출이 없을 때 실행

구현

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

return function(...args) {
// 이전 타이머 취소
clearTimeout(timeoutId);

// 새 타이머 설정
timeoutId = setTimeout(() => {
fn(...args);
}, delay);
};
}
```

실제 사용

```javascript
// 검색 입력
const search = debounce((query) => {
console.log(`검색: ${query}`);
// API 호출
}, 300);
input.addEventListener('input', (e) => {
search(e.target.value);
});
// 사용자가 "hello" 입력 → 300ms 후 한 번만 검색 실행
// 창 크기 조정
const handleResize = debounce(() => {
console.log('레이아웃 재계산');
}, 500);
window.addEventListener('resize', handleResize);
```

고급: 즉시 실행 옵션

```javascript
function debounce(fn, delay, immediate = false) {
let timeoutId = null;

return function(...args) {
const callNow = immediate && !timeoutId;
clearTimeout(timeoutId);

timeoutId = setTimeout(() => {
if (!immediate) fn(...args);
timeoutId = null;
}, delay);

if (callNow) fn(...args);
};
}
```
간단하지만 강력합니다! 검색, 자동저장, 입력 검증 등 많은 곳에서 활용할 수 있어요.