이전 "서울시 실시간 미세먼지 상태" 데이터를 받아오고 개발자도구 console창에 수신 여부를 확인하는 Fetch를 연습해왔다.
이제 실제로 HTML 웹페이지에서 받은 데이터를 필요한 부분을 뽑아내서 표현까지 할 수 있는지 실습했다.
1. 지역구마다 미세먼지 농도를 체크 할 수 있는 간단한 HTML 페이지를 생성
기초 HTML 뼈대는 다음과 같다.
특별한것은 없지만
button 태그에서 onclick event로 q1이라는 함수를 불러오는데
이때 fetch가 작동하고 데이터를 불러오고 불러온 데이터를 html에 기록하도록 하는 것이 목표이다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>미세먼지 API로Fetch 연습하고 가기!</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
</style>
<script>
function q1() {
// 여기에 코드를 입력하세요
}
</script>
</head>
<body>
<h1>Fetch 연습하자!</h1>
<hr/>
<div class="question-box">
<h2>1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기</h2>
<p>모든 구의 미세먼지를 표기해주세요</p>
<p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
<button onclick="q1()">업데이트</button>
<ul id="names-q1">
<li>중구 : 82</li>
<li>종로구 : 87</li>
<li>용산구 : 84</li>
<li>은평구 : 82</li>
</ul>
</div>
</body>
</html>
JavaScript
복사
Fetch 전 하드코딩된 지역별 내용은 다음처럼 나타난다.
2. Fetch 기본 골격 코드와 OpenAPI 코드를 통해 데이터를 받아오자.
Fetch 기본 골격
fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
console.log(data)
})
JavaScript
복사
OpenAPI URL :
console.log 주석들을 통해 정상적으로 데이터가 들어오는지 확인한다.
function q1() {
// 여기에 fetch 골격부터 코드를 입력// URL "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99" 로 변경
fetch("http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99").then(res => res.json()).then(data => {
// 데이터 들어오는지 확인// console.log(data)
let rows = data['RealtimeCityAir']['row']
// 데이터 들어오는지 확인// console.log(rows)//html에 강제입력되있는것 비워주고
$('#names-q1').empty()
// 반복문으로 들어오는지도 확인
rows.forEach((a) => {
// console.log(a)
})
JavaScript
복사
3. 데이터가 들어오는 것을 확인했으면 HTML에 기록되도록 해보자
append 를 통해 HTML의 names-q1이란 id를 가진 list 태그에 누적되도록 반복문을 작성했다.
반복문에 조건문을 추가하여
미세먼지 농도인 'gu_value' 값이 100 이상일 경우에 <li class = "bad"> 라는 클래스 속성이 부여된 리스트 태그를
그 외 아닌 경우엔 일반적인 <li> 태그를 부여하는 것으로 구분
"bad" 클래스는 css style에서 빨간색 글씨로 표현되도록 지정했다.
function q1() {
// 여기에 fetch 골격부터 코드를 입력// URL "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99" 로 변경
fetch("http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99").then(res => res.json()).then(data => {
// 데이터 들어오는지 확인// console.log(data)
let rows = data['RealtimeCityAir']['row']
// 데이터 들어오는지 확인// console.log(rows)//html에 강제입력되있는것 비워주고
$('#names-q1').empty()
// 반복문으로 들어오는지도 확인
rows.forEach((a) => {
// console.log(a)let gu_name = a['MSRSTE_NM']
let gu_value = a['IDEX_MVL']
console.log(gu_name,gu_value)
// 이렇게 원하는 값만 추출되는 것을 개발자도구로 확인했으면// HTML에 넣을 차례//JSON 넣는 공식? 항상 반복되는 사이클 ://데이터를 가져온다 => 데이터중에서 list화시킬 부분을 추린다 => 반복문을 돌면서 => 필요한 정보만 꺼내고 => 조건문을 붙여서 구분한다// ' ` '백틱 Backtick을 사용하고 있다.// 백틱 문자열 내부에 변수 사용// ex) const backtick = `this is ${val} backtick`;let temp_html = ``
if(gu_value>100){
temp_html = `<li class="bad">${gu_name} : ${gu_value}</li>`
} else{
temp_html = `<li>${gu_name} : ${gu_value}</li>`
}
$('#names-q1').append(temp_html)
})
})
}
JavaScript
복사
조건문으로 append 부분을 추가 할 때
' ` ' (백틱) Backtick을 사용하고 있다.
백틱 문자열 내부에 변수 사용
ex) const backtick = `this is ${val} backtick`;
let temp_html = ``
if(gu_value>100){
temp_html = `<li class="bad">${gu_name} : ${gu_value}</li>`
} else{
temp_html = `<li>${gu_name} : ${gu_value}</li>`
}
$('#names-q1').append(temp_html)
JavaScript
복사
백틱을 배우긴 했었지만
어느부분에서 쓰는지 확실하지 않아
추가적인 스터디가 필요하다. 참고할 페이지를 기록해두었다.
