navigator.geolocation.getCurrentPosition()

Geolocation.getCurrentPosition() 메서드는 장치의 현재 위치를 가져옵니다.

출처: mozilla

문법

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

• 첫번째 매개변수로 위치정보를 성공적으로 가져올때 실행할 함수
• 두번째 매개변수로 위치정보를 가져오지 못했을때 실행할 함수

function onGeoOk() {}
function onGeoError() {}

• 두개의 함수를 정의해 준다

function onGeoOk() {}
  function onGeoError() {
    alert("Can't find you. No weather for you.");
  }

• alert을 이용하여 위치정보를 얻지 못하면 경고창을 띄워준다

function onGeoOk(position) {
    console.log(position);
  }
  function onGeoError() {
    alert("Can't find you. No weather for you.");
  }

• 매개변수로 JS에게서 객체를 전달 받을 자리를 만들어준다!
• 콘솔을 이용하여 어떤 객체를 전달받는지 알아보자

콘솔:

• GeolocationPosition 이라는 객체를 받게된다.
• coods(좌표)의 내용을 보면 latitude(경도)와 longitude(위도)가 나타난다.

function onGeoOk(position) {
    const lat = position.coords.latitude;
    const lng = position.coords.longitude;
    console.log("You live in", lat, lng);
  }
  function onGeoError() {
    alert("Can't find you. No weather for you.");
  }
  
  navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);

• 변수를 선언하고 위도, 경도 정보를 할당한다.
• console.log()로 위도와 경도 정보를 출력한다.

이후에 openweathermap.org에 가입 후 해당 좌표의 날씨 정보를 가져올 것이다.

API란? 기본적으로 API는 다른 서버와 이야기할 수 있는 방법이다.

const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lng}&appid=${API_KEY}&units=metric`;

• url 변수에 위도, 경도, API키를 템플릿 리터럴을 이용해서 문자열안에 변수로 지정해준다.

    fetch(url)
        .then(response => response.json()
        .then(data => {
                const weather = document.querySelector("#weather span:first-child");
                const city = document.querySelector("#weather span:last-child");
            city.innerText = data.name;
            weather.innerText = `${data.weather[0].main} / ${data.main.temp}`;
        }));

• fatch는 알아본 결과 비동기적으로 네트워크 리소스를 받아오는 함수 같음
• then 구문을 보면 response 아마도 서버에서 받아온 정보이지 않을까 싶다.
• response를 매개변수로 받아 해당 변수에 전달되는 인자를 .json() 메서드로 json의 형태로 변환하는게 아닐까.
• 다음 then 구문애 매개변수로 data를 받았다.
• 여기에 어떤 데이터가 전달 되는지 console을 찍어보겠다
  

이와같이 서버에서 받아온 날씨 정보들이 객체로 전달되어
이 값을 사용할 수 있는것 같다

function onGeoOk(position) {
    const lat = position.coords.latitude;
    const lng = position.coords.longitude;
    const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lng}&appid=${API_KEY}&units=metric`;
    console.log(url);
    fetch(url)
        .then(response => response.json()
        .then(data => {
                console.log(data);
                const weather = document.querySelector("#weather span:first-child");
                const city = document.querySelector("#weather span:last-child");
            city.innerText = data.name;
            weather.innerText = `${data.weather[0].main} / ${data.main.temp}`;
        }));
  }
  function onGeoError() { 
    alert("Can't find you. No weather for you.");
  }
  
  navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);

완성된 코드 (API 키는 넣어놓지 않았다)