2024-09-24 GPT 웹 수업 정리 2-8 ~ 2-15

Fetch

Fetch 란 api 를 통해서 데이터를 불러오는 것으로 쉽게 생각하면 우리가 구글 주소를 브라우저에 치고 엔터 누르는것과

같다. 

fetch("URL")
.then(res => res.json())
.then(data => {
console.log(data)
})

("URL") 이 URL로 데이처를 요청한다.

받은 데이터를 res 의 이름으로 json화 시킨다.

json형태의 데이터를 data이름으로 사용하게 한다.

 

 

 

받아온 데이터에서 값 들고오기

http://spartacodingclub.shop/sparta_api/seoulair

이 링크는 api로 서울시의 구 마다 미세먼지 농도를 나타내고 있다.

여기서 구와, 농도만을 들고 온다면

fetch("http://spartacodingclub.shop/sparta_api/seoulair")
.then(res => res.json())
.then(data => {
let rows = data[RealtimeCityAir']['row'] 
// 링크를 보면 RealtimeCityAir 안에 row안에 리스트-딕셔너리 형식으로 데이터가 있다.
// 그러므로 이 코드는 그 안의 row리스트를 부르는 것이다.

rows.forEach(element => {
console.log(element['MSRSTE_NM'])
console.log (element['INDEX_MVL'])
})
// 이코드는 row리스트 안의 딕셔너리의 값을 모두 찾아주는 것으로 forEach로 각 리스트-딕셔너리 마다
//MSRSTE_NM(지역구) 와 INDEX_MVL(미세먼지 농도) 를 찾아서 꺼내는 역활이다.

console.log(data['RealtimeCityAir']['row'])
})
//마지막은 그 값을  row안에서 찾아서 돌려야 하기 때문에 이렇게 부르는 것이다.

 

 

 

 

append의 골격구조

append 의 골격 구조는

let temp_html = `<li>${gu_name}: ${gu_mise}</li>`
$('#names-q1').append(temp_html)

  temp_html이란 변수를 할당해서 ` ` (백틱) 안에 어떻게 표시를 할지 설정한 후,

names-q1 의 아이디를 가지고 있는 곳에서 append(temp_html) 임시 html을 집어넣는것이다.

 

여기서 append를 사용하면, 지우는것이 아닌 옆으로 추가하는 것으로 이미 1,2 가 있다면 append로 3을 넣으면

1,2,3 이 되는 형식이ㅏ.

 

 

empty의 골격 구조

empty의 골격주고는

$('#names-q1').empty()

 위의 append전에 사용을 하며 이렇게 하게 되면 기존의 1,2 는 사라지고 append로 3을 넣게되면

3이라는 값만 나오게 된다.

 

 

 

if문 사용하기

 if는 그 함수의 안에서만 돌아가기때문에 외부의 미리 변수를 설정을 해두고 들어가야 한다.

그러므로 let을 사용하여서 값의 갱신이 가능하게 한다.

 

 

랜덤 명언 api사용

        let url = "https://korean-advice-open-api.vercel.app/api/advice";
        fetch(url).then(res => res.json()).then(data => {
            console.log(data);

            let author = data['author']
            let content = data['message']

            let authorMSG = `- ${author} -`
            let contentMSG = `" ${content} "`

            $('#quoteAuthor').text(authorMSG)
            $('#quoteContent').text(contentMSG)
        })

let url으로 긴 url자체를 밖으로 빼버린다.

나머지는 fetch 와 같다.

 

Sparta-gpt-web/JS at main · K-MarkLee/Sparta-gpt-web (github.com)