[노마드코더] 바닐라 JS로 크롬앱 만들기 마지막(quotes, weather)

 

 

 

 

quotes.js

 

const quotes = [
    {
        quote: "quote1",
        author : "author1",
    },
    {
        quote:"quote2",
        author : "author2",
    },
    {
        quote:"quote3",
        author : "author3",
    }
];

const quote = document.querySelector("#quote span:first-child");
const author = document.querySelector("#quote span:last-child");

const todaysQuote = quotes[Math.floor(Math.random()*quotes.length)];

quote.innerText = todaysQuote.quote;
author.innerText = todaysQuote.author;

 

 

Math.random()으로 0에서 1 사이의 랜덤한 숫자를 구하고, 배열의 길이만큼 곱한다음 Math.floor함수로 내림을 시켜

랜덤하게 배열의 원소값에 접근할 수 있다. 

 

 

 

 

 

 

 

weather.js

const API_KEY ="257cd785da8e81044d1b8f52ed02bab1";

function onGeoOk(position){
    const lat = position.coords.latitude;
    const lon = position.coords.longitude;
    console.log("You live it", lat, lon);
    
    const url = `http://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`;
    console.log(url);
    fetch(url)
        .then((response) => response.json())
        .then((data) => {
            const country = document.querySelector("#weather span:first-child");
            const city = document.querySelector("#weather span:nth-child(2)");
            const weather = document.querySelector("#weather span:last-child");
        country.innerText = data.sys.country; 
        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);

 

 

 

1. 현재 위치(위도, 경도) 가져오기

 

 

navicator.geolocation.getCurrentPosition(success[, error[, [options]])

 

 

 

success 함수는 GeolocationPosition object하나를 입력받는다.

즉, javascript가 하나의 input 파라미터로 GeolocationPosition object를 주고 현재 position을 가져올 수 있다. 

 

콘솔창에서 그 안에 있는 위도와 경도를 가져온다.

 

 

 

 

 

2. 숫자를 장소로 바꿔주기 

 

 

 

 

 

위도, 경도 숫자들을 장소로 바꿔줄 서비스를 이용해야 한다. 

 

https://openweathermap.org/current

Current weather data - OpenWeatherMap

 

 

 

 

이 사이트에서 회원가입을 하고 

 

By geographic coordinates 

 

에서 url을 복사하고 {lat} {lon} {API KEY} 부분에 각각

아까 얻어온 lat, lon 숫자와 사이트 본인 정보-API keys 에 가서 API key 를 복사해 넣는다.

latitude, longitude API key 와 함께 API를 부르는 것! 

 

 

 

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

 

 

 

 

javascript에서 url을 부르는 방법 

 

 

방금 url을 복사해 변수 url을 만든다.

lat, lon, api key 부분에 geolocation 에서 얻은 변수들을 넣어준다.

 

섭씨 온도를 얻기 위해 URL뒤에 units=metric 추가해준다.

 

그리고 fetch를 사용해서 URL을 얻는다.

 

 

 

구글 크롬의 network에 가면 wifi(인터넷)에서 어떤 일이 일어나는지 보여주는데,

이곳에서 javascript가 fetch를 사용해 url을 요청한 것을 볼 수 있다. 

실제 URL에 갈 필요 없이 javascript가 대신 URL을 부르는 것이다.

 

 

fetch가 작동하는 방법은 간단하지 않다.

fetch는 당장 뭔가 일어나지 않고, 시간이 걸리고 서버가 응답한 후에 일어난다.

서버의 응답을 기다려야 하기 때문에 

then()을 사용한다.

 

 

 

  fetch(url).then(response => response.json()).then(data => {
         console.log(data.name, data.weather[0].main);
     });

 

 

 

url을 fetch하고, 그 다음으로 response를 받는다.

내용을 추출한 다음, data를 얻는다. 위에선 데이터의 이름(지역), 날씨를 출력했다.

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

드디어 강의는 끝! CSS 작업만 남았다.

챌린지 과제도 끝났고 아마 졸업할거 같다. (졸업하면 할인쿠폰받는다 아싸) 과제도 한번도 안빼먹었고 하루하루 열심히 진도 맞춰서 한 내자신 칭차내.