Fetch

Fetch는 무엇인가?

=> JavaScript에서 서버와 통신이 가능하게 해주는 매서드다.

Fetch를 왜 쓰는가?

=> HTML에서 어떠한 정보를 바꾸고 싶을때 화면전체를 바꾸지않고 바꾸고싶은 특정 정보만 바꾸기 위해 사용한다.(만약 특정 정보를 바꾸기 위해 화면 전체를 새로고침할 때 페이지의 용량이 크다면 로딩시간이 길어지고 중복으로 불러오는 데이터가 많아 메모리 소모도 클 것이기 때문이다.) 

 

1. Fetch 연습하기

-서울시 미세먼지 데이터(openAPI)를 가지고 연습한다.(딕셔너리 형태)

 

 

1)미세먼지 데이터에서 첫번째 데이터를 가져오기

fetch(url).then(res => res.json()).then(data => {

                console.log(data['RealtimeCityAir']['row'][0])

url에 데이를 가져오려는 주소를 입력한다

=> let url = "주소";

결과

 

 

2) 반복문을 이용해서 구와 미세먼지 상태 가져오기

let rows = data['RealtimeCityAir']['row'];

                rows.forEach(a => {

                    let gu_name = a['MSRSTE_NM'];

                    let gu_mise = a['IDEX_NM'];

                    console.log(gu_name, gu_mise);

위 미세먼지 데이터에서 구이름(value)은 MSRSTE_NM(key)으로 매칭되어있고, 미세먼지 상태(value)는 IDEX_NM(key)으로 매칭되어있다. 각 데이터를 gu_name, gu_mise에 담아서 반복문을 통해 출력한다.

결과

 

 

3) 가져온 데이터를 HTML을 통해 페이지에 출력하기

bad 클래스

head 부분

body 부분

-가져온 데이터를 리스트 형식으로 출력하고 id값을 names-q1으로 주었다.

-업데이트 버튼을 누를 때 마다 새로고침이 되어야 하므로 fetch가 실행되기전에 empty로 값을 지운다.

- temp_html이라는 변수를 초기화하고 gu_mise의 값이 40이 넘으면 빨간색으로, 아니면 기본상태로 temp_html에 넣고 반복문을 통해 출력한다.

 

결과