throttling과 loadash 라이브러리

아래의 canvas 애니메이션 구현시 유저가 mouse down이벤트를 이용하여 50%정도 이미지를 지웠을때 이미지를 새로 받아오는 로직에서, 한번 mousedown이벤트를 할때마다 이미지를 매번 불러오는 이슈가 발생하였고, 성능상 좋지 못하다고 판단하여 쓰로틀링 기법을 적용하게 되었다.

throttling이란?

간단히 말해 이벤트를 일정한 주기마다 발생하도록 하는 방식 입니다. 유저가 회원가입을 함에 있어서, 회원가입 버튼을 100번 연속으로 클릭했을때 이를 100번 백엔드측에 요청을 하면 막대한 손실을 일으킬수 있습니다. 따라서 이때 쓰로틀링 기법을 이용하여 유저가 한번 클릭 한후 일정 시간 사이에는 백엔드측에 요청이 들어가지 못하도록 처리 할수 있습니다.
아래는 쓰로틀링을 라이브러리 없이 쓸때의 예시코드 입니다.

const throttle = (func, timeout = 300) => {
  let timer =false;
  return () => {
    if (!timer) {
      timer = setTimeout(() => {
      func.apply(this, args);
        timer = false;
      }, timeout);
    }
  };
};

loadash 라이브러리란?

일반적인 유틸 함수들을 모아서 제공해주는 라이브러리가 Lodash입니다. Lodash는 자바스크립트 용 유틸리티 라이브러리이고 가장 많이 쓰이고 최신의 기능을 제공하는 라이브러리입니다. Lodash는 배열, 숫자, 객체, 문자열 등을 순회하면서 각 요소마다 원하는 기능을 실행하거나, debounce나 throttle처럼 구현하기 번거로운 함수들을 제공하고 있습니다. 라이브러리 없이 구현할때는 복잡해지는 로직이 loadash 라이브러리를 쓰는순간 아래와 같이 짧아지게 되었습니다.

.

    const checkPercent = throttle(() => {
      const percent = getScrupedPercent(ctx, canvasWidth, canvasHeight);
    }, 500);