디바운싱은 짧은 시간 동안 여러 번 발생하는 이벤트가 있을 때, 마지막 이벤트만 처리되도록 하는 기술입니다.
예를 들어, 사용자가 입력 필드에 빠르게 입력을 할 때마다 검색 기능이 실행되는 것을 방지하고, 일정 시간 동안 입력이 멈추면 그때 검색 기능을 실행하게 합니다.
디바운싱의 주요 목적은 성능 최적화입니다. 사용자가 검색어를 입력할 때마다 검색을 수행하면 서버에 많은 요청을 보내게 되어 성능이 저하될 수 있습니다. 디바운싱을 사용하면 사용자가 입력을 멈춘 후 일정 시간(예: 1초) 후에 검색을 실행하게 되어 불필요한 검색 요청을 줄일 수 있습니다.
자바스크립트에서는 이 전에 배웠던 setTimeout함수를 이용하여 디바운싱을 구현할 수 있습니다!
let 타이머
clearTimeout(타이머);
타이머 = setTimeout(() => {
// 검색 기능 실행
const 내가검색한단어 = event.target.value;
const 검색결과들 = 친구목록.filter(el => el.includes(내가검색한단어));
document.getElementById("HTML_검색결과보여주는곳").innerHTML = 검색결과들.join(", ");
}, 1000);
clearTimeout(타이머)를 사용해 이전에 설정된 타이머를 취소하여, 검색 요청이 중복되지 않도록 합니다.setTimeout을 설정하여, 사용자가 입력을 멈춘 후 1초(1000ms) 동안 추가 입력이 없으면 검색을 실행합니다.디바운싱은 사용자가 연속적으로 발생시키는 이벤트(예: 키보드 입력)로 인해 시스템에 과부하가 걸리지 않도록, 일정 시간 동안 이벤트가 발생하지 않으면 마지막 이벤트만 처리하는 기법입니다. 위 코드에서는 사용자가 검색어를 입력할 때마다 즉시 검색하지 않고, 1초 동안 입력이 멈추면 그때 검색 기능을 실행하도록 디바운싱을 적용했습니다.
이렇게 하면 불필요한 검색 요청을 줄일 수 있어, 특히 대규모 데이터베이스나 API 요청을 사용할 때 성능을 크게 향상시킬 수 있습니다.
지금까지 배운 것을 토대로, API에 디바운싱을 적용해볼까요?