기상청 오픈API 활용해서 날씨안내 웹서비스 만들기 2
우당탕탕 코딩공부 그래도 끝까지 해보자~ 파이썬 데이터를 스크립트로 이용
많은 시간을 쏟았다. 기상청 api 의 데이터를 교정하여 필요한 만큼만 추출하였으나, 이걸 스크립트로 받아서 if구문별로 다른 css를 적용할 수 있게 만들고 싶은데 데이터를 내보낼 수 있는 방법을 못찾았다. 실시간 데이터이기 때문에 꾸역 db에 저장할 필요가 없을 것 같았다. 게다가 db로 올리고나면 다시 스크립트로 가져올때 그 시점의 데이터 row를 가져와야 하는데 이 또한 복잡한 일이고 쌓이는 데이터도 쓸모가 없을것 같아서 직접 가져오고 싶었다.
둘째로 api를 아예 스크립트로 불러오는 방법이 있었는데, 난 이미 파이썬으로 코드를 많이 짜둔 상태였다...답답쓰...사실 이걸 서버로 올릴 계획도 안한 상태라 뭐가 맞는진 모르겠지만 파이썬에서 데이터를 스크립트로 가져오고 싶은 마음뿐이었다.
for item in items['item']:
weather_data['Date'] = item['fcstDate']
weather_data['basetime'] = basetime
if item['category'] == 'T1H':
weather_data['temp'] = item['fcstValue']
if item['category'] == 'SKY':
weather_data['sky_condition'] = item['fcstValue']
if item['category'] == 'PTY':
weather_data['rain'] = item['fcstValue']
if item['category'] == 'VEC':
weather_data['wind_direction'] = item['fcstValue']
if item['category'] == 'WSD':
weather_data['wind_speed'] = item['fcstValue']
이렇게 데이터를 짜고
def home():
return render_template('index.html', sky_condition=weather_data['sky_condition'], rain=weather_data['rain'],temp=weather_data['temp'],basetime=weather_data['basetime'])
index 보낼때 데이터를 같이 껴서 보냈다.
그리고 html에 와서
<body onload="javascript:weather_data()">
페이지가 로딩될때 실행되는 스크립트를 만들고
function weather_data() {
let sky_condition = {{sky_condition}}
let rain = {{rain}}
let temp = {{temp}}
let basetime = String({{basetime}}).substr(0,2)
if (basetime > 12) {
basetime = basetime / 2
}
console.log(basetime)
{{}}를 이용해 데이터를 let 해주었다... 이제 값을 쓸 수 있는 상태가 된 것이다.... 그리고 if 를 만들어서
let temp_html = ``
if (sky_condition == 1) {
temp_html = `<h1>맑음</h1>`
} else if (sky_condition == 3) {
temp_html = `<h1>구름</h1>`
} else if (sky_condition == 4) {
temp_html = `<h1>구름많음</h1>`
}
else if (rain == 1||rain == 2||rain == 5||rain == 6) {
temp_html = ` <h1>비</h1>`
} else if (rain == 3||rain == 7) {
temp_html = `<h1>눈</h1>`
}
$('#weather_condition').append(temp_html)
이렇게 엉망진창 if 대잔치로 5가지 속성을 만들었다...
index 페이지에는 현재 이렇게 뜨고있다, 가져온 속성의 하늘상태/강수량/기온/기준시간의 네가지를 일단 가져오고 있다. h1으로 표시된게 if구문으로 띄운 결과물이다... 이제 저 안에다가 서로 다른 스타일이 적용된 날씨별 이미지를 만들면 된다... ㅜㅜ이렇게 돌아가는거 아닌것같은데.................................................
끝까지 일단 해보는걸로....
