알고 있으면 너무 좋은 프론트엔드 웹 기술 : Beacon API
- 기존
XML HTTP Request나 Fetch API는 unload 또는 beforeunload 이벤트에서 호출 시 무시될 수 있습니다. 🚫
Beacon API는 이러한 상황에서도 URL 호출을 보장하여 데이터 전송의 신뢰성을 높여주는 웹 표준 기술입니다. ✅
navigator.sendBeacon() 함수를 사용하여 URL을 호출하며, unload 이벤트에서도 서버 요청을 항상 보장합니다. 🚀
sendBeacon 함수는 문자열, FormData, Blob 등 다양한 형식의 데이터를 POST 방식으로 서버에 전송할 수 있습니다. 📦
Beacon API는 서버로의 데이터 전송은 보장하지만, 서버로부터의 응답 결과는 확인할 수 없다는 제약이 있습니다. 📡
XML HTTP Request나 Fetch API에 비해 가볍고 빠르게 동작하여 리소스 사용량이 적습니다. ⚡
- 특히
로그아웃과 같이 unload 이벤트에서 호출되어야 하는 중요한 URL 요청을 보장하는 데 매우 유용합니다. 🚪