24.07.04 내일배움캠프 Java_6기 TIL

오늘한일

• 쉽게 배우는 웹개발 A to Z 3주차

 

강의

fetch 시작하기

'fetch'는 인터넷을 통해 데이터를 요청하고 받아오는 과정을 의미

 

fetch 기본 골격

fetch("여기에 URL을 입력")
// 이 URL로 웹 통신을 요청한다. 괄호 안에 다른 것이 없다면 GET!
.then(res => res.json())
// 통신 요청을 받은 데이터는 res라는 이름으로 JSON화 한다
.then(data => {
console.log(data) // 개발자 도구에 찍어보기
}) // JSON 형태로 바뀐 데이터를 data라는 이름으로 붙여 사용한다

 

반목문을 사용한 예시 코드

let rows = data['RealtimeCityAir']['row']
$('#names-q1').empty()
rows.forEach((a) => {
let gu_name = a[]
let gu_mise = a[]
console.log(gu_name, gu_mise)
let temp_html = `<li>${gu_name} : ${gu_mise}</li>`
$('#names-q1').append(temp_html)
})

 

if 문을 써서 조건에 따른 css 속성을 먹일 수도 있다.

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>`
		} else {
		temp_html = `<li>${gu_name} : ${gu_mise}</li>`
		}
        $('#names-q1').append(temp_html)
        });