[Javascript] geoloaction으로 내 위치 가져오기

이번에는 Geolocation API 를 이용해서 내 위치 정보를 가져오고, 그 다음에 내 위치의 날씨 정보를 가져올 것이다.

 

Geolocation API 사용하기 - Web API | MDN

사용자의 현 위치 가져오기 : getCurrentPosition 매서드

사용자의 현재 위치는 getCurrentPosition() 메서드를 호출해서 가져올 수 있습니다. 이 메서드는 사용자의 위치를 탐지하는 비동기 요청을 시작하고, 위치 관련 하드웨어에 최신 정보를 요청하며, 위치를 알아낸 후 주어진 콜백 함수를 호출합니다. 선택적으로, 오류가 발생하면 호출할 콜백을 두 번째 매개변수로 지정할 수 있습니다. 또 다른 선택 사항인 세 번째 매개변수는 위치 정보의 최대 수명, 요청의 최대 대기시간, 고정밀 위치정보 여부 등의 옵션을 담은 객체입니다. - MDN

 

getCurrentPosition 매서드의 인자는 세 개이다. 첫 번쨰는 위치 파악 성공 시 호출할 콜백, 두 번째는 위치 파악 실패 시 호출할 콜백, 마지막은 옵션이다. 첫 번째는 필수이고 두 번째와 세 번째 인자는 선택사항이다. 나는 세 가지 모두 작성했다.

 

const getLoaction = () => {
  const options = {
    enableHighAccuracy: true,
    maximumAge: 3600000,
    timeout: 30000,
  };

  navigator.geolocation.getCurrentPosition(
    getLocationSuc,
    getLocationErr,
    options
  );
};

 

옵션에서 enableHighAccuracy는 정확한 위치 정보를 요청할지를 정하는 것이다.

maximumAge는 캐시된 위치 정보**의 유효 시간을 설정한다. 

timeout은 위치 정보를 얻을 때까지 기다릴 시간을 설정한다. 두 가지 모두 시간 단위는 밀리초이다.

 

** maximumAge가 잘 이해가 안되어서 좀더 찾아보았다. getCurrentPosition 을 호출하면 브라우저는 캐시에 저장되어 있는 위치 정보가 있는지 확인한다. 캐시된 결과가 있다면 그것이 현재로부터 한 시간(3600000밀리초) 내에 캐시된 것인지 확인 후 만약 한 시간 내라면 새 위치를 찾는 대신 갖고 있던 정보를 반환한다. 만약 그 정보가 1시간을 초과한 정보라면 캐시를 무시하고 새로 위치를 찾는다. 아하~! 이제 이해가 간다.

 

정보찾기에 성공했을 때 호출할 콜백과 실패했을 때 호출할 콜백은 이렇게 작성했다.

 

// 현 위치 가져오기 성공 : 위도와 경도를 바탕으로 날씨 정보 가져오기
const getLocationSuc = (position) => {
  const latitude = position.coords.latitude;
  const longitude = position.coords.longitude;

  getWeatherInfo(latitude, longitude);
};

// 현 위치 가져오기 실패 : 에러 메세지 alert 띄우기
const getLocationErr = (error) => {
  alert(`에러가 발생하여 위치 정보를 찾을 수 없습니다.\n${error.message}`);
};

 

getLocationSuc에서 console.log(position)을 쓰면 위도, 경도를 확인할 수 있다. 내 프라이버시를 위해 모자이크처리했다ㅎㅎ

 

console.log(position)

 

에러가 발생했을 때 alert창이 잘 뜨는지 확인해보자! timeout 시간을 굉장히 짧게 설정하고 확인해보니 에러 창에 메세지가 잘 입력되어 있는 것을 볼 수 있었다.

 

Timout expired 에러가 발생했다.

내 위치 정보를 바탕으로 날씨 정보 가져오기

이제 마지막으로 내 위치 정보를 바탕으로 날씨 정보를 가져와보자. getLocationSuc에서 얻은 위도와 경도를 getWeatherInfo로 전달해주었다. 

 

// 날씨 정보 가져오기 : getLocationsuc에서 넘겨받은 위도와 경도 활용
const getWeatherInfo = (latitude, longitude) => {
  const APIKEY = "API KEY";

  fetch(
    `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${APIKEY}&units=metric`
  )
    .then((res) => res.json())
    .then((result) => {
      displayWeatherInfo(result);
    });
};

 

displayWeatherInfo()에서 화면에 날씨와 온도만 화면에 나타나도록 코드를 작성해두었다. 다음에는 날씨 정보에 따라 배경화면이 바뀌도록 구현해야겠다. 끝~!

 

받아온 정보를 화면에 나타내기