얼마전 포트폴리오를 정리하면 내 소스를 보았다.
날씨어플이였는데 당시에 구글링해서 사용했던 나의 위치찾는 로직이 눈에 들어왔다.
나는 이걸 알고 썻나? 조금 더 깊게 공부해보기로 했다.

if(!("geolocation" in navigator)){
	onError({
		code: 0,
		message: "Geolocation not supported"
	})
}else{
	navigator.geolocation.getCurrentPosition(onSuccess, onError);
	handleApi();
}

Geolocation API

Geolocation API는 사용자의 위치 정보를 사져오는데 사용되는 API이다. Geolocation API 다름과 같은 두 가지 방법으로 사용할 수 있다.

getCurrentPosition(): 현재 위치를 한 번만 가져온다.
watchPosition(): 위치가 변경될 때마다 알림을 받는다.

success(position)
위치가 변경될 때마다 호출되는 함수

error(error)
오류가 발생할 때마다 호출되는 함수입니다. (Optional)

options(Optional)
아래 옵션들을 포함하는 객체

- maximumAge
정확한 위치를 얻기 위해 GPS를 사용하도록 설정

- timeout
위치를 얻을 때까지 기다리는 시간

- enableHighAccuracy
위치가 최신 상태가 아닌 경우에도 사용하도록 허용되는 시간

getCurrentPosition()

getCurrentPosition [ 바로가기 ]

navigator.geolocation.getCurrentPosition(success, error, [options])

예시

const [position, setPosition] = useState(null);

const getPosition = async () => {
  const { coords } = await navigator.geolocation.getCurrentPosition();
  setPosition(coords);
};

const App = () => {
  return (
    <div>
      <h1>Current Position</h1>
      {position && (
        <p>
          Latitude: {position.latitude}
          <br />
          Longitude: {position.longitude}
        </p>
      )}
      <button onClick={getPosition}>Get Position</button>
    </div>
  );
};

watchPosition()

watchPosition [ 바로가기 ]

navigator.geolocation.watchPosition(success[, error[, options]])

예시

const [position, setPosition] = useState(null);

const watchPosition = () => {
  navigator.geolocation.watchPosition((position) => {
    setPosition(position);
  });
};

const App = () => {
  return (
    <div>
      <h1>Current Position</h1>
      {position && (
        <p>
          Latitude: {position.latitude}
          <br />
          Longitude: {position.longitude}
        </p>
      )}
      <button onClick={watchPosition}>Watch Position</button>
    </div>
  );
};

확실히 문서를 보니 이해가 잘된다. 거의 모든 브라우저에서 동작하지만 동작하지 않는 브라우저도 있다니 알아가야할 것 같다.