먼저 디바운싱과 쓰로틀링의 정의부터 알아보자.
코드를 올려서 설명한다기보다는 개념만 적어보겠다.
디바운싱 : 연이어 발생한 이벤트 중 마지막, 또는 제일 처음 호출된 함수만 처리하는 방식
쓰로틀링 : 연이어 발생한 이벤트에 일정 시간을 지정해주고, 그 전까지 다시 호출되지 않도록 하는 방식
요즘은 웹 페이지 검색 input창에 작성한 후에 검색 버튼을 누르지 않아도 작성한 값을 포함한 글들이 알아서 검색된다.
디바운싱을 사용하지않은 상태로 코드를 작성하고 실행시킨 gif이다.
아래에 뜨는 게시글 목록이 블로깅하기에 마땅치 않아서 검색부분만..
위의 코드를 실행시킬 때 input 태그의 onChange에 콘솔을 살펴보자.
안녕 두글자를 검색하는데 타자 하나하나마다 요청이 실행되어 우리 예상보다 많은 이벤트가 실행된다.
소규모의 웹에서는 딱히 불편함을 못느낄 수 있으나 대규모의 웹이라고 가정하고 많은 이용자가 많은 검색어를 작성한다고 생각하면 실행되는 이벤트 횟수가 너무 많아 과부하가 생길 수 있다.
이 문제는 자바스크립트의 유틸리티 라이브러리
"Lodash" 를 사용하면 해결된다.
Lodash에는 유용한 내장함수가 많아 자주 사용되고 그 중 우리는 디바운싱을 사용해보자!
디바운싱을 사용하면 딜레이로 시간을 지정해주고,
그 시간만큼 이벤트를 호출하지 않는다.
나같은 경우에는 1000ms 딜레이를 주어 1초의 시간동안 검색한 단어가 포함된 게시글이 뜨도록 해보았다.
이처럼 불필요한 이벤트 호출을 디바운싱으로 줄여줄 수 있다.
no record no memory