[Performance] : Debouncing(디바운싱),Throttling(쓰로틀링)

🤦🏻‍♂️ 모르는 게 너무나도 많다...

오늘은 아침 Front개발자 회의를 하다.  백앤드 시니어분께서 input에 타이핑만 해도 모든 화면에서 랜더링이 된다고 해서 어떻게 처리하면 좋을지 프론트 시니어분께 질문을 하셨다.

그때 하신 말씀이 lodash - Debouncing을 사용하면 좀 줄어들 거라고 하셨는데 난 무슨 말인지 몰라서 ㅎㅎ 메모장에 개념만 써두었다. 

 

정말 모르는 게 너무나도 많다...  (개념은 가볍게 익히고 실제로 적용하는 방법정도 작성해볼까 한다.) - lodash 사용 예정

---

 

1. Debouncing(디바운싱)

 디바운싱이란?
유저가 요청을 보낼 때 일정한 시간격차를 두고, 연속에서 발생한 이벤트를 하나로 묶어서, 처음이나 마지막 한 번에 해당 요청(이벤트)을 실행하는 방식을 말한다.

 

여러 블로그의 글들을 읽어본 결과

 대부분 검색할 때 발생하는 이벤트에 대한 설명으로 알려주셨다.

 

ㄷ, 디, 딥,디바,디방,디바우,디바운,디바운ㅅ,디바운시,디바운싱 => 요렇게 이벤트가 연속적으로 발생할 때 계속해서 ajax요청을 하는 것을 말한다.

이런 쓸데없는 요청을 막기 위해서 일정 간격을 두고 한 번에 묶어서 요청하는 것이라고 한다.

 

구글 검색창에 디바운싱 검색했을 때 네트워크 요청탭만 봐도 보인다.

구글 검색창

 

 

lodash에서 debounce 사용하는 법을 간단하게 살펴보면

 

lodash 설치

npm install lodash
npm install @types/lodash

 

import _, { debounce } from "lodash"
 
const handleDebouce = _.debounce((text: string) => {console.log(text)}, 500);
 
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  const text = e.currentTarget.value;
  handleDebouce(text);
};

 

lodash를 import 하고 handleDebouce에서 debouce함수를 호출하고 원하는 시간간격(ms 단위)를 입력하면 완료! 

콘솔에 찍히는 요소가 하나로 묶여서 표출된다.

---

2. Throttling(쓰로틀링)

쓰로틀링?
유저가 연이어서 이벤트 요청을 하면 일정한 시간 간격을 두고, 연속적인 이벤트를 무시하는 방법을 말한다. 결국, 일정시간의 간격동안 요청된 이벤트는 무시하는 것이다. (딜레이 된 시간 동안의 이벤트는 무시)

쓰로틀링 스크롤 이벤트에 대해서 많이 글을 쓰셨는데

실제로 scroll 이벤트에 콘솔로그를 찍어서 보면 마우스 휠을 돌릴 때마다 엄청나게 콘솔이 찍히는 것 볼 수 있다.

 

쓰로틀링을 처리하면 일정 시간 동안은 콘솔이 찍히지 않는다. (너무 신기..)

 

const scrollEvent = () => {
    console.log("스로틀링 테스트!!");
}

window.addEventListener('scroll', scrollEvent);

 

 

import _, { throttle } from "lodash"
 
const handleScrollDebouce = _.throttle((evnt:any) => { ... }, 500);

 

디바운싱과 동일한 방식으로 throttle만 변경해서 적용시키면 된다. 

 

---

3. 결론

아직은 두 가지 개념을 듣고 오늘 이해한 바를 정리한 정도라서 이후에 실제로 프로젝트에 적용해서 최적화를 해보고 싶다.

이벤트 최적화 이외에도 다른 다양한 방면의 방법도 많을 테니... 틈틈이 공부해서 알아둬야겠다.

 

( loadsh는 처음 코딩 배울 때, 정렬할 때 한번 써보고 따로 써본 적이 없었는데 역시 다양한 기능을 가진 라이브러리였다. 

내가 모르면 없는 기능이라는 생각이 씁쓸하다 ㅎㅎ.. )