바닐라 JS 크롬 앱 만들기 (6~8)

 

Math.random() 과 Math.floor() 를 사용하여 랜덤 명언과 랜덤 배경화면을 구현

배열에서 난수로 가져오는 것은 동일 했음.

 

const quotes = [
  {
    quote: "명언1",
    author: "저자1",
  },
  {
    quote: "명언2",
    author: "저자2",
  },
  {
    quote: "명언3",
    author: "저자3",
  },
  {
    quote: "명언4",
    author: "저자4",
  },
  {
    quote: "명언5",
    author: "저자5",
  },
]

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

let randomNumber = function(len) {
  let res = parseInt(Math.random() * len);
  return res;
}

const curQuote = randomNumber(quotes.length);
quote.textContent = quotes[curQuote].quote;
authors.textContent = quotes[curQuote].author;

 

const bgImg = [
  'chunsic1.jpeg',
  'chunsic2.jpeg',
  'corgi.jpg',
  'swan.jpg',
]

let randomImgName = bgImg[Math.floor(Math.random() * (bgImg.length))];

const img = document.createElement('img');
img.src = `img/` + randomImgName;
img.style.width = '300px';
document.body.prepend(img);

다만 img의 경우 document.createElement()로 요소를 만들고 배열에서 읽어온 이미지명을 src에 넣어주는 것이 textContent를 쓰는 방식과 다름.

 

 

- to-do 리스트는 이미 구현해봤으므로 생략함

 

 

날씨

navigator.geolocation.getCurrentPosition(성공시 콜백함수, 실패시 콜백함수) 으로 위치 좌표를 포함한 다양한 정보를 알 수 있음

두 가지의 콜백함수를 만들어서 넣어줘야 하지만 성공시 콜백함수의 경우 인자로 GeolocationPosition 값을 받을 수 있게 된다.

 

인자로 받은 GeolocationPosition 값을 확인해보면, coords 에서 위도(latitude)와 경도(longitude) 등 다양한 정보를 확인 가능함

let onGeoOk = function(position) {
  const lat = position.coords.latitude;
  const lng = position.coords.longitude;
  console.log(position);
}

let onGeoError = function() {
  console.log('Not founded');
}

navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);

 

이렇게 사용자의 위치를 읽어온 다음

이 위치를 가지고 정보를 띄워줄 api 를 준비한다

https://openweathermap.org/api

Weather API - OpenWeatherMap

위 항목의 doc으로 들어가서

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

해당 url을 사용할 것임.

lat에는 위도를, lon에는 경도를 넣고 API key의 경우 위의 사이트에서 받는 키를 의미한다. 프로필에서 My API key를 복사!

 

그러면 위도 경도에 해당하는 정보가 뜨게된다.

해당 url에 값을 넣어 fetch() 하면 개발자도구 > Network 에서 자바스크립트가 해당 url을 불러오는 것을 확인할 수 있다.

 

✚ temp(기온)이 화씨 온도지만 섭씨로 바꾸고 싶다면 url의 마지막에

&units=metric

를 추가해주면 된다.

 

 

그렇다면 weather api에서 어떻게 값을 가져오는가, 그를 위해선 fetch()로 불러온 url을 then()으로 가공해준다.

const API_KEY = 'bd8db1f879b1c4ae727fd2582620614c';

let onGeoOk = function(position) {
  const lat = position.coords.latitude;
  const lng = position.coords.longitude;
  // console.log(position);

  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 => {
      const city = data.name;
      const weather = data.weather[0].main;
      console.log(city, weather);
    });
}

let onGeoError = function() {
  console.log('Not founded');
}

navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);

. then(response => response.json()) 으로 1차적으로 fetch(url)된 정보를 json으로 받아와서

.then(data => { }) 받아온 json은 data 에 담겨, data를 통해 접근할 수 있게 되었다. 

data.weather[0].main 으로 날씨 정보를

data.name 에선 사는 곳 이름

등등이 담겨있다.

 

이 api를 사용해서 제작하는 페이지에 적용해봐야겠다.