Permissions 썸네일형 리스트형 React 앱에서 Device Orientation API 활용하기 모바일에서 기기의 기울기와 방향을 읽어 게임, AR, 파노라마 뷰어, 컴퍼스 등 몰입형 UI를 만들고 싶다면 Device Orientation API를 활용하면 됩니다. React에서는 훅으로 추상화해 권한 요청, 이벤트 구독, 성능 최적화까지 깔끔하게 관리하는 것이 실무적으로 가장 안전합니다.1. 브라우저 지원과 권한 모델대부분의 모바일 브라우저가 deviceorientation 이벤트를 지원합니다. 다만 iOS Safari는 사용자 제스처를 통한 명시적 권한 요청이 필요하며, HTTPS 환경에서만 동작하는 점을 유의해야 합니다. iOS 13+에서는 DeviceMotionEvent.requestPermission, iOS 16+에서는 DeviceOrientationEvent.requestPermissi.. 더보기 React 앱에서 클립보드 API 사용하기 React 앱에서 텍스트 복사/붙여넣기 경험은 전환율과 생산성에 큰 영향을 줍니다. 최신 브라우저는 navigator.clipboard로 안전하고 일관된 클립보드 접근을 제공합니다. 이 글은 실무에서 바로 쓰는 패턴과 함정을 중심으로 정리했습니다.1. 클립보드 API 핵심과 전제 조건Clipboard API는 navigator.clipboard.writeText, readText, write, read를 통해 텍스트와 바이너리를 다룹니다. 다음 전제 조건을 꼭 지켜야 합니다.- HTTPS에서만 동작합니다(개발용 localhost는 예외).- 사용자의 명시적 제스처(클릭/키입력) 내에서 호출해야 합니다.- 일부 권한은 Permissions API와 프롬프트에 의존합니다(특히 iOS/Safari의 붙여넣기).. 더보기 이전 1 다음