https 썸네일형 리스트형 React 앱에서 브라우저 Notification API로 알림 보내기 브라우저 Notification API는 사용자에게 네이티브 수준의 시스템 알림을 띄울 수 있게 해주는 표준 웹 API입니다. React 앱에서도 간단한 코드로 권한을 요청하고 알림을 보낼 수 있습니다. 이 글은 실무에서 바로 적용할 수 있는 최소 예제부터 서비스 워커를 통한 백그라운드 알림까지 단계별로 정리합니다.1. 개요: 동작 원리와 필수 조건Notification API는 두 가지 축으로 나뉩니다. 페이지 컨텍스트에서 new Notification(...)으로 즉시 알림을 띄우는 방법과, 서비스 워커(Service Worker) 컨텍스트에서 registration.showNotification(...)으로 백그라운드 알림을 띄우는 방법입니다. 전자는 페이지가 열려 있고 권한이 허용된 상태에서 사용.. 더보기 React에서 모션 센서 API 활용하여 인터랙션 강화하기 모바일 웹에서 기기의 기울기, 회전, 흔들기 등 모션을 활용하면 스크롤 없이도 풍부한 인터랙션을 제공할 수 있습니다. React에서 DeviceMotionEvent와 DeviceOrientationEvent를 안전하게 사용하고, iOS 권한 처리, 성능/접근성까지 고려하는 실전 구현 방법을 정리합니다.1. 지원 현황과 권한, 보안HTTPS 환경에서만 동작하는 보안 제약이 있습니다. 로컬 개발은 https 또는 localhost에서 테스트합니다. iOS 13+ Safari는 사용자 제스처로 권한을 직접 요청해야 합니다. Android Chrome은 HTTPS에서 기본 허용되는 경우가 많습니다. 데스크톱 브라우저는 대부분 제한적입니다.핵심 체크포인트입니다. 첫째, window.isSecureContext가 .. 더보기 React 앱에서 클립보드 API 사용하기 React 앱에서 텍스트 복사/붙여넣기 경험은 전환율과 생산성에 큰 영향을 줍니다. 최신 브라우저는 navigator.clipboard로 안전하고 일관된 클립보드 접근을 제공합니다. 이 글은 실무에서 바로 쓰는 패턴과 함정을 중심으로 정리했습니다.1. 클립보드 API 핵심과 전제 조건Clipboard API는 navigator.clipboard.writeText, readText, write, read를 통해 텍스트와 바이너리를 다룹니다. 다음 전제 조건을 꼭 지켜야 합니다.- HTTPS에서만 동작합니다(개발용 localhost는 예외).- 사용자의 명시적 제스처(클릭/키입력) 내에서 호출해야 합니다.- 일부 권한은 Permissions API와 프롬프트에 의존합니다(특히 iOS/Safari의 붙여넣기).. 더보기 이전 1 다음