React 컴포넌트의 Geolocation API

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options)은 기기의 위치를 한 번 요청합니다. 성공 콜백은 GeolocationPosition 객체를 받습니다. 버튼을 클릭했을 때 가장 가까운 매장을 찾는 것처럼 위치가 한 번만 필요할 때 적합하며, 지속적인 이동을 추적할 때는 적합하지 않습니다.

navigator.geolocation.watchPosition(successCallback, errorCallback, options)은 기기 위치가 변경될 때마다 콜백을 계속 호출합니다. 이 메서드는 숫자형 watchId를 반환합니다. 위치를 최신 상태로 유지해야 하는 배송 추적이나 턴바이턴 내비게이션 같은 실시간 사용 사례에 적합합니다.

GeolocationPosition 객체에는 latitude, longitude, accuracy(미터 단위)가 포함된 coords 속성이 있습니다. 추가 선택 필드로 altitude, altitudeAccuracy, heading, speed가 있습니다. timestamp 필드에는 위치를 얻은 시각이 기록됩니다.

오류 콜백은 숫자형 code 속성을 가진 GeolocationPositionError를 받습니다. 코드 1은 PERMISSION_DENIED(사용자가 거부함), 코드 2는 POSITION_UNAVAILABLE(하드웨어 또는 네트워크 오류), 코드 3은 TIMEOUT(요청 시간이 너무 오래 걸림)을 의미합니다. 세 경우를 항상 모두 처리하십시오.

watchPosition 리스너는 중지할 때까지 계속 실행됩니다. useEffect에서 navigator.geolocation.clearWatch(watchId)를 호출하는 정리 함수를 반환하십시오. 정리를 잊으면 컴포넌트가 마운트 해제된 후에도 감시가 계속 실행되어 배터리를 소모하고 마운트 해제된 상태를 업데이트할 수 있습니다.

useGeolocation 훅은 네 가지 값 중 하나를 가질 수 있는 상태 상태를 관리합니다. idle은 아직 요청하지 않은 상태이고, loading은 요청이 진행 중인 상태이며, success는 위치를 받은 상태이고, error는 실패한 상태입니다. 또한 상태에 position과 errorMessage도 보관합니다. 컴포넌트는 깔끔하고 일관된 인터페이스를 제공받습니다.

사용자가 지리 위치 사용을 거부하면 이 기능에 위치 접근 권한이 필요한 이유와 브라우저 설정에서 권한을 다시 활성화하는 방법을 설명하는 유용한 메시지를 표시하십시오. 사용자에게 원시 오류 코드를 절대 표시하지 마십시오. 위치 권한이 없어도 기능을 사용할 수 있도록 주소를 직접 입력하는 대체 수단을 제공하십시오.

대부분의 강력한 브라우저 API와 마찬가지로 지리 위치 기능은 보안 컨텍스트로 제한됩니다. 일반 HTTP 페이지에서는 navigator.geolocation이 undefined입니다. 개발 중 localhost에서는 HTTPS 없이도 작동합니다. 운영 환경에서는 항상 앱이 HTTPS를 통해 제공되도록 하십시오. 그렇지 않으면 사용자에게 권한 요청이 표시되지 않습니다.

getCurrentPosition과 watchPosition의 선택적인 세 번째 인수로 설정 객체를 전달할 수 있습니다. enableHighAccuracy: true는 더 많은 전력을 사용하는 대신 GPS 수준의 정밀도를 요청합니다. timeout은 기다릴 최대 밀리초를 설정합니다. maximumAge를 사용하면 지정된 밀리초 이내에 얻은 위치를 캐시에서 사용할 수 있습니다.

지리 위치 기능을 사용하면 "내 주변 매장 찾기", 지도에서 배송 기사 추적, 현재 도시에 기반한 날씨 표시, 위치 태그가 지정된 게시물, 사용자와 목적지 사이의 거리 계산과 같은 기능을 구현할 수 있습니다. 권한을 요청하기 전에 앱에서 사용자의 위치가 필요한 이유를 항상 명확하게 설명하십시오.

Chrome DevTools에서는 가상의 기기 위치를 설정할 수 있습니다. DevTools를 열고 점 세 개 메뉴에서 더 많은 도구를 선택한 다음 센서를 선택하십시오. 위도와 경도 좌표를 입력하여 어떤 위치든 시뮬레이션할 수 있습니다. 위치에 의존하는 기능을 테스트하기 위해 실제로 해당 장소까지 이동하는 것보다 훨씬 빠릅니다.

GeolocationPositionError의 코드가 1이라는 것은 무엇을 의미합니까?

한 번만 위치를 읽으려면 getCurrentPosition을 사용하고, 지속적으로 추적하려면 watchPosition을 사용하십시오. useEffect 정리 과정에서는 항상 clearWatch를 호출하십시오. idle, loading, success, error 상태를 관리하는 useGeolocation 훅을 작성하십시오. 권한 거부를 원활하게 처리하고, 운영 환경에서는 지리 위치 기능에 HTTPS가 필요하다는 점을 기억하십시오.