hook 썸네일형 리스트형 React 앱에서 Device Orientation API 활용하기 모바일에서 기기의 기울기와 방향을 읽어 게임, AR, 파노라마 뷰어, 컴퍼스 등 몰입형 UI를 만들고 싶다면 Device Orientation API를 활용하면 됩니다. React에서는 훅으로 추상화해 권한 요청, 이벤트 구독, 성능 최적화까지 깔끔하게 관리하는 것이 실무적으로 가장 안전합니다.1. 브라우저 지원과 권한 모델대부분의 모바일 브라우저가 deviceorientation 이벤트를 지원합니다. 다만 iOS Safari는 사용자 제스처를 통한 명시적 권한 요청이 필요하며, HTTPS 환경에서만 동작하는 점을 유의해야 합니다. iOS 13+에서는 DeviceMotionEvent.requestPermission, iOS 16+에서는 DeviceOrientationEvent.requestPermissi.. 더보기 React와 Firebase Firestore 실시간 데이터 연동하기 React에서 Firebase Firestore를 이용해 실시간으로 데이터가 흐르는 UI를 만드는 방법을 정리했습니다. onSnapshot으로 구독하고, CRUD를 구성하며, 커스텀 훅으로 재사용성을 높이는 실무 패턴을 다룹니다.1. 목표와 개요- 실시간 데이터: Firestore의 onSnapshot으로 컬렉션/문서 변경을 즉시 반영합니다.- 안전한 CRUD: 서버 타임스탬프와 최소한의 검증으로 안정적인 쓰기를 구성합니다.- 재사용성: 커스텀 훅으로 구독 로직을 캡슐화합니다.- 성능/비용: limit, 인덱스, 옵저버 해제 등 필수 최적화를 적용합니다.2. 설치와 초기 설정프로젝트에 Firebase를 설치하고 Firestore 인스턴스를 초기화합니다. Vite 기준 환경변수를 사용합니다.// 1) 설치.. 더보기 이전 1 다음