1. 화면 사이즈 이벤트 처리하기
- 윈도우 창의 크기에 따라 처리를 분류하고 싶을 때 사용한다.
- 레이아웃의 크기를 조정하고 싶을 때 사용한다.
- resize 이벤트는 브라우저 윈도우 창의 크기가 변경될 때마다 발생한다.
문법
| 이벤트 | 발생 타이밍 |
| resize | 브라우저 윈도우 창의 사이즈 변환 시점 |
* resize 이벤트의 부하 문제 처리하기
resize 이벤트는 윈도우 창의 사이즈가 1px만 변해도 발생하며, 무거운 작업을 지속적으로 수행할 경우 부하가 생겨 시스템에 영향을 준다. 문제 해결의 한 방법으로 resize 완료 확인 후, 처리 작업을 실행할 수있다. 타이머를 사용해 완료 후 1초 이상 사이즈 변화가 없을 때 작업을 실행하도록 설정한다.
- throttle , debounce 개념이 필요!
moonspam.github.io/Throttle-and-Debounce/
스로틀(throttle)과 디바운스(debounce)
“자바스크립트 코딩 면접에서 알고 있어야 할 3가지 질문” 포스팅을 보고 디바운싱(debouncing)에 대한 부분에서 무릎을 탁!!! 하고 쳤습니다. scroll과 resize 이벤트를 사용하면서 ‘이거 로직이 복
moonspam.github.io
- 상황에 따라 matchMedia()와 DOM 사이즈의 변경을 감시하는 Resize Observer로 대체가 가능한 경우도 있다.
2. 사이즈 벗어난 화면 처리하기
- 사이즈를 벗어난 화면을 처리하고 싶을 때 사용한다.
- 스마트폰의 가로, 세로 화면 전환 시 작업을 처리하고 싶을 때 사용한다.
- matchMedia()는 인수에 따라 미디어 쿼리의 정보를 반환한다.
문법
| 메소드 | 의미 | 반환 |
| matchMedia(미디어쿼리) | 미디어 쿼리 정보 | 객체(MediaQueryList) |
| matchMedia(미디어쿼리).addListener(처리) | 미디어 쿼리 일치 시 처리 | 없음 |
| 속성 | 내용 | 타입 |
| matchMedia(미디어쿼리).matches | 미디어 쿼리 일치 여부 | 진릿값 |
matches 속성은 미디어 쿼리 일치 여부의 진릿값을 가지고 있으며, media 속성은 브라우저가 확인한 쿼리의 문자열을 가진다. matches 속성을 사용하면 브라우저 윈도우 창의 크기와 미디어 쿼리의 일치 여부를 확인할 수 있다.