하루살이 개발일지

전개 - 버그 발생 React로 debounce와 throttle 함수를 공부하다가 갑자기 throttle 함수가 동작하지 않는 문제가 발생하였다. 문제가 되었던 코드는 다음과 같다. import { useEffect, useState } from "react"; import _ from "lodash"; export const Throttle = () => { const [count, setCount] = useState(0); // Throttle 사용 시 const throttledCountUp = _.throttle( () => setCount((prevCount) => prevCount + 1), 1000 ); const throttledCountDown = _.throttle(() => { s..

디바운스 & 스로틀이란 ? scroll, resize, input, mousemove 같은 이벤트는 짧은 시간 간격으로 연속해서 발생함. 이러한 이벤트에 바인딩한 이벤트 핸들러는 과도하게 호출되어 성능에 문제를 일으킬 수 있음. 디바운스와 스로틀은 짧은 시간 간격으로 연속해서 발생하는 이벤트를 그룹화하여 과도한 이벤트 핸들러의 호출을 방지하는 프로그래밍 기법 디바운스 [디바운스란?] 짧은 시간 간격으로 이벤트 연속해 발생하면 이벤트 핸들러를 호출하지 않다가 일정 시간이 경과한 이후에 이벤트 핸들러가 한 번만 호출되도록 하는 것 즉 짧은 시간 간격으로 발생하는 이벤트를 그룹화하여 마지막에 한 번만 이벤트 핸들러가 호출되도록 함 [사용 예시] 텍스트 입력 필드에서 input 이벤트가 짧은 시간 간격으로 연속..