brunch

매거진 개발일지

You can make anything
by writing

C.S.Lewis

by yurikim Dec 29. 2022

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

무근본 코딩...엎을뻔했다

진짜 코알못 그잡채인 내가 하기엔 무리였던 것 같다. 구조나 시스템 자체를 이해 못하니까 내가 겪고 있는 문제들은 검색을 해도 잘 나오지 않았다. 나처럼 무식하게 해결하는 사람이 없기 때문에... 어디 물어봐도 비웃음만 당할뿐 날 도와주지 않았다. 

파이썬이 reload가 되지 않는 문제를 서버탓을 하고는 오라클 클라우드에 가입했다. 이 역시 쉬운 일은 아니었다. 카드 인증에서 오류나서 두번이나 가입했다. 정말 모르는말 투성이인 와중에 우분투 하나 이해한듯...


여차저차 오라클 클라우드에 ftp프로그램을 이용해 업로드하고 nohup도 했는데 내 app.py는 그대로였다. 파일을 받아오는 방식 자체가 문제인 것 같았다.


app.py가 실행되면 그 즉시 기상청 api에서 데이터를 받아오지만, 그 후로는 꺼지지 않고 켜있는 상태기 때문에 데이터를 다시 받아올 일이 없다.... 그런것이었다. 로컬에서는 확인할때만 app.py를 실행해서 봤기 때문에 그때마다 상단의 api를 불러오는 명령어가 실행되어서 실시간 데이터가 적용됐던 것이다...

이런줄도 모르고 파이썬애니웨어 탓을 했다...^^....


주제도 모르고 너무 어려운 일을 준비없이 도전했다는 생각이 들었다. 배운걸 바탕으로 생각해본 해결방법은 두가지였다.

1. 기상청 api데이터를  db에 올린다음에 ajax로 받아온다.

2. api 데이터를 파일로 저장한다음에 ajax로 받아온다.


배운건 1번인데 1이 안되면 2를 도전해야겠다 생각했고 어찌된 일인지... 1이 잘 안됐다...

몽고디비... 파이몽고... 왜 안되는 것일까 ㅋㅋㅋ 새로고침을 아무리 눌러봐도 데이터가 올라가지 않았다...

그래서 2번으로 우회했다. 


with open('./static/weather.json', 'w') as f:
    json.dump(weather_data, f)

dic으로 모은 내 데이터를 json파일로 만들어서 해당파일로 쓰는 것이었다. 이것도 몇번이나 안됐는데

dic을 바로 json으로 바꿔서 올리는 방법으로 하니까 됐다.

처음에는 dic -> json -> 쓰기 이렇게했는데 왜인지 안됐다... 아마 속성을 틀렸겠지 싶다...

저걸 while로 묶고 schedule을 설정해서 일정 시간마다 쓰도록 만들었다.


근데 이 역시 동일 데이터만 쓰고 있었다. 그래서 위에 데이터 취합부터 전부다 schedule 안에 묶었다.

분명 이렇게 하는거 아닐꺼 같다는 생각이 진하게 든다...



와중에 서버시간 달라서 kst로 설정한 시간이 다르다... 껐다 켜야하는데 또 안될까봐 무서워서 못끄는중. realdate는 쓰지 않지만 json파일이 갱신되고있는지 확인하고싶어서 저렇게 해놨다. 


date는 기준날짜

basetime은 기준시간

rain 비오는지아닌지

fcsttime은 예보시간

skycondition은 구름량

temp는 온도....


이렇게 데이터를 ajax로 받아서 자바스크립트로 처리했다.



그런데 또 문제가 있었는데 ajax안에서 받아온 데이터를 id 안에다가 append하는데 

if구문을 써서 안에 만든 append에는 적용이 되지 않았다... 왜일까?????


그래서 데이터의 일부를 상시노출로 바꾸고 (날짜나 시간 온도 등) 배경이미지 , 색상등만 if 구문안에 남겨두었다...



두 가지 생각이 든다. 

1. 역시 비전공자가 코딩을 하기에는 복붙 외에는 한계가 있다.

2. 그래도 구현을 해보는 일은 의미있는 일이다.



디자인을 하는 일에는 대체적으로 도움이 됐다. 데이터가 없는 상태에서 상상해서 하는 일과 실제로 운용할 수 있는 데이터가 있는 상태에서 디자인을 하는 일은 매우 달랐다. 더 쉽기도, 막막하기도 했다. (내 실력으로는 운용가능한 데이터의 범위가 너무 좁았다)

외에도 반응형 적용과정에서 가로로 길게 쓴 이미지가 웹에서 잘려보이는 등의 문제를 겪었다. 이런걸 디자인할때 미리 고려해서 하면 좋을 것 같다는 생각을 했다.


추후 SUNNY -> 맑음 CLOUDY -> 구름 이런식으로 한글로 바꿔서 정방형에 가까운 비율의 이미지로 바꿔서 호환성에 문제가 없게 할 생각이다.



디자인은 처음부터 다시 하고 있고 sunny만 구현된 상태다.

열심히 넣어보았던 마퀴는 삭제됐다... 대신 애니메이션을 살짝 넣었다.


데스크탑버전



모바일버전


현재는 이런상태다... 아주 무거운 apng파일이 들어가있다....핳... 

webm파일은 호환이 어려웠다....




더이상의 문제가 발생하지 않는다면 네가지 날씨이미지만 만들어서 약간의 css를 포함해 모두 적용해서 마무리하겠다. 제발... 제발...문제야 생기지말아라...



계속 데이터가 01시 00시 이런식이 되면 int 와 str사이에서 구문오류가 난다....

어떨때는 기준시간에서 빼줘야하기때문에 int가 맞다가도 01 처럼 앞에 0이 붙으려면 문자로 인식해줘야하기때문이당...ㅜㅜ 내가 유능하다면 더 나은 코드를 짤 수 있겠지만....




해피뉴이어에는 비가 오거나 구름이 낀 화면을 캡쳐해서 올릴 수 있길...


http://weather.straydesigner.shop/

사둔 도메인에 올려두었다.




선생님덜... 오라클 클라우드 확인결제 두번이나 됐눈데... 환불 언제되남유...?????

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari