Throttling
Throttling 기법은 짧은 시간 간격으로 연속해서 발생한 이벤트들을 일정시간 단위(delay)로 그룹화하여 처음 또는 마지막 이벤트 핸들러만 호출되도록 하는 것을 말한다. 주로 무한스크롤에서 사용한다.
Debouncing
짧은 시간 간격으로 연속해서 이벤트가 발생하면 이벤트 핸들러를 호출하지 않다가 마지막 이벤트로부터 일정시간(delay)이 경과한 후에 한 번만 호출하도록 하는 것을 말한다. 주로 입력값 실시간 검색, 화면 resize 이벤트 등에서 사용된다.
메모리 누수 유발
쓰로틀링과 디바운싱에서 setTimeout을 자주 사용하는데, 이 함수의 사용으로 인해 메모리 누수가 유발될 수 있다. 하나의 페이지에서 페이지 이동 없이 setTimeout을 동작시키고 타이머 하뭇가 종료될 때까지 기다린다면 메모리 누수는 없다.
리액트로 만든 SPA 웹사이트는 페이지 이동 시 컴포넌트가 언마운트 되는데, 페이지 이동 전에 setTimeout으로 인해 타이머가 동작중인 상태에서 clearTimeout을 안해주고 페이지를 이동한다면, 컴포넌트는 언마운트 되었음에도 불구하고 타이머는 여전히 메모리를 차지하고 동작하고 있다. 이 경우 메모리 누수에 해당한다고 말할 수 있다.
lodash
lodash는 JavaScript 유틸리티 라이브러리로 배열, 객체, 문자열 등의 데이터 조작을 쉽게 할 수 있는 다양한 함수들을 제공한다. 성능 최적화와 코드 가독성을 높이는 데 유용하다. 특히, throttle과 debounce같은 함수도 포함되어 있다.
