wisePocket

[JavaScript] Fetch, 공공 데이터 OpenAPI 활용 실습 - 1 본문

Python&Flask Tutorials, AWS EB/2nd WEEK JavaScript, JQuery, Fetch, API

[JavaScript] Fetch, 공공 데이터 OpenAPI 활용 실습 - 1

ohnyong 2023. 7. 1. 18:54

이전 "서울시 실시간 미세먼지 상태" 데이터를 받아오고 개발자도구 console창에 수신 여부를 확인하는 Fetch를 연습해왔다.

이제 실제로 HTML 웹페이지에서 받은 데이터를 필요한 부분을 뽑아내서 표현까지 할 수 있는지 실습했다.

 

1. 지역구마다 미세먼지 농도를 체크 할 수 있는 간단한 HTML 페이지를 생성

기초 HTML 뼈대는 다음과 같다.

특별한것은 없지만

button 태그에서 onclick event로 q1이라는 함수를 불러오는데

이때 fetch가 작동하고 데이터를 불러오고 불러온 데이터를 html에 기록하도록 하는 것이 목표이다.

<!doctype html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>미세먼지 API로Fetch 연습하고 가기!</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <style type="text/css">
        div.question-box {
            margin: 10px 0 20px 0;
        }
    </style>

    <script>
        function q1() {
            // 여기에 코드를 입력하세요
        }
    </script>

</head>

<body>
    <h1>Fetch 연습하자!</h1>

    <hr/>

    <div class="question-box">
        <h2>1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기</h2>
        <p>모든 구의 미세먼지를 표기해주세요</p>
        <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
        <button onclick="q1()">업데이트</button>
        <ul id="names-q1">
            <li>중구 : 82</li>
            <li>종로구 : 87</li>
            <li>용산구 : 84</li>
            <li>은평구 : 82</li>
        </ul>
    </div>
</body>

</html>

Fetch 전 하드코딩된 지역별 내용은 다음처럼 나타난다.

 

 

2. Fetch 기본 골격 코드와 OpenAPI 코드를 통해 데이터를 받아오자.

Fetch 기본 골격

fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
                console.log(data)
})

 

OpenAPI URL : 

URL 부분 "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99" 로 변경

 

console.log 주석들을 통해 정상적으로 데이터가 들어오는지 확인한다.

        function q1() {
            // 여기에 fetch 골격부터 코드를 입력
            // URL "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99" 로 변경
            fetch("http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99").then(res => res.json()).then(data => {
                // 데이터 들어오는지 확인
                // console.log(data)
                
                let rows = data['RealtimeCityAir']['row']
                // 데이터 들어오는지 확인
                // console.log(rows)

                //html에 강제입력되있는것 비워주고
                $('#names-q1').empty()
                // 반복문으로 들어오는지도 확인
                rows.forEach((a) => {
                    // console.log(a)
         })

 

 

3. 데이터가 들어오는 것을 확인했으면 HTML에 기록되도록 해보자

append 를 통해 HTML의 names-q1이란 id를 가진 list 태그에 누적되도록 반복문을 작성했다.

반복문에 조건문을 추가하여

미세먼지 농도인 'gu_value' 값이 100 이상일 경우에 <li class = "bad"> 라는 클래스 속성이 부여된 리스트 태그를

그 외 아닌 경우엔 일반적인 <li> 태그를 부여하는 것으로 구분

"bad" 클래스는 css style에서 빨간색 글씨로 표현되도록 지정했다.

 

function q1() {
            // 여기에 fetch 골격부터 코드를 입력
            // URL "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99" 로 변경
            fetch("http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99").then(res => res.json()).then(data => {
                // 데이터 들어오는지 확인
                // console.log(data)
                
                let rows = data['RealtimeCityAir']['row']
                // 데이터 들어오는지 확인
                // console.log(rows)

                //html에 강제입력되있는것 비워주고
                $('#names-q1').empty()
                // 반복문으로 들어오는지도 확인
                rows.forEach((a) => {
                    // console.log(a)
                    let gu_name = a['MSRSTE_NM']
                    let gu_value = a['IDEX_MVL']
                    console.log(gu_name,gu_value)
                    // 이렇게 원하는 값만 추출되는 것을 개발자도구로 확인했으면

                    // HTML에 넣을 차례
                    //JSON 넣는 공식? 항상 반복되는 사이클 :
                    //데이터를 가져온다 => 데이터중에서 list화시킬 부분을 추린다 => 반복문을 돌면서 => 필요한 정보만 꺼내고 => 조건문을 붙여서 구분한다

                    // ' ` '백틱 Backtick을 사용하고 있다.
                    // 백틱 문자열 내부에 변수 사용
                    // ex) const backtick = `this is ${val} backtick`;

                    let temp_html = ``
                    if(gu_value>100){
                        temp_html = `<li class="bad">${gu_name} : ${gu_value}</li>`
                    } else{
                        temp_html = `<li>${gu_name} : ${gu_value}</li>`
                    }
                    $('#names-q1').append(temp_html)
                })
            })
        }

 

해당 코드의 결과 페이지는 다음처럼 나타난다.

 

 

조건문으로 append 부분을 추가 할 때

 ' ` ' (백틱) Backtick을 사용하고 있다.
 백틱 문자열 내부에 변수 사용
 ex) const backtick = `this is ${val} backtick`;

 let temp_html = ``
                    if(gu_value>100){
                        temp_html = `<li class="bad">${gu_name} : ${gu_value}</li>`
                    } else{
                        temp_html = `<li>${gu_name} : ${gu_value}</li>`
                    }
                    $('#names-q1').append(temp_html)

 

백틱을 배우긴 했었지만 

어느부분에서 쓰는지 확실하지 않아

추가적인 스터디가 필요하다. 참고할 페이지를 기록해두었다.

https://seokbong.tistory.com/75

 

Javascript 백틱(`, backtick) 간단 사용 설명서 (설명을 경량화...)

Javascript 백틱(`, backtick) 사용법에 대해 간단하게 알아보자 1. 문자열 사용 const backtick = `this is backtick`; 2. 백틱 문자열 내부에 변수 사용 const val = 36; const backtick = `this is ${val} backtick`; 백틱 내부에

seokbong.tistory.com

 

 

 

 

해당 스터디는 아래 깃을 통해 업데이트 되고 있습니다.

https://github.com/yzpocket/Sparta99training

 

GitHub - yzpocket/Sparta99training

Contribute to yzpocket/Sparta99training development by creating an account on GitHub.

github.com

저작자표시 비영리 변경금지

'Python&Flask Tutorials, AWS EB > 2nd WEEK JavaScript, JQuery, Fetch, API' 카테고리의 다른 글

[JavaScript] Fetch, 공공 데이터 OpenAPI 활용 실습 - 3  (0) 2023.07.02
[JSON] Fetch, 공공 데이터 OpenAPI 활용 실습 - 2  (0) 2023.07.02
[JavaScript] Fetch 이용해보기  (0) 2023.07.01
[JavaScript] 서버와 클라이언트 통신이해와 "JSON 이란?"  (0) 2023.07.01
[JavaScript] 사용 기초-1  (0) 2023.06.30
'Python&Flask Tutorials, AWS EB/2nd WEEK JavaScript, JQuery, Fetch, API' Related Articles more