typescript로 날씨 api 가져오기

https://openweathermap.org/

Сurrent weather and forecast - OpenWeatherMap

사이트 들어가서 회원가입 후 오른쪽 상단의 내 프로필을 누른 뒤 My API keys 클릭

Key에 적혀 있는 값을 메모장이나 .env에 복사해 둔 뒤.

상단의 API누르고,

Current Weather Data - API doc 클릭!

API call 부분도 복사후 저장!.

그리고 Current weather data Api call 복사부분 뒤에

&units=metric

이거 붙여 넣으면 섭씨 온도로 바뀌어서 날씨 측정해줍니다.

그리고

const getJSON = function(url:any, callback:any) {

  var XMLHttpRequest = require('xhr2');

  const xhr = new XMLHttpRequest();

  xhr.open('GET', url, true);

  xhr.responseType = 'json';

  xhr.onload = function() {

    const status = xhr.status;

    if(status === 200) {

      callback(null, xhr.response);

    } else {

      callback(status, xhr.response);

    }

  };

  xhr.send();

};

출처 : https://stackoverflow.com/questions/12460378/how-to-get-json-from-url-in-javascript

How to get JSON from URL in JavaScript?

stackoverflow 에서 Json 받아오는 코드를 찾았고,

getJSON(`http://api.openweathermap.org/data/2.5/weather?q=seoul&appid={자기API}&units=metric`,

function(err:any, data:any) {

  if(err !== null) {

    alert("정확한 도시명을 입력해주세요.");

  } else {

    console.log(`현재

      날씨는

      온도 :  ${data.main.temp}°

      풍속 :  ${data.wind.speed}m/s

      습도 :  ${data.main.humidity}%

        입니다.

      오늘의

      최고기온 : ${data.main.temp_max}°

      최저기온 :  ${data.main.temp_min}°

      입니다.`

    )

  }

})

Current weather data에 자기 API 삽입후 

코드를 실행시키고, 웹사이트 console 창을 보시면 

날씨는
      온도는 7.01°
      풍속은 3.09m/s
      습도는 63%
        입니다.
      오늘의
      최고기온은 8.12°
      최저기온은 5.42°
      입니다.

이렇게 나옵니다.