[날씨 API] OpenWeatherMap API 사용해서 날씨 및 아이콘 받아오기

0. HTML코드 작성한다.

<div id="mini_Div">
	<img class="weatherIcon" width="30px;">
	<br><b id="weatherName" style="font-size: 0.9em"></b>
 </div>

1. OpenWeatherMap사이트에 들어간다.(https://openweathermap.org)

 

2. 회원가입 후 로그인을 한다.

 

3. 로그인을 완료하면 아래와 같이 창이 바뀌는데 [API Keys]메뉴를 클릭한다.

 

4. key  박스안에 있는 키값을 복사한 후 잠시 메모장이든 어디든 메모해둔다.

 

5. 상단 메뉴바의 [API]를 클릭한다.

 

6. Current Weather Data의 [API doc] 클릭한다.

 

7. 아래 코드 찾아서 복사한다.

8. JS파일에 복사한 코드를 붙여 넣는다.

    (저는 도시이름을 'Paju'로 넣고 콘솔 찍어 보겠습니다.)

   $.getJSON('https://api.openweathermap.org/data/2.5/weather?q={도시이름 넣기}&appid={처음에 복사한 key값 넣기}', function(data) {
	console.log(data);
   });

 

9. 브라우저에서 개발자 도구(F12)를 열어서 보면 'Paju'에 대한 날씨 데이터가 받아 와진걸 볼 수 있음.

 

10. 이 데이터를 활용해서 아래와 같이 작성한다.

   $.getJSON('https://api.openweathermap.org/data/2.5/weather?q=Paju&appid=c1ca2e8c7d816fa7b87899849a331b68', function(data) {
		const icon = data.weather[0].icon; //날싸 아이콘 번호
		const iconUrl = `http://openweathermap.org/img/wn/${icon}@2x.png`; // 날씨 아이콘을 불러올 API
		const temp = `${Math.round(Number(data.main.temp) - 273.15)}°C`; // 썹씨로 온도 계산
		$('.weatherIcon').attr('src', iconUrl);
		$('#weatherName').text(`오늘의 날씨 ${temp}`);
   });

 

11. 그럼 아래와 같이 날씨 아이콘과 온도가 표시됩니다!