자바스크립트로 날씨 앱 만들기

자바스크립트로 날씨 앱 만들기

🎀완성된 모습🎀

튜토리얼: https ://www.youtube.com/watch?v=wPElVpR1rwA&feature=emb_title
날씨 API : https://openweathermap.org/api
날씨 아이콘 : https://darkskyapp.github.io/skycons/

구현하고자 하는 기능

1. 웹페이지가 로드 되면 현재 접속한 곳 위치 가져오기
2. openweathermap 에서 가져온 위치 값으로 현재 날씨 정보 가져오기
3. skycons 아이콘 가져오기

새롭게 알게 된 부분

1. 사용자 위치 정보 가져오기
사용자의 위치 정보는 신원정보를 나타내는 navigator web api를 통해 가져 올 수 있다. 여러 속성 중 geolocation을 사용하면 장치의 위치정보에 접근 할 수 있는 객체를 반환한다.
현재 위치 정보는 getCurrentPosition() 메서드를 이용하여 가져올 수 있고 해당 메서드는 사용자의 위치가 확인된 경우 실행하는 콜백함수를 받는다.

function getLocation() {
  let lon; //경도
  let lat; //위도

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition((position) => {
      lon = position.coords.longitude.toFixed(2);
      lat = position.coords.latitude.toFixed(2);
      linkToApi(lon, lat)
    })
  }
}

2. fetch()
현재 날씨를 알 수 있는 api를 통해서 데이터를 가져오고자 할때에는 fetch()를 사용하여 가져왔다.

//fetch() syntax
fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(JSON.stringify(myJson));
  });