제목

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• 초보자/프론트엔드 개발자: JavaScript 인터뷰 대비 및 debounce 개념 이해
• 난이도: 기초~중급 수준, 콜백 함수와 타이머 개념 필요

핵심 요약

• debounce 기능은 이벤트 핸들러(예: 검색, 스크롤)의 과도한 호출을 제한하여 성능 최적화에 사용됨
• 코드 예시로 setTimeout과 clearTimeout 활용한 debounce 구현을 제시
• Replit Demo 링크 제공으로 실습 가능

섹션별 세부 요약

1. 문제 정의

• MakeMyTrip 인터뷰 질문으로 debounce 구현 요청
• 목표: 반복적인 이벤트 호출을 제한하는 debounce 함수 작성
• 예시: 사용자 입력 시 실시간 검색, 창 크기 조절 시 렌더링 최적화

2. debounce 개념 설명

• debounce란?
• 특정 시간 간격 내 반복된 호출을 무시하고 마지막 호출만 실행
• 성능 개선을 위한 전략 (예: 300ms 간격으로 검색 요청 제한)
• 기본 원리: setTimeout으로 지연 호출, clearTimeout으로 중복 호출 방지

3. 코드 구현 예시

• JavaScript 구현:

```javascript

function debounce(func, delay) {

let timer;

return (...args) => {

clearTimeout(timer);

timer = setTimeout(() => func.apply(this, args), delay);

};

}

```

• 사용 예:

```javascript

const searchInput = document.getElementById('search');

searchInput.addEventListener('input', debounce(fetchResults, 300));

```

결론

• 실무 적용 팁: debounce는 UX 개선과 서버 부하 감소에 유용, Replit Demo로 직접 테스트하며 개념 정리 권장
• 핵심 포인트: setTimeout/clearTimeout 사용, 이벤트 핸들러 최적화, 인터뷰 질문 대비 필수 기술