brunch

매거진 개발일지

라이킷 9 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by yurikim Dec 13. 2022

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

아 하루가 지나가면 시간데이터가 줄어드는구나!

낮 시간에 테스트 할때는 6시간까지의 데이터가 너무 넘어와도 아무 상관이 없지만, 6시간 후가 익일로 넘어가게되면 문제가 되었다. fcstTime의 가장 작은 값을 가져오면 익일의 값이 넘어와버렸다... 갑자기 새벽1시 불러와서 당황스러웠음... 마침 스크립트로 만든 시간이 div안으로 잘 안들어와서 환장이던 찰나... 이렇게 하면 안그래도 예보기준이라 살짝 빗나가는데 시간까지 엉망이면 곤란했다. 데이터를 다 솔팅해야했다...

이런식으로 카테고리별로 6시간까지 나와있는 데이터를 가장 가까운 시간의 데이터만 가져오기로 했다. 다른거 다 빼고 PTY랑 SKY의 가까운시간 데이터 두개만 가져오기로 했음.

datasort = data['response']['body']['items']['item'][6] , data['response']['body']['items']['item'][18]
pprint(datasort)
weather_data = dict()

ㅋㅋ6번째꺼랑 18번째꺼가 그거여서 그렇게 가져옴... 이걸 수식으로 불러오려면 어떻게 해야할까흐흡....

무튼 무사히 데이터를 가져와서 시간을 수정할 수 있었다.

하는김에 시각부분의 앞에 두개를 잘라서 12보다 크면 12를 잘라내서 12시간 단위로 쓸 수 있게 바꿨다.

fcsttime = item['fcstTime'][0:2]
if int(fcsttime) > 12 :
fcsttime = int(fcsttime) -12
weather_data['fcstTime'] = fcsttime

구래서... 이렇게 되었음... 대환장 마퀴파티... 대체 어떻게 하는걸까욤...

여러개 반복하는것이 넘모 힘드뤄... div를 반복해서

@keyframes marquee {
  from { transform: translateX(300%); }
  to { transform: translateX(180%); }
}
@keyframes marquee2 {
  from { transform: translateX(180%); }
  to { transform: translateX(60%); }
}

@keyframes marquee3 {
  from { transform: translateX(60%); }
  to { transform: translateX(-60%); }
}

@keyframes marquee4 {
  from { transform: translateX(-60%); }
  to { transform: translateX(-180%); }
}

이렇게 위치를 맞춰서 4개의 마퀴가 반복되게 하였음.

<div class="track">
                <div class="marquee"><div>{{datetime}}| 예보시간 {{fcstTime}}시 | 서울 종로구 기준 | 현재기온 {{temp}}도</div></div>
</div><div class="track2">
                <div class="marquee"><div>{{datetime}}| 예보시간 {{fcstTime}}시 | 서울 종로구 기준 | 현재기온 {{temp}}도</div></div>
</div>
<div class="track3">
                <div class="marquee"><div>{{datetime}}| 예보시간 {{fcstTime}}시 | 서울 종로구 기준 | 현재기온 {{temp}}도</div></div>
</div>
    <div class="track4">
                <div class="marquee"><div>{{datetime}}| 예보시간 {{fcstTime}}시 | 서울 종로구 기준 | 현재기온 {{temp}}도</div></div>
</div>

핳... 이렇게 하면 되는걸까....위치는 종로구 고정... 좌표값까지 바꾸려면.. 나죽어용

datetime 형식 바꾸는것도...넘모힘두뤄 일단 기본으로 고정...

고치는동안 눈이 그쳐버렸네...