[JS] 디바운싱(Debouncing)과 쓰로틀링(Throttling)

얼마 전 너무 유익한 면접을 보고왔다.
면접 후에 더욱 함께하고 싶은 회사가 되었고, 결과에 상관없이 좋은 면접이었다고 생각한다.

[👩‍💻면접관님]
회원가입 버튼이 있고, 1초에 100번 누르는 유저가 있다고 가정해봅시다.
이러한 경우, 짧은 시간동안 100번의 요청이 생길 것이고 해당 사안에 대해 백엔드 측에서 처리를 부탁한다고 했을 때, 어떤 코드를 작성할 것 같나요?

[🐥 나]
사용자가 회원가입 버튼을 눌렀을 때, disable 처리를 하거나
요청을 모아서 한번에 처리할 것 같습니다.

라고 답변하였고, 구체적으로 어떤 코드를 작성할 것 같은지도 질문하셨지만
머리로만 하려니 잘 되지 않았다.

[👩‍💻면접관님]
방금 대답하신 방법이 실제로 용어로도 존재해요.
쓰로틀링과 디바운싱이라는 용어인데 공부해보시면 좋을 것 같아요.

이것이 쓰로틀링과 디바운싱을 공부하게 된 계기이고,
둘은 어떤 차이가 있는지 궁금해져서 면접 질문에 대한 대답을 직접 구현해보며 차이를 알아보았다.

쓰로틀링 (Throttling)

이벤트를 일정한 주기마다 발생하도록 하는 방식

면접에서 답변한 내용 중,
사용자가 회원가입 버튼을 눌렀을 때, 일정 시간동안 클릭을 못하게 하는 방법이 여기에 해당될 수 있다.

리액트로 구현한 간단한 쓰로틀링 방식이다.

  let timer;

  const throttleClick = () => {
    if (!timer) {  
      timer = setTimeout(() => {
        timer = null; // 1초 후 타이머 초기화 
        console.log("회원가입 API 호출"); // api 호출
      }, 1000);
    }
  };

클릭 이벤트를 반복적으로 생성했을 때, 임의로 설정한 시간(1초)에 한번씩 api 호출을 하는 것을 볼 수 있다.
이벤트가 1번 발생한 뒤, 특정한 시간동안 이벤트를 무시하고 다시 이벤트를 발생 시킨다.
쓰로틀링을 사용하면 연속클릭을 하는 동안에도 (일정 시간이 지나면) 이벤트가 발생하기 때문에
scroll, resize, drag 시에 좀 더 매끄러운 사용자 경험을 구현해낼 수 있을 것 같다.

디바운싱 (Debouncing)

연이어 발생하는 이벤트를 모아서 한번만 처리(마지막 혹은 처음) 하는 방식

면접에서 답변한 내용 중,
사용자가 회원가입 버튼을 눌렀을 때, 이벤트를 모아서 한번에 요청하는 방식이 여기에 해당된다.

리액트로 구현한 간단한 디바운싱 방식이다.

  let timer;

  const debounceClick = () => {
    if (timer) {
      clearTimeout(timer); // 클릭이벤트가 계속 발생한다면, 1초 시간 초기화
    }
    timer = setTimeout(() => {
      console.log("회원가입 api 호출"); // 클릭이벤트가 더이상 없다면, 1초 후 호출
    }, 1000);
  };

아까 쓰로틀링과 이벤트의 차이가 있다면, 사용자가 마지막 클릭이벤트를 할때까지 나머지 요청은 전부 무시가 된다는 것이다.
쓰로틀링은 중간중간 일정한 시간에도 이벤트가 일어났다면, 디바운싱은 마지막 이벤트까지 모두 무시가된다.
즉, 디바운싱은 실행횟수 제한도 일어나긴 하지만, 마지막(혹은 처음)을 감지해서 어떠한 동작을 하게 하는 것 이라고 생각해도 좋을 것 같다.
그렇기 때문에 주로 검색어에 따른 api 호출이나 resize에 많이 사용하고,
유료/횟수 제한이 있는 api를 사용할 때 도움이 될 것 같다.

정리

이렇게 쓰로틀링과 디바운싱에 차이를 간단히 공부해보았다.

쓰로틀링과 디바운싱 모두 이벤트를 제어하는 프로그래밍 방식에 해당하며,
과도한 이벤트 발생으로 인해 성능저하, 서버 부하 등을 컨트롤하기 위해 사용한다.
"어떨 때 꼭 이걸 사용하는 게 좋다" 라기 보다는
사용자경험, 서버상황 등 다양한 사항등을 고려해서 둘 중 더 알맞는 방식을 채택하는 것이 현명한 것 같다.

깊게 들어가면 리딩엣지, 트레일링 엣지 등의 개념도 존재하는 것 같다.
스크롤이나, 리사이즈, 검색 예제도 만들어보며 공부를 더 해봐야겠다!!