[javascript] 현재 위치 정보 가져오기 위해 Geolocation 을 찾아보았다.

날씨 앱을 만들어 보던 중 현재 위치 기반으로 현재 날씨를 보여주는 앱을 만들면 좋겠다 싶어서 관련 방법을 찾아보았다(솔직히 내부적으로 어떻게 돌아가는지 잘 이해는 안 된다. 그냥 정보를 가져올 수 있네? 같은 감탄만 가득).

찾아보니 Geolocation API 가 존재했고, 다행히 자바스크립트 자체적으로 내장된 API 였다.

Geolocation API 는 사용자의 위치를 지도에 표시하거나 사용자의 위치와 관련된 개인화된 정보를 표시하기 위해 웹 앱에서 사용자의 위치 정보를 검색하려는 경우 등에 활용하는 것으로 요약하자면 현재 위치 정보를 가져오는 API 이다.

이 API는 내부적으로 다양한 인스턴스를 가지지만, 대표적으로 위치 기반 관련 정보를 포괄적으로 가져오기 위해서는

getCurrentPosition() 을 활용하는 것이 편해 보였다. 거두절미 하고, 현재 위치 기반으로 정보를 받아오기 위해서는 다음과 같이 접근하면 된다(참고로 모든 브라우저 환경에서 지원이 된다고 하더라).

navigator.geolocation.getCurrentPosition(success, error, options);


// success : 성공 시 위치정보를 전달하는 콜백함수를 실행하는 영역
// error : 실패 시 에러 메시지를 전달하는 콜백함수를 실행하는 영역
// opthions : 기타 옵션들 (아래에 참고 옵션들이 있음)

navigator.geolocation.getCurrentPosition((position)=>{
  console.log(position)
}, (error)=>{
  console.log('error:',error)
})

입력 후 브라우저의 콘솔창으로 가보면 다음과 같이 위도, 경도 뿐만 아니라 그 외 참고 정보를 얻을 수 있었다.

참고용) options 들

const options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0
};

enableHighAccuracy
응용 프로그램이 최상의 결과를 수신하려는 부울(불린) 값. 만약 true이고 기기가 더 정확한 위치를 제공할 수 있다면 응용 프로그램이 최상의 결과를 수신하려고 할 것이고. 이로 인해 응답 시간이 느려지거나 전력 소비량이 증가할 수 있다.
(예: 모바일 장치의 GPS 칩). 반면에, false인 경우, 장치는 더 빨리 응답하거나 더 적은 전력을 사용하여 자원을 절약할 수 있다. 기본값은 false

maximumAge
반환 가능한 캐시 위치의 최대 사용 기간(밀리초)을 나타내는 양수의 긴 값. 0으로 설정하면 장치가 캐시된 위치를 사용할 수 없으며 실제 현재 위치를 검색해야한다. Infinity로 설정된 경우 장치는 사용 기간에 관계없이 캐시된 위치를 반환해야 한다. 기본값은 0.

timeout
장치가 위치를 반환하는 데 걸리는 최대 시간(밀리초)을 나타내는 양수의 긴 값. 기본값은 Infinity이며, 이는 위치를 사용할 수 있을 때까지 getCurrentPosition()이 반환되지 않음을 의미.



<참고>https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition
<보면 좋은 자료> https://www.w3schools.com/html/html5_geolocation.asp