[JavaScript] 기상청 단기예보 조회서비스 API 사용하기

※ 해당 작성글은 광전 IT에서 주최한 코드마스터 선발대회 참여를 위해 제작한 "오늘 뭐먹지?" 프로젝트에서 활용한 API 사용법입니다.

>> 프로젝트 바로가기

---

공공 데이터 포털 (data.go.kr)은 공공기관에서 생성 또는 취득하여 관리하고 있는 공공데이터를 파일데이터, 오픈API, 시각화 등의 방식으로 사용자에게 제공하는 대한민국 공식 사이트입니다.

"오늘 뭐먹지?" 프로젝트는 날씨에 따라 맞춤 식당을 추천해주는 사이트로 현재 날씨에 대한 데이터를 필요로합니다.

---

1. API를 제공해주는 사이트인 공공 데이터 포털에서 회원가입 후 API사용을 위한 Key를 발급받습니다.

2. 기상청 단기예보를 검색해 오픈 API탭에서 활용신청을 누릅니다.

3. 마이페이지 > 데이터 활용 > Open API > 활용신청 현황에서 신청한 API를 클릭해 상세페이지로 이동합니다.

4. 스크롤을 내려 활용신청 상세기능정보에서 필요한 데이터의 미리보기를 누릅니다.

여러 값을 입력할 수 있게 되어있는데 dataType과 base_date를 변경 후 미리보기를 눌러줍니다.

5. 응답값이 올바르게 나타난 것을 확인할 수 있습니다.

6. 페이지의 주소를 복사합니다.

페이지의 주소를 보면 key와 작성했던 입력값등이 나타나있습니다.
이는 입력값만 잘 작성해 url에 접속하면 응답값을 얻을 수 있다는 뜻입니다.
우리는 이를 이용해 프로젝트 내의 JavaScript에서 getJSON이나 ajax를 통해 날씨 정보를 얻을 것입니다.

7. JavaScript에서 사용하기
프로젝트 내의 js파일의 일부입니다.

JavaScript

$.getJSON(
	"https://apis.data.go.kr/1360000/VilageFcstInfoService_2.0/getUltraSrtFcst?serviceKey=KEY&pageNo=1&numOfRows=1000&dataType=JSON&base_date=" + todayString + "&base_time=" + currentTime + "&nx=" + xy.x + "&ny=" + xy.y + "",
    function (data) {
      	~~~
	}
);

복사한 url에서 값이 변경될 부분을 변수로 바꿔 처리한 후 getJSON으로 응답 요청을 보냅니다.

※ 변수 값의 자세한 설정은 script.js에서 210번째 줄에 있는 getWeather()의 내용을 확인바랍니다.

8. 응답 데이터

응답 데이터는 data에 담깁니다.

JavaScript

$.getJSON(
	"https://apis.data.go.kr/1360000/VilageFcstInfoService_2.0/getUltraSrtFcst?serviceKey=KEY&pageNo=1&numOfRows=1000&dataType=JSON&base_date=" + todayString + "&base_time=" + currentTime + "&nx=" + xy.x + "&ny=" + xy.y + "",
    function (data) {
      	console.log(data)
	}
);

우선 응답 데이터가 어떤식으로 반환되는지 확인하기 위해 콘솔에 띄워봅시다.

data.response.body.items.item에 응답값이 담겨있는 것을 확인할 수 있습니다.

응답데이터는 사용자가 바로 파악하기 힘든 변수와 값들로 이루어져있습니다.
이는 API의 상세페이지에서 참고문서를 다운받아보면 자세한 설명이 나와있습니다.

상세페이지에서 참고문서.zip을 다운받아 열어보면

다음과 같이 변수의 설명과 변수값의 의미가 무엇인지 나와있습니다.

예를 들어 현 시간에서 category가 SKY인 값은 data.response.body.items.item[5]이므로
data.response.body.items.item[5].fcstValue의 값이 0~5이면 "맑음"이라고 해석이 가능합니다.
이를 응용하여 변수값에 따라 작동하는 function을 작성하면 현재 날씨에 따라 작동하는 기능이 구현됩니다.

---

9. 요약

1. 공공 데이터 포털 (data.go.kr)에서 회원가입과 key발급
2. 필요한 API 검색 후 신청 (기상청_단기예보)
3. 입력값 확인 후 요청 방법 확인 (url에 파라미터 작성하여 접속)
4. 응답값 확인후 가공 (참고문서 확인)

10. 마무리

이 프로젝트에서는 script.js의 255~265줄에서 iconInit(data)이나 scoreInit(data)같은 function에서 응답데이터를 가공하여 사용하고 있습니다.
데이터의 기발한 가공이 아닌 데이터를 올바르게 받아올 수 있는지에 초점을 둔 기초 프로젝트입니다.
사용법에 대한 참고만 하시고 다양한 응용을 해보시길 바랍니다.