[TIL #4] API Fetch

Fetch란 말 그대로 무언갈 가져오는 것.

서울시 공개 API에서 값을 가져와서(Fetch) 페이지에 띄워보자.

활용할 정보는 서울시 대기 정보.

 

Fetch

스크립트 태그 내에 아래의 코드를 입력한다.

let url = "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99";
fetch(url).then(res => res.json()).then(data => {
    console.log(data);
})

 

여기서 Fetch 구조를 보자.

1. fetch()
   - url의 데이터를 가져온다.
   - 요청 완료 시 Promise 객체를 반환한다.
   - Promise가 성공하면 Response 객체를 반환한다.
   - 실패하면 오류를 반환
2. then(res => res.json())
   - fetch가 성공적으로 호출되면 호출된다.
   - Response 객체의 res를 인수로 받는다.
   - json()은 res의 내용을 JSON으로 파싱 한다.
   - Promise를 반환하고, 파싱이 완료되면 JavaScript 객체를 반환한다.
3. .then(data => { ... })
   - res.json()이 반환 Promise가 성공적으로 완료되면 호출된다.
   - 파싱 된 JSON 데이터를 인수로 받는다.
   - 여기서 필요한 데이터 처리가 이루어지게 된다.

 

다시 돌아와서, 페이지를 띄워보면 콘솔창에 아래와 같이 나타난다.

 

 

가져오는 모든 데이터를 활용하진 않을 테니 하나만 가져와 보자.

0번 데이터의 ``IDEX_NM''만 콘솔에 출력하겠다.

 

데이터 형식이 JSON이므로 구조에 따라 아래와 같이 코드를 작성했다.

let url = "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99";
fetch(url).then(res => res.json()).then(data => {
    let mise = data['RealtimeCityAir']['row'][0]['IDEX_NM'];
    console.log(mise);
})

 

제대로 가져와 주는 것을 확인할 수 있다.

 

 

활용

웹 페이지에 이 정보를 올려볼 것이다.

웹 로딩 시마다 타이틀에 대기 정보가 갱신되게 할 것이다.

 

웹 로딩 시 마다 어떤 것을 호출하게 하려면 아래의 코드가 필요하다.

$(document).ready(function () {} )

웹페이지(document)가 준비(ready) 되면 함수를 호출하겠다는 의미이다.

위의 코드를 함수로 만들면 된다.

 

$(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'];
        $('#status').text(mise);
    })
})


<div class="mytitle">
    <h1>나만의 추억앨범</h1>
    <p>현재 서울의 미세먼지 : <span id="status">데이터 없음</span></p>
    // ...
</div>

 

타이틀에 p태그를 통해 대기 질이 좋은지 나쁜지 출력하게 했다.

적용 후 새로고침 하면,

 

제대로 정보가 출력됨을 확인할 수 있다.

최초 값이 "데이터 없음"이었는데도 "좋음"이란 데이터를 받았기 때문에 이를 덮어씌웠다.

 

이런 식으로 정보를 Fetch에 웹 페이지의 다양한 곳에 활용할 수 있다.