[jQuery] resize debounce 설정(최적화)

구축만 했을 때는 $(window).on('resize',function(){})을 작업할 때, 

리사이즈는 1px 마다 반응해주는 게 당연하다고 생각했더랬다.

'jquery가 알아서 잘 해결해주겠지' 하는 마음도 있었다.

매번 GT MATRIX(사이트 최적화를 도와주는 사이트:https://gtmetrix.com/)를 돌리면서도

생각지 못한 부분이었다.

사실, resize는 로딩 후의 인터렉션이기 때문에 최적화 고민에서 빠져있기도 했고...

 

자체 서비스를 작업하면서 배운 것 중 하나는,

운영 리소스를 최소한으로 줄여야 한다는 것.

리사이즈는 1px마다 반응해야 하는 작업이 아니라,

리사이즈를 끝날 시점을 찾아서 적용해줘야 한다는 것.

그리고 이를 debounce라고 부른다는 것.

 

REACT useEffect() hook에서 resize 작업할 경우에 많이 적용했다.

(react 사용 예 바로가기)

 

$window.on("resize", debounce(func));

  function debounce(func) {
    //resize시 debounce적용 - 리소스 활용 최소화
    var timer;
    return function () {
      if (timer) clearTimeout(timer);
      timer = setTimeout(func, 100);
    };
  }

 

구축만 한다고, 이런 과정을 잊어버리지 말자!

웹을 구축하는 사람의 의무인 듯 하다.