Closed hyeyoonS closed 1 month ago
Nahyun-Kang
commented
1 month ago 프로그램의 기능에 무리를 주지 않기 위해 사용하는 최적화 기법
hyeyoonS
commented
1 month ago 디바운싱과 쓰로틀링은 성능을 목적으로 자바스크립트의 이벤트를 제어하기 위해 사용되는 기법입니다.
자바스크립트에서의 디바운싱은 마지막으로 발생한 이벤트를 기준으로 특정 time이 지난 후 하나의 이벤트만 실행되도록 합니다.
사용 예시: 검색 기능의 키 이벤트(input)
디바운싱 예시코드
//1. js예시코드
const inputElement = document.querySelector('#ID값');
const DELAY = 500;
const handleChange = () => {
console.log('요청!');
}
let timer;
inputElement.addEventListener('input', () => {
if (timer) clearTimeout(timer);
timer = setTimeout(handleChange, DELAY);
});
이벤트가 발생할 때마다 timer 변수에 콜백 함수를 반환하는 setTimeout 함수를 값으로 할당합니다.
⇒time 이내에 새로운 이벤트가 발생할 때마다 타이머를 초기화 해준다고 이해하면 된다!
time 이내에 새로운 이벤트가 발생한다면 clearTimeout을 해줌으로써 콜백 함수는 실행되지 않으며, 발생하지 않으면 setTimeout은 콜백 함수를 실행하게 됩니다.
//2. React에서의 예시코드
import { useCallback, useEffect } from 'react';
const useDebounceFunc = (func: () => void, delay: number, deps: any[]) => {
const callback = useCallback(func, deps);
useEffect(() => {
const timer = setTimeout(() => callback(), delay);
return () => clearTimeout(timer);
}, [callback, delay]);
};
export default useDebounceFunc;
자바스크립트에서의 쓰로틀링은 짧은 시간 내에 과도한 이벤트 실행으로 인해 발생하는 성능 저하를 막기 위해 일정한 time slice를 주기로 이벤트가 한 번만 실행되도록 제한하는 것을 말합니다.
사용 예시: scroll, resize, drag, mouse 이벤트, 애니메이션 등
쓰로틀링 예시 코드
// 1. js 예시 코드
const DELAY = 500;
const handleScroll = () => {
timer = null;
console.log('스크롤!');
}
let timer;
window.addEventListener('scroll', () => {
if (!timer) timer = setTimeout(handleScroll, DELAY);
});
⇒ 이러한 방법으로 time 이내에 최대 1번의 콜백 함수만 실행하도록 보장할 수 있습니다.
lodashlodash에서는 디바운싱과 쓰로틀링을 쉽게 적용할 수 있도록 debounce, throttle 메소드를 제공합니다.
//디바운싱 예제
import { debounce } from 'lodash';
const DebounceInput = () => {
const handleChange = debounce(({ target }) => {
console.log('debounce', target.value);
}, 500);
return <input type="text" onChange={handleChange} />;
};
export default DebounceInput;
//쓰로틀링 예제
import { throttle } from 'lodash';
const ThrottleInput = () => {
const handleChange = throttle(({ target }) => {
console.log('throttle', target.value);
}, 500);
return <input type="text" onChange={handleChange} />;
};
export default ThrottleInput;
HaydenDevK
commented
1 month ago 
Jyophie
commented
1 month ago 디바운스(Debouncing)와 쓰로틀링(Throttling)은 자주 발생하는 이벤트(예: 스크롤, 리사이즈, 키 입력 등)를 제어하여 성능을 최적화하기 위한 기술입니다. 두 방법 모두 이벤트가 지나치게 많이 발생하여 성능이 저하되는 것을 방지하는 데 사용되지만, 그 작동 방식은 다릅니다.
디바운스는 이벤트가 연속적으로 발생할 때, 특정 시간 동안 이벤트가 발생하지 않을 때까지 대기한 후, 마지막에 한 번만 실행되도록 하는 방법입니다. 이를 통해 연속된 이벤트 호출을 하나로 줄일 수 있습니다.
function debounce(func, wait) {
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), wait);
};
}
// 사용 예시
const handleInput = debounce((event) => {
console.log(event.target.value);
}, 300);
document.getElementById('inputField').addEventListener('input', handleInput);쓰로틀링은 이벤트가 연속적으로 발생할 때, 일정한 간격으로 이벤트를 처리하도록 하는 방법입니다. 이를 통해 이벤트가 일정 주기마다 실행되도록 제한할 수 있습니다.
function throttle(func, limit) {
let inThrottle;
return function(...args) {
if (!inThrottle) {
func.apply(this, args);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
};
}
// 사용 예시
const handleScroll = throttle(() => {
console.log('Scroll event');
}, 200);
window.addEventListener('scroll', handleScroll);디바운스와 쓰로틀링은 모두 이벤트가 빈번하게 발생하는 상황에서 성능을 최적화하는 데 유용합니다. 각각의 상황에 맞게 적절히 사용하면 애플리케이션의 성능을 향상시킬 수 있습니다.
wise-Ag
commented
1 month ago 디바운싱과 쓰로틀링은 연속적으로 실행되는 함수를 제어하여 성능을 최적화하는 기법입니다.
지정된 딜레이 기간중 처음 혹은 마지막 함수만 실행하는 기법입니다. 처음 함수를 호출하는 것을 leading edge, 마지막 함수만 실행하는 것을 trailing edge라고 합니다.
사용예시
일정 시간마다 한 번만 함수를 실행하는 기법으로 디바운싱과 비슷하지만 매 호출마다 타이머를 초기화시키지 않는다는 점에서 차이점이 있습니다.
사용예시
Eugene-A-01
commented
1 month ago Q. 디바운스와 쓰로틀링에 대해서 설명해주세요 .
디바운스와 쓰로틀링은 웹에서의 과도한 이벤트 발생을 방지하고 이벤트핸들러의 호출을 제어하기 위한 기술
디바운스
쓰로틀링
Q. 프로젝트의 어느 부분에서 사용했나요?
스크롤을 사용하는 곳에 useThrottle 커스텀 훅을, 사용자 입력을 받는 곳에 useDebounce 커스텀 훅을 사용했다.
📎 질문
디바운스와 쓰로틀링에 대해서 설명해주세요 . 프로젝트의 어느 부분에서 사용했나요?
✏ 구술 답변 키워드
✏ 서술 답변
디바운스와 쓰로틀링이 뭘까?
디바운스(Debouncing)와 쓰로틀링(Throttling)은 자주 발생하는 이벤트(예: 스크롤, 리사이즈, 키 입력 등)를 제어하여 성능을 최적화하기 위한 기술입니다. 두 방법 모두 이벤트가 지나치게 많이 발생하여 성능이 저하되는 것을 방지하는 데 사용되지만, 그 작동 방식은 다릅니다.
디바운스
디바운스는 이벤트가 연속적으로 발생할 때, 특정 시간 동안 이벤트가 발생하지 않을 때까지 대기한 후, 마지막에 한 번만 실행되도록 하는 방법입니다. 이를 통해 연속된 이벤트 호출을 하나로 줄일 수 있습니다.
디바운스 작동방식
쓰로틀링
쓰로틀링은 이벤트가 연속적으로 발생할 때, 일정한 간격으로 이벤트를 처리하도록 하는 방법입니다. 이를 통해 이벤트가 일정 주기마다 실행되도록 제한할 수 있습니다.
예를 들어, 사용자가 스크롤할 때마다 이벤트를 처리하지 않고, 일정 시간 간격으로 한 번씩만 이벤트를 처리합니다.
쓰로틀링 작동 방식
특정 시간 내에 (호출이 있으면) 첫번째 호출만 실행하고, 특정 시간 동안 후속 호출을 무시한다.
프로젝트 사용