JSON 이해하기 및 Fetch 프로젝트에 적용하기

JSON에 대해서 이해하고 Fetch를 통해 JSON 데이터를 받아 프로젝트에 적용해 보기로 한다.

1. JSON 이해하기

서울시 OpenAPI를 통해 JSON을 쉽게 접해보기

서울시 미세먼지 OpenAPI url : http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99

크롬 익스텐션 JSONView를 설치하면 가독성이 좋아진다!

JSON은 key:Value로 이루어져 있다.

 

클라이언트 →서버 get 요청 이해하기

GET: 통상적으로 데이터 조회(Read)를 요청할 때 

POSt: 통상적으로 데이터 생성(Create), 변경(Updaate), 삭제(Delete)를 요청할 때

 

GET 방식으로 데이터를 전달하는 방법

? : 여기서부터 전달할 데이터가 작성된다.

&: 전달할 데이터가 더 있다는 뜻

ex) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8

위 주소는 google.com의 search 창구에 다음 정보를 전달

q=아이폰 (검색어)

sourceid=chrome (브라우저 정보)

ie=UTF-8 (인코딩 정보)

 

2. 나만의 추억앨범  Fetch 적용하기

mytitle클래스 div가 있는 공간 안에 p 태그 추가 span 태그 추가

span 태그는 인라인 요소를 하나로 묶을 때 사용 따라서 span태그에 아이디를 적용하고 script 쪽에서 변경된 데이터를 적용하면 데이터에 따라 span 태그의 내용이 변경

    <div class="mytitle">

        <h1>나만의 추억앨범</h1>

        <p>현재 서울의 미세먼지: <span id="msg">나쁨</span></p>

script 바로 아래에 fetch 골격 코드 추가 이후 let mise 변수에 받을 JSON 데이터를 입력해 준다.

위 사진에 따라서 내가 원하는 데이터를 받아온다.  

    <script>

        $(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);

            })

        })

실행화면

p태그에 나쁨이라고 처음에 입력했지만 JSON 데이터로 다시 업데이트된 것을 확인할 수 있다.

 

3. 스파르타플릭스 Fetch 적용하기

내가 찜한 콘텐츠를 복사해 붙여넣어주고 내용수정, <span id="temperature"></span> 추가하기

                <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">

                    <li><a href="#" class="nav-link px-2 text-danger">spartaflix</a></li>

                    <li><a href="#" class="nav-link px-2 text-white">홈</a></li>

                    <li><a href="#" class="nav-link px-2 text-white">시리즈</a></li>

                    <li><a href="#" class="nav-link px-2 text-white">영화</a></li>

                    <li><a href="#" class="nav-link px-2 text-white">내가 찜한 콘텐츠</a></li>

                    <li><a href="#" class="nav-link px-2 text-white">현재기온: <span id="temperature"></span></a></li>

                </ul>

script 아래에 나만에 추억앨범에서 사용했던 JSON 코드 넣어주고 url 수정 후 받을 JSON data 수정하기 

        $(document).ready(function () {

            let url = "http://spartacodingclub.shop/sparta_api/weather/seoul";

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

                let temp = data['temp'];

                $('#temperature').text(temp);

            })

        })

실행화면