[JavaScript] 수동으로 window 이벤트 발생시키기 (window.dispatchEvent)

최근에 웹 개발을 진행하면서 특정 조건 하에서 UI를 갱신해야 하는 상황이 생겼습니다. 이 문제를 해결하기 위해 `resize` 이벤트를 수동으로 발생시키는 방법을 발견했는데, 이 포스트에서는 그 방법에 대해 자세히 다루려고 합니다.

1. 수동으로 `resize` 이벤트 발생시키기

// resize 이벤트 발생시키기 window.dispatchEvent(new Event('resize'));

이 코드의 핵심은 웹 브라우저의 창을 대표하는 `window` 객체에 `resize` 이벤트를 수동으로 발생시키는 것입니다.

2. 코드 설명

• • window 객체: 웹 브라우저의 창을 대표하는 객체로, 다양한 이벤트를 바인딩할 수 있습니다. 그 중 resize 이벤트는 브라우저 창의 크기가 변경될 때 자동으로 발생합니다.
• • dispatchEvent 메서드: EventTarget 인터페이스에 정의된 메서드로, DOM의 모든 노드에서 사용할 수 있습니다. 이 메서드는 특정 이벤트를 명시적으로 발생시키기 위해 사용됩니다.
• • new Event('resize'): Event 생성자를 사용하여 resize라는 이름의 이벤트를 생성합니다.

3. 왜 이런 코드를 사용하는가?

다양한 라이브러리나 프레임워크는 `resize` 이벤트에 의존하여 동작할 때가 있습니다. 예를 들면, 사이드바 토글과 같은 UI 변화에서 화면 레이아웃을 갱신하려고 할 때 사용될 수 있습니다. 이 코드를 사용하면, 수동으로 `resize` 이벤트를 발생시켜 해당 동작을 강제로 실행시킬 수 있습니다.

++ next.js 와 이 서버사이드 렌더링이 필요하면 서버에는 브라우저의 window 객체가 없기 때문에
아래 코드처럼 분기 처리해주는게 좋습니다

 if(typeof window !== 'undefined'{
    window.dispatchEvent(new Event('resize'));
 }