jonbeo 님의 블로그

안녕하세요 😊웹 개발을 하다 보면 scroll, resize, input 같은 이벤트가 너무 자주 실행되어 성능 저하를 일으키는 경우가 많습니다.예를 들어, 사용자가 검색창에 글자를 입력할 때마다 서버로 API 요청이 간다면 불필요한 요청이 수십 번 발생하겠죠? 이 문제를 해결하는 대표적인 기법이 바로 Debounce와 Throttle입니다.📍 1. Debounce – 마지막 동작만 실행Debounce는 사용자의 연속된 입력 중에서 마지막 동작만 실행되도록 하는 방법입니다. 예시: 검색창 자동완성 function debounce(fn, delay) { let timer; return function (...args) { clearTimeout(timer); timer = setTimeo..

안녕하세요 😊웹 개발을 하다 보면,스크롤 이벤트나 키보드 입력 등 빠르게 반복되는 동작이 있을 때브라우저가 너무 많은 일을 처리하게 되어성능이 저하되는 경우가 많습니다.이럴 때 사용하는 두 가지 핵심 개념이 바로debounce와 throttle입니다!이번 글에서는 이 두 개념의 차이점과실제 사용 예제까지 친절하게 정리해드릴게요 💡📍 1. debounce란?사용자가 이벤트를 멈췄을 때 딱 한 번 실행되도록 하는 방식입니다.입력이 계속되는 동안은 실행되지 않고,입력이 끝나고 일정 시간이 지나야 실행됩니다. ✔ 예시 상황:검색창 자동완성창 크기 변경 시 리사이징 이벤트버튼 중복 클릭 방지function debounce(callback, delay) { let timer; return (...args)..