• API(Application Programming Interface)란?
• open weather API로 위치기반 날씨정보 가져오기

API(Application Programming Interface)란?

• 다른 서버로부터 손쉽게 데이터를 가져올 수 있는 수단
• API는 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다.(위키백과-API)

API 사용하기

• https://openweathermap.org/에 접속하여 회원가입을 한다.
• 아래의 사진과 같이 회원가입 후 API Keys에 들어가면 사용할 수 있는 고유한 key가 주어진다.

• weather.js 코드 참고하여 작성
• API_KEY부분에 본인이 받은 고유한 Key를 작성한다.

Main » API » 5 day weather forecast » By geographic coordinates

• API call 에서 무엇을 호출하면 되는지 알려주기 때문에 위의 URL을 호출하면 된다.
• fetch 함수를 통해 네트워크 요청을 쉽게 활용할 수 있으므로 가져오고자하는 URL에 대해 변경되는 부분(위의 경우에는 위도, 경도)을 받아오도록 ${}를 활용하여 변수의 이름을 넣어준다.

• json의 어느 부분을 가져올지 확인하고 .으로 연결하여 가져온다.

  function(json){
    const temperature = json.list[0].main.temp;
    const place = json.city.name;
    weather.innerText = `${temperature} @ ${place}`;
  });
  

• 자바스크립트는 웹사이트로 request를 보내고 응답을 통해서 데이터를 얻을 수 있다.
  • 가져온 데이터를 Refresh없이도 나의 웹사이트에 적용시킬 수 있다.
  • Ex) 이메일 확인할 때 새로고침을 하지않아도 실시간으로 메일이 오는것을 확인할 수 있음

• Metric 미터법을 사용하고 싶다면 For temperature in Celsius use units=metric (섭씨 단위룰 쓰려면 units=metric을 사용)
• api fetch 끝부분에 units=metric를 추가해준다.

• API를 사용하여 날씨에 대한 정보와, 위치를 가져오는 코드를 작성해보았다.
• css를 수정하여 보기 좋게 바꿔주면 될 것 같다.

open weather API 사용하기 끝.

+)현재 Open Weather API는 무료로 사용이 어렵다고 한다… 다른 프로젝트하면서 시도했으나 사용이 안되는 이슈가 있었다.