Couch Coding ( 카우치 코딩 ) - Geolocation API 사용하여 사용자 현재위치 가져오기

이 포스트에서는 geolocation API를 사용하여 사용자의 현재 위치를 가져오는 기능을 구현 해 볼 것이다.

 

우리 팀이 카우치코딩에서 개발하고 있는 CampUs 서비스는 메인페이지에서 사용자의 위치를 기반으로 

사용자 주변 캠핑장을 추천해주는 기능을 제공하고있다. 

 

이 기능을 개발하기 위해서는 메인페이지에 들어가자마자 사용자의 현재위치를 알아내는 것이 중요하다 !

 

현재위치를 받기 위해서는 navigator 객체를 사용해야 한다.

 

 

navigator.geolocation.getCurrentPosition(위치를 받은 다음 실행할 함수, 에러가 발생 했을 때 실행할 함수);

 

 

navigator 객체는 브라우저 공급자 및 버전 정보 등을 포함한 브라우저에 대한 다양한 정보를 저장하는 객체이다 .

 

getCurrentPosition() 메서드를 이용하여 사용자의 위치를 알 수 있다. 

첫번째 인자에는 위치를 성공적으로 받은 다음 실행 할 함수, 두번째 인자에는 에러가 발생했을 경우에 실행할 함수를 넣어준다 .

 

세번째 함수는 선택사항으로 3가지의 옵션을 추가할 수 있다.

 

1. maximumAge - 캐시에 저장한 위치정보를 대신 반환할 수 있는 최대 시간을 나타내는 양의 long 값입니다. 0을 지정한 경우 장치가 위치정보 캐시를 사용할 수 없으며 반드시 실시간으로 위치를 알아내려 시도해야 한다는 뜻입니다. infinity를 지정한 경우 지난 시간에 상관없이 항상 캐시에 저장된 위치정보를 반환해야 함을 나타냅니다. 기본 값은 0입니다.

2. timeout - 기기가 위치를 반환할 때 소모할 수 있는 최대 시간(밀리초)을 나타내는 양의 long 값입니다. 기본 값은 infinity로, 위치를 알아내기 전에는 getCurrentPosition()이 반환하지 않을 것임을 나타냅니다.

3. enableHighAccuracy - 위치정보를 가장 높은 정확도로 수신하고 싶음을 나타내는 불리언 값입니다. true를 지정했으면, 지원하는 경우 장치가 더 정확한 위치를 제공합니다. 그러나 응답 속도가 느려지며 전력 소모량이 증가하는 점에 주의해야 합니다. 반면 false를 지정한 경우 기기가 더 빠르게 반응하고 전력 소모도 줄일 수 있는 대신 정확도가 떨어집니다. 기본 값은 false입니다.

- MDN

 

 

이제 코드를 보면서 천천히 이해해보자 

 

 

  const [geolocation, setGeolocation] = useState({
    lat: null,
    long: null,
  });

  function getLocation() {
    let lat, long;
    if (navigator.geolocation) {
      // 위치 권한을 허용하면
      navigator.geolocation.getCurrentPosition(
        function (position) {
          lat = position.coords.latitude;
          long = position.coords.longitude;
          setGeolocation((geolocation) => {
            return {
              ...geolocation,
              lat,
              long,
            };
          });
        },
        function (error) {
          console.error(error);
        },
        {
          enableHighAccuracy: false,
          maximumAge: 0,
          timeout: Infinity,
        },
      );
    } else {
      alert('위치 설정을 허용해주세요!');
      return;
    }
  }

  useEffect(() => {
    getLocation();
  }, []);
};

 

 

위는 geolocation 으로 현재 사용자의 위치를 받아오는 코드이다. 

 

처음 useEffect에서 getLocation() 함수를 실행하면 lat과 long이라는 변수를 선언하는데 각 위도와 경도라고 보면 된다. 

위치 권한이 허용되어 위치를 정상적으로 받아온다면 lat과 long 변수에 위도와 경도의 좌표를 넣어주고 

 

 geolocation 이라는 state에 담아준다 !

 

두번째 인자는 에러가 발생했을 경우에 실행되는 함수인데 위치 권한이 허용되어 있지 않다면  위치 설정을 허용해 달라는 alert 를 보여준다

 

세번째 인자는 선택사항 이므로 잘 보고 옵션을 설정해주도록 하자 !

 

 

성공적으로 받아와졌다면 위 사진처럼 위도와 경도가 잘 나오게 된다 ! 👍