반응형
8,9강. Fetch 시작하기(1),(2)
Fetch: 서버에서 데이터를 갖고 와 활용할 수 있음
prac2.html 참조
코드스니펫, Fetch의 기본골격
fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
console.log(data)
})
10,11강. Fetch 연습하기(1),(2)
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>미세먼지 API로Fetch 연습하고 가기!</title>
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
.bad{
color: red;
}
</style>
<script>
function q1() {
let rows = data['RealtimeCityAir']['row']
$('#names-q1').empty()
rows.forEach((a) => {
let gu_name = a['MSRSTE_NM']
let gu_mise = a['IDEX_MVL']
let temp_html = ``
if (gu_mise > 40) {
temp_html = `<li class = "bad">${gu_name} : ${gu_mise}</li>` back tik 주의!
} else {
temp_html = `<li>${gu_name} : ${gu_mise}</li>`
}
$('#names-q1').append(temp_html)
})
})
}
</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>
12,13강.Fetch 퀴즈(1),(2)
따릉이 Open API: http://spartacodingclub.shop/sparta_api/seoulbike
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Fetch 연습하고 가기!</title>
<!-- JQuery를 import 합니다 -->
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
table {
border: 1px solid;
border-collapse: collapse;
}
td,
th {
padding: 10px;
border: 1px solid;
}
.red{
color: red;
}
</style>
<script>
function q1() {
let rows = data['getStationList']['row']
$('#names-q1').empty()
rows.forEach((a) => {
let name = a['stationName']
let rack = a['rackTotCnt']
let bike = a['parkingBikeTotCnt']
// 조건문에서 backtik 주의!!----------------------->조건문에서 backtik주의!!!
let temp_html = ``
if (bike < 5) {
temp_html = `<tr class = red>
<td>${name}</td>
<td>${rack}</td>
<td>${bike}</td>
</tr>`
} else {temp_html = `<tr>
<td>${name}</td>
<td>${rack}</td>
<td>${bike}</td>
</tr>`
}
$('#names-q1').append(temp_html)
})
})
}
</script>
</head>
<body>
<h1>Fetch 연습하자!</h1>
<hr />
<div class="question-box">
<h2>2. 서울시 OpenAPI(실시간 따릉이 현황)를 이용하기</h2>
<p>모든 위치의 따릉이 현황을 보여주세요</p>
<p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
<button onclick="q1()">업데이트</button>
<table>
<thead>
<tr>
<td>거치대 위치</td>
<td>거치대 수</td>
<td>현재 거치된 따릉이 수</td>
</tr>
</thead>
<tbody id="names-q1">
<tr>
<td>102. 망원역 1번출구 앞</td>
<td>22</td>
<td>0</td>
</tr>
<tr>
<td>103. 망원역 2번출구 앞</td>
<td>16</td>
<td>0</td>
</tr>
<tr>
<td>104. 합정역 1번출구 앞</td>
<td>16</td>
<td>0</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
temp_html = `` 여기에서 backtik을 조심하자!
조건문에서 `` 놓쳐서 오류났었음
JQuery와 Fetch이용시 <head></head>안에 src가 import 됐는지 확인하기!!
정리.
Javascript : 움직이게 할때 사용
JQuery: id값으로 지적하고 움직이게 할때 사용
Fetch: API를 통해 data를 가지고와서 작업을 할때 사용
숙제.스파르타피디아에서 JQuery와 Fetch이용하여 현재 서울의 날씨 입력하기
<script>
$(document).ready(function () { }); --------> 클릭하지 않아도 웹을 열자마자 실행되게 함
</script>
숙제완료
<script>
$(document).ready(function () {
fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then((res) => res.json()).then((data)=>{
let number = data['temp']
$('#temp').text(number)
});
});
</script>
</head>
<body>
<div class="mytitle">
<h1>내 생애 최고의 영화들</h1>
<div>현재 서울의 날씨 : <span id="temp">20</span>도</div>
<button>영화 기록하기</button>
</div>
2주차 강의 후기.
지난주만 해도 강의를 눈으로만 보는 느낌이었는데 두번째로 직접해보니 이제야 머릿속에 들어오는 느낌이 든다.
쉬운 웹사이트는 만들수 있을것만 같은 자신감이 살짝 생기는 날이었다 ㅎㅎ
이 자신감을 토대로 끝까지 잘 완주했으면 좋겠다
3주차 부터는 저녁준비하고 들으면서 다음 장에 후기를 남겨야겠다.
반응형
'TIL' 카테고리의 다른 글
| [23.05.14.]웹개발종합반 4주차 (0) | 2023.05.14 |
|---|---|
| TIL[23.05.12.]웹개발종합반 3주차 (1) | 2023.05.12 |
| TIL[23.05.11.]웹개발종합반 3주차 (0) | 2023.05.11 |
| TIL[23.05.11.]웹개발종합반 2주차 전반 (1) | 2023.05.11 |
| TIL[23.05.09.]웹개발종합반 1주차 (0) | 2023.05.09 |
