Geolocation / openweathermap.org 이용방법

노마드 코더 바닐라js 강의중 해당 위도, 경도를 가지고 날씨를 나타낼 수 있는 API를 사용하는 법을

기록을 안해뒀다가는 나중에 또 찾아볼 것 같아서 기록을 해본다

---

Geolocation API는 navigator.geolocation 객체를 통해 사용할 수 있고 geolocation 객체가 존재하는 경우 위치 정보 서비스를 지원하는 것이다.

 

#현재 위치 가져오기

getCurrentPosition() 메서드를 호출해서 사용자의 현재 위치를 얻을 수 있다.

getCurrentPosition()은 사용자의 위치를 탐지하는 비동기 요청을 초기화하고, 위치 관련 하드웨어에 최신 정보를 요청한다. 위치를 알아낸 후에는 지정한 콜백 함수를 호출하고 선택적으로, 이 과정 중 오류가 발생하면 호출할 오류 콜백을 두 번째 매개변수로 지정할 수 있다. 세 번째 매개변수 역시 선택항목이며, 위치 정보의 최대 수명, 요청의 최대 대기시간, 고정밀 위치정보 여부 등의 옵션을 담은 객체이다.

navigator.geolocation.getCurrentPosition((position) => {
  doSomething(position.coords.latitude, position.coords.longitude);
});

const watchID = navigator.geolocation.watchPosition((position) => {
  doSomething(position.coords.latitude, position.coords.longitude);
});

장치가 이동했거나 더 정확한 정보를 사용할 수 있어서 위치 정보가 바뀐 경우 호출할 콜백함수를 watchPosition()메서드로 설정할 수 있고 getCurrent Position()과 같은 매개변수랄 받는다.

 

#위치 표현하기

사용자의 위치는 GeolocationPosition 객체를 담은 GeolocationCoordinates 객체를 사용하여 표현한다.

GeolocationCoordinates 인스턴스는 다수의 속성을 갖지만, 그 중 가장 많이 쓰게 될 항목은 지도의 지점을 가리킬 때 사용할 latitude(경도)와 longitude(위도)다. 따라서 대부분의 Geolocation 성공 콜백은 아래와 같이 꽤 간단한 형태이다.

 

GeolocationCoordinates 객체에서 고도, 속도, 장치의 방향, 위경도와 고도의 정확도 등 다른 다양한 정보도 가져올 수 있습니다.

function success(position) {
  const latitude  = position.coords.latitude;
  const longitude = position.coords.longitude;

  // Do something with your latitude and longitude
}

 

 

 

#openweathermap API 사용하기

https://openweathermap.org/

Сurrent weather and forecast - OpenWeatherMap

-해당 사이트에 회원가입 후 아이디를 클릭 후  My API keys 탭을 클릭 한 다음

오른 쪽 사진의 Key란에 적혀있는 API KEY를 얻는다

 

-상단의 API탭을 클릭 후 우리가 사용할 Current Weather Data API를 찾아서 API doc 클릭한다.

-API는 다른 서버와 이야기 할 수 있는 방법이다.

-상세페이지에 들어가면 해당 API를 사용하는 방법이 나오는데 API call 아래에 보면

https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API key}

을 사용해서 이 URL에 좌표를 보내 정보를 확인할 수 있다.

-Geolocation 으로 알아낸 좌표를 lat lon에 각각 적어주고 My API keys에서 알아낸 API키를 주소창에 적고 실행시키면  아래와 같은 정보를 확인할 수 있다.

 

-해당 URL을 fetch()를 사용해서 실제 URL에 갈 필요 없이 Javascript로 하여금 대신 URL을 부를 수 있다. 그렇게 되면 F12를 눌러 나오는 검사 영역에서 Network - Name에 URL을 클릭 후 Preview에 들어가면  아래와 같은 결과를 얻을 수 있다.

 

-fetch로 데이터를 요청하고 .then()메서드를 이용해 response.json()으로 json 형식의 데이터를 가져와서  다시한번 then()메서드를 사용해 data를 다루는 함수를 실행 시키면 된다.

-json형식의 데이터를 아래와 같이 data.weather, data.weather 등 위 사진에 있는데이터들을 자유롭게 사용해서 웹 화면에 자유롭게 사용할 수 있다.