[Code Camp 4주차] Throttling & Debouncing

FE 08김우중·2022년 8월 3일
0

검색 기능과 스크롤 기능을 배우면서 Throttling & Debouncing 이라는 새로운 개념들을 배웠다. 정말 생각지도 못했는데 역시 다 만들었다고 방심하면 안되겠다고 다시한번 생각했다

Throttling(쓰로틀링)

Throttling(쓰로틀링)이란, 연이어 발생한 이벤트에 대해 일정한 딜레이를 포함 시키는것이다.
이는 연속적으로 발생하는 이벤트를 무시하는 방식으로 사용되는데, 지정한 딜레이 동안 호출되는 함수는 무시되는 형식이다.

예를들어 스크롤 이벤트를 넣은 페이지를 생각해봤을때, 사용자가 스크롤할때마다 이벤트를 발생시키면 서버에도 클라이언트에도 매우 큰 부하가 발생하게된다.
이를 방지하기위해 쓰로틀링을 사용해 딜레이를 주어 이벤트의 오버클릭을 방지해야한다

Debouncing(디바운싱)

Debouncing(디바운싱)이란, 연이어 발생한 이벤트를 하나의 그룹으로 묶어 처리하는 방식으로, 마지막 혹은 처음에 처리된 함수를 처리하는 방식으로 사용된다.
마지막 호출이 발생한 후 일정시간이 지날때까지 추가적 입력이 없을때 실행이 되는것이다.

예를들어 검색기능을 생각해봤을때, 우리가 검색창에 글자를 하나하나 기입할때마다 이벤트가 호출이되버리면 백엔드서버에 엄청난 부하를 가하게 되버린다.
이를 방지하기위해 디바운싱을 사용해 단어를 끝까지 입력한 후(마지막 입력) 이벤트를 호출하게하여 이벤트의 오버클릭을 방지해야한다

!! 추가

이러한 기능들은 직접 만들어도되지만 굳이 만들필요없이 Lodash 라는 자바스크립트 유틸리티 라이브러리에 다 제공이되어있다.
실무에서도 거의 전부 사용한다고하니 써보는것도 괜찮을거같다!!

profile
새내기 개발자

0개의 댓글