알고 있으면 너무 좋은 프론트엔드 웹 기술 : Page Visibility API
- Page Visibility API는 웹페이지의 가시성 상태(보임/숨김)를 확인하고 관련 이벤트를 제공하는 웹 표준 API로, 페이지가 보이지 않을 때 불필요한 기능 실행을 중지하여 리소스 낭비를 막습니다. 👁️
- 웹 브라우저 최소화, 탭 전환, 다른 앱으로 가려짐 등 페이지가 사용자에게 보이지 않는 다양한 상황을 감지할 수 있습니다. 🎭
- 별도의 라이브러리 설치 없이 바로 사용할 수 있는 웹 표준 기술입니다. 🛠️
document.visibilityState 속성(visible/hidden) 또는 document.hidden 속성(true/false)을 통해 페이지의 현재 가시성 상태를 확인할 수 있습니다. 💡
visibilitychange 이벤트를 사용하여 페이지의 가시성 상태가 변경될 때마다 특정 함수를 실행하도록 등록할 수 있습니다. 🔄
- 타이머 예시처럼, 페이지가 숨겨지면 타이머를 중지하고 다시 보이면 재시작하여 불필요한 백그라운드 작업과 데이터 불일치를 방지하는 데 응용할 수 있습니다. ⏱️
- 페이지 가시성에 따라 기능을 제어함으로써 사용자 경험을 향상시키고, 리소스를 효율적으로 관리하는 완성도 높은 웹페이지를 개발할 수 있습니다. ✨
데브허브 | DEVHUB | 알고 있으면 너무 좋은 프론트엔드 웹 기술 : Page Visibility API