js api

function ok(inf){
    console.log(inf);
}
function wrong()
{
    console.log("error");
}
navigator.geolocation.getCurrentPosition(ok,wrong);

위치 정보를 불러오기 위해 navigator.geolocation 사용.

getCurrentPosion(성공 , 실패 )을 이용해 위치 사용권한을 얻었을때, 실패했을때 실행할 함수를 지정.

ok함수의 인자에 경도,위도가 담겨있다.

날씨 api 제공

https://openweathermap.org/ 사용.

api 키를 발급받고 제공 url에 구한 경도,위도를 넣고 사용함. 해당 url로 fetch()를 사용한다.

fetch는 Promise.

Promise는 당장 바로얻을 수는 없지만 가까운 미래에 얻을 수 있는 어떤 데이터에 접근하기 위한 방법을 제공

지금 원하는 데이터를 얻을 수 없다는 것은 데이터를 얻는데까지 delay가 발생하는 것.

위에서 api를 사용하고 있는 것 처럼 Network를 통해 데이터를 얻을때 사용.

위 api 에서 response 형태 json으로 데이터를 제공.

function ok(inf){
    console.log(`you are in ${inf.coords.latitude} ${inf.coords.longitude}`);
    const lat=inf.coords.latitude;
    const lon=inf.coords.longitude;
    const api=""
    const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${api}`;
    console.log(url);
    fetch(url)
    .then((response) => response.json())
    .then(data => {
        console.log(data.name);
    })
}
function wrong()
{
    console.log("error");
}
navigator.geolocation.getCurrentPosition(ok,wrong);

해당 url의 데이터를 fetch를 통해 GET 방식 HTTP 통신으로 데이터를 가져옴

json 형태의 응답을 받아오고, 받아왔다면 해당 데이터의 name 부분을 콘솔에 출력함.

온도를 화씨 형태로 나타내고있기에 사이트에 지시된대로 url 뒤에 &units=metric 삽입 후 섭씨 온도로 데이터를 받음.

 

function ok(inf){
    console.log(`you are in ${inf.coords.latitude} ${inf.coords.longitude}`);
    const lat=inf.coords.latitude;
    const lon=inf.coords.longitude;
    const api="45fe3a23c3fad549a661fbc0df0ad6be"
    const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${api}&units=metric`;
    console.log(url);
    fetch(url)
    .then((response) => response.json())
    .then(data => {
        const city = data.name;
        const temp = data.main.temp;
        const printWeather = document.querySelector("#weather span:first-child");
        const printTemp = document.querySelector("#weather span:last-child");
        printWeather.innerText = city;
        printTemp.innerText = temp
    })
}
function wrong()
{
    console.log("error");
}
navigator.geolocation.getCurrentPosition(ok,wrong);

html에 만들어둔 weather id를 갖는 div 속 span 두개의 innertext에 넣어준다.