웹개발 종합반 3주차
fetch
- fetch("여기에 URL을 입력")
// 이 URL로 웹 통신을 요청한다. 괄호 안에 다른 것이 없다면 GET!
.then(res => res.json())
// 통신 요청을 받은 데이터는 res라는 이름으로 JSON화 한다
.then(data => {
console.log(data) // 개발자 도구에 찍어보기
}) // JSON 형태로 바뀐 데이터를 data라는 이름으로 붙여 사용한다open api에서 필요한 정보를 가져와 웹페이지에 적용
function() 함수 내에서도 적용 가능.
$(document).ready(function () {
let url = "http://spartacodingclub.shop/sparta_api/seoulair";
fetch(url).then(res => res.json()).then(data => {
let mise = data['RealtimeCityAir']['row'][0]['IDEX_NM']
$('#msg').text(mise)
})
})
['api 테이블 제목']['필요한 값의 행'][x][필요한 값의 컬럼]: open api에서 필요한 값을 가져오기 위한 배열식. 문자는 ''를 붙일 것!
<style>
.bad {
color: red;
}
</style>
<script>
function q1() {
fetch("http://spartacodingclub.shop/sparta_api/seoulair").then((response) => response.json()).then((data) => {
$('#names-q1').empty()
let rows = data['RealtimeCityAir']['row']
rows.forEach((a) => {
let gu_name = a[]
let gu_mise = a[]
let temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
$('#names-q1').append(temp_html)
})
}
</script>open api에서 정보를 가져와 style 태그를 적용해 보기 좋게 꾸밀 수도 있음
let temp_html = ``
if (gu_mise > 40) {
temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`}
else {temp_html = `<li>${gu_name} : ${gu_mise}</li>`}
$('#names-q1').append(temp_html)//태그 id가 names-q1에 api에서 가져온 정보를 추가한다.조건문도 가능!
$(document).ready(function () {
let url = "http://spartacodingclub.shop/sparta_api/seoulair";
fetch(url).then(res => res.json()).then(data => {
let mise = data['RealtimeCityAir']['row'][0]['IDEX_NM']
$('#msg').text(mise)
})
})
웹페이지 시작할 때 바로 적용 가능한 함수: $(document).ready(function () {
-
div 나 태그에 id를 붙여 함수에서 주소를 의미하는 $('')와 함께 쓰면
-
느낀점: 3주차 강의는 모두 듣고 이제 숙제를 할 차례인데,
쉬워보이는데 막상 하려니 잊어버린 것도 많아서 잘 풀리지 않는다.
다시 1,2,3주차를 복습-정리해야 할 필요를 느끼고, 강의에서 보지 못한 코드는 chat gpt를 쓰면 정확하고 자세히 설명해줘 시간 절약이 됨.
