현생에서 과연 resize 이벤트의 지옥에서 벗어 날 수 있을까? resize 제어를 하면서 고통을 겪으면서 가장 최적의 방법을 찾았다. 아니 어쩌면 아직도 찾고 있는 중이지만 중간 정리를 위해서 기록해 본다.

💻 resize야 브라우저 과부화 멈춰

window의 resize 이벤트를 그대로 사용하면 브라우저 창 리사이즈 할 때마다 콜백 코드가 실행된다. 의도적으로 이렇게 작업해야 할 수도 있지만 그렇지 않은 경우라면 매우 비효율적이며 브라우저 과부화가 진행 된다.

일반적으로 resize 이벤트를 하는 이유는 브라우저 가로폭 길이를 구해 반응형을 구현하기 위함인데 해당 이벤트를 리사이징 할때마다 코드를 실행하는 것이 아닌 브라우저 창을 늘리고 난 후 이벤트를 실행하게 한다면 최적화 된 프로그램을 구성 할 수 있을 것이다.

💡 간단하게 해결해보기

가장 간단한 방법은 setTimeout 메소드를 사용해 최적화를 시키는 방법이다.

let delay = 500;
let timer = null;

window.addEventListener('resize', () =>{
	clearTimeout(timer);
	timer = setTimeout( () => {
		console.log('resize!');
        
        if (window.innerWidth <= 800) {
      		alert('현재 브라우저 크기가 800 이하임');
   		}
	}, delay);
});

당연히 resize 이벤트는 window가 객체 일 경우에만 실행되며, DOM의 엘리먼트 요소 일 경우에는 Resize Observer를 사용해야 한다.

그때는 몰랐고 지금은 너무나 쉬운 내용 🤗
간단한 문제인데 그때는 혼자 프로젝트를 해서 그런지 이것조차 딱 떠오르지 않았다.
지금 알았으면 됐다! 불쌍한 작년의 나!