서울의 실시간 날씨 정보 OpenAPI 데이터를 받아와서 HTML 헤더 부분에 표시해주려 한다.
1. 데이터 명세
•
Contents :
◦
현재 온도 : 'temp': temp / from URL list
◦
현재 기후 : 'icon': icon / from URL list
2. 기능 구현을 위한 script.js 부분 수정 및 작성
•
OpenAPI 기본 골격
// [Temp Read]function set_temp() {
fetch("<URL>").then((res) => res.json()).then((data) => {
console.log(data)
});
}
JavaScript
복사
•
OpenAPI URL = http://spartacodingclub.shop/sparta_api/weather/seoul
•
URL에 위 OpenAPI URL을 입력(요청)하면 해당 URL 서버에서 jsonify()를 통해서 Json 형식으로 변환된 서울시 현재 날씨 데이터를 반환받게 된다.(응답 전송 단계는 해당 URL 서버가 한다.)
•
해당 데이터는 첫 번째 then() 절의 res 인자값으로 들어감
•
JavaScript로 다시 돌아와서 첫 번째 then()으로 들어간 res는 *response.json()에 의해 Promise 객체로 변환
•
해당 객체 데이터는 data라는 변수에 담겨있다.
•
이미 list 형태로 들어와서 data로부터 바로 key값을 조회하면 value를 얻을 수 있다.
•
'temp', 'icon' key의 value들을 원하는 데이터인 temp, icon(url형태) 변수에 할당하고
•
각 변수들을 HTML에 각 id위치의 내용을 empty()로 비워준 뒤 append()로 대체시켜 넣어줌
// [Temp Read]function set_temp() {
fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then((res) => res.json()).then((data) => {
console.log(data)
// 변수에 데이터 담기let temp = data['temp']
let icon = data['icon']
// HTML태그(id)에 각 데이터 비우기 후 삽입
$('#temp').empty().append(temp);
$('#icon').empty().append("<img src='"+icon+"'>");
});
}
JavaScript
복사
3. 테스트
•
Flask 서버가 실행 중인 상태
•
브라우저에서 localhost:5001 URL로 접속
•
웹 페이지 로드 직후( (document).ready() 즉시 실행 )
•
document.ready에 포함된 show_temp()실행되어 위 과정 진행
•
OpenAPI로 응답받은 데이터 가 그대로 대체되어 변경 View 페이지에 나타남
◦
현재기온: 26.66도
◦
날씨 아이콘
