매거진 개발일지

기상청 오픈API 활용해서 날씨안내 웹서비스 만들기 1

과연 제가 이걸 해낼 수 있을까요?

by yurikim

웹개발 종합반 수업에서 정보를 받아와 결과에 따라 다른 값을 노출하는 것을 배웠다. 그래서 날씨 값을 받아와 날씨에 따라 다른 스타일의 이미지를 노출하는 서비스를 만들어보기로 하였다.


스크린샷 2022-12-10 오후 4.28.55.png

우연히 인스타그램 광고에서 이런 인터렉티브 수업이 있다는 것을 보고 어 ? 나 이거 배운건데? (어처구니 없는 자신감) 싶어서 호기롭게 시작해봄... 이 글을 쓰려고 링크받으러 들어가보니 생각보다 어마무시한스킬을 알려주는 수업이었다. 하다가 실패하면 나도 저 수업 듣는걸로...!!!!

https://coloso.co.kr/products/graphicdesign-goyunseo

광고 아닙니다. 저 강의가 멋져서 따라하려고 시작하게 되었어요. 저 사이트에는 인터렉티브도 구현되어있었으나... 그것은 내겐 아주 먼일이기때문에 날씨에 따라 다른 결과값이나 노출해보자.




먼저 날씨 api를 받아와야하는데 웹개발종합반에서는 다 정리되어있는 정보만 갖고 진행을 했었다. 하지만 현실은 정글과 같았다.

https://wikidocs.net/83104

api주소와 승인받은 코드를 강과 같은 블로그의 파이썬코드를 이용해 요청했다. 내 파이썬 화면에는 이와같이 떠있을 뿐이었다.

스크린샷 2022-12-10 오후 4.31.52.png

맑음이나 흐림 0 1 2 이런값이 나와서 블라블라가 0일땐 css 이거~ 이렇게 하려고 했는데.... 가이드를 많이 정독해야 할 것 같았다.


{"baseDate":"20221210","baseTime":"1400","category":"PTY","nx":18,"ny":1,"obsrValue":"-999"}


basedate는 오늘 12월10일이고

basetime은 14시00분

category pty는 강수량

obsrValue 는 왜 -999?? 강수 0이면 0이라구 해야되는거 아닌감...



강과 같은 블로그를 돌아보니, 좌표값을 설정한 내용은 나중에 있어서 일단 난 경기도민이지만 서울의중심인 종로구 좌표값을 찾아보기로 했다ㅋㅋㅋ 위치정보를 사용자로부터 불러올 수있으면 격자값에 대입해서 그 위치의 날씨정보도 가져올 수 있을 것 같았다...그건 다음에 배워보기로하자...핳


스크린샷 2022-12-10 오후 4.41.53.png

다시 xy값에 60과 127을 입력하고 출력해본다.


{"baseDate":"20221210","baseTime":"1100","category":"PTY","nx":60,"ny":127,"obsrValue":"0"}

pty 강수 0은 맞는 값같다.


"category":"REH","nx":60,"ny":127,"obsrValue":"29"

REH는 습도 29% 오오 된당~


근뎅 이 정보를 위에 강좌의 결과물처럼 맑음/흐림/눈/비로 쓰려면 조금 복잡할 것 같았다.

스크린샷 2022-12-10 오후 4.45.15.png

하늘 상태를 나타내는 SKY는 단기예보에 있고 맑음1,구름많음3,흐림4 이렇게 나타나있고

강수형태를 나타내는 PTY는 눈/비 따로 나타나 있었기 때문이다. 나는 실시간 하늘 상태를 이용하고자 하였는데, 초단기예보랑 초단기실황중의 두 데이터중에 선택해서 써야할 것 같았다.

스크린샷 2022-12-10 오후 4.57.26.png

pty랑 sky를 같이 보려면 초단기예보를 쓰는 것이 좋을 것 같았다. 물론 나는 스터디중이니 10분 전후나 뭐 크게 상관없고 현재시간정보만 가져와서 그걸로 쓸 예정이었다. api 제공시간이 기준시간보다 45분이나 뒤에 있고 예보에 포함되는 시간은 기준시간부터 +1시간 이기 때문에 현재시간-1시간의 예보를 가져다 써도 될 것으로 생각됐다.


base_time은 현재시간을 불러와서 -1시간하고 데이터는 sky와 pty항목을 사용하기로 했다.



sky는 맑음(1), 구름많음(3), 흐림(4) 의 세가지 항목/ PTY는 없음(0), 비(1),비/눈(2), 눈(3), 빗방울(5), 빗방울 눈날림(6), 눈날림(7)로 되어있다.


4가지 정도로 정리해서 만든다고 치면 맑음은 sky = 1 / 흐림은 sky= 3 or 4 / 비는 PTY = 1,2,5,6 / 눈은 PTY=3,7 정도로 표현할 수 있을 것 같았다.

추가적으로 불러와야 하는 데이터는 아직까지는 현재시간 정도만 필요했다. 저번에 탐독의 시간 하면서 날짜를 불러와본적이 있어서... 그 방식을 쓰면 될 것 같았다.


다음에는 index랑 py를 연결하고 스크립트랑 데이터를 연동해보겠다.

keyword
매거진의 이전글웹개발 종합반 팬명록 기능추가하기