wisePocket

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

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

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

ohnyong 2023. 7. 2. 13:13

이전 실습들을 활용해서 "서울시 실시간 온도" 를 기존 작업 된 웹페이지에 넣어보자.

 

1. 기존 작업한 웹 페이지에 fetch에 OpenAPI 링크 설정, 요소를 추가한 span 추가

 

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

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

    <title>스파르타 피디아</title>
    <!-- style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 -->
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet" />

    <style>
      /* style.css로 모듈화 시킴 */
    </style>

    <script>
		$(document).ready(function() {
   		fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then(res => res.json()).then(data => {
        console.log(data)
    })
})
    </script>

</head>

<body>
    <div class="mytitle">
        <h1>내 생애 최고의 영화들</h1>
        <div>현재 서울의 날씨 : <span id="temp">20</span>도</div>
        <button onclick="hey()">영화 기록하기</button>
    </div>
    <div class="mypost">
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com" />
            <label for="floatingInput">URL</label>
        </div>


        <!-- 별점 갯수 https://getbootstrap.com/docs/5.0/forms/input-group/ -->
        <div class="input-group mb-3">
            <label class="input-group-text" for="inputGroupSelect01">Review Score</label>
            <select class="form-select" id="inputGroupSelect01">
                <option selected>Select Your Score</option>
                <option value="1">⭐</option>
                <option value="2">⭐⭐</option>
                <option value="3">⭐⭐⭐</option>
                <option value="4">⭐⭐⭐⭐</option>
                <option value="5">⭐⭐⭐⭐⭐</option>
            </select>
        </div>


        <div class="form-floating">
            <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
                style="height: 100px"></textarea>
            <label for="floatingTextarea2">Comment</label>
        </div>
        <div class="mybtns">
            <button type="button" class="btn btn-dark">Write</button>
            <button type="button" class="btn btn-outline-dark">Close</button>
        </div>
    </div>
    <div class="mycards">
        <div class="row row-cols-1 row-cols-md-4 g-4">
            <div class="col">
                <div class="card h-100">
                    <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                        class="card-img-top" alt="..." />
                    <div class="card-body">
                        <h5 class="card-title">영화 제목이 들어갑니다</h5>
                        <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
                        <p>⭐⭐⭐</p>
                        <p class="mycomment">나의 한줄 평을 씁니다</p>
                    </div>
                </div>
            </div>

            <div class="col">
                <div class="card h-100">
                    <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                        class="card-img-top" alt="..." />
                    <div class="card-body">
                        <h5 class="card-title">영화 제목이 들어갑니다</h5>
                        <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
                        <p>⭐⭐⭐</p>
                        <p class="mycomment">나의 한줄 평을 씁니다</p>
                    </div>
                </div>
            </div>

            <div class="col">
                <div class="card h-100">
                    <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                        class="card-img-top" alt="..." />
                    <div class="card-body">
                        <h5 class="card-title">영화 제목이 들어갑니다</h5>
                        <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
                        <p>⭐⭐⭐</p>
                        <p class="mycomment">나의 한줄 평을 씁니다</p>
                    </div>
                </div>
            </div>

            <div class="col">
                <div class="card h-100">
                    <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                        class="card-img-top" alt="..." />
                    <div class="card-body">
                        <h5 class="card-title">영화 제목이 들어갑니다</h5>
                        <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
                        <p>⭐⭐⭐</p>
                        <p class="mycomment">나의 한줄 평을 씁니다</p>
                    </div>
                </div>
            </div>
            <!-- col -->
        </div>
        <!-- card -->
    </div>
</body>

</html>

"현재 서울의 날씨 : 20도"로 하드코딩된 부분에 실시간 데이터가 적용되도록 하는 것이 목표이다.

 

 

우선 링크의 이상이 없고

서울의 온도인 

temp를 "20"도 라 표현된 부분에 반영되게 변경하면 될 것 같다.

 

 

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

Fetch 기본 골격

            fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then(res => res.json()).then(data => {
                console.log(data)
            })

 

OpenAPI URL : 

URL 부분 "http://spartacodingclub.shop/sparta_api/weather/seoul" 로 변경

 

OpenAPI의 데이터가 들어오는지부터 확인한다.

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

이전과 다르게 데이터 리스트 구조가 Air>row 처럼 상위, 하위 구조가 없고

데이터 자체에서 Dictionary 형식으로 temp key값이 위치하고 있다. temp 변수를 선언.

        $(document).ready(function () {
            fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then(res => res.json()).then(data => {
                console.log(data)
                
                let temp = data['temp']
                // 데이터 들어오는지 확인
                console.log(temp)
            })
        })

temp라는 변수에 바로 원하는 값만 추출되는 것을 확인 할 수 있다.

 

 

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

append 를 통해 HTML의 span중 temp란 id를 가진 텍스트를 교체하면 된다.

하드코딩된 부분은 empty()로 비워주고 데이터로 받아온 temp값이 대체해서 들어가도록 한다.

        $(document).ready(function () {
            fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then(res => res.json()).then(data => {
                console.log(data)
                
                let temp = data['temp']
                // 데이터 들어오는지 확인
                console.log(temp)
                $('#temp').empty()
                $('#temp').append(temp)
            })
        })

 

해당 코드의 결과 페이지는 새로고침 할 때마다 다음처럼 나타난다.

그 이유는

$(document).ready(function ()

을 사용 했기 때문에 웹 페이지가 로딩 될 때 해당 함수(여기선 fetch)를 수행하게 된다.

 

 

4. 조건문을 통해 스타일 제어

조금 더 복습하기위해서

조건문을 통해 텍스트 색상을 변경하고자 했다.

온도가 20도 초과인 경우엔 빨간색

온도가 20도 미만인 경우엔 파란색

글씨로 나타난다.

    <style>
        /* style.css로 모듈화 시킴 */
        .red{
            color: red;
        }
        .blue{
            color: blue;
        }
    </style>
    <script>
        $(document).ready(function () {
            fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then(res => res.json()).then(data => {
                console.log(data)
                
                let temp = data['temp']
                // 데이터 들어오는지 확인
                console.log(temp)
                $('#temp').empty()
                if (temp > 20){
                    $('#temp').append("<span class='red'>"+temp+"</span>")
                } else{
                    $('#temp').append("<span class='blue'>"+temp+"</span>")
                }
            })
        })
    </script>

이 부분은 원래 class가 있는 span을 추가하는 것 말고

기존의 temp span에 클래스 속성을 red or blue로 변경되는 것을 생각했었는데 해결하지 못했다.

검색이 어렵다. 조건문에 따라 #temp  span에 속성을 변경하는 방법이 있는지 찾아봐야겠다.

 

 

*추가

검색을 통해서 확인한것 속성을 바꾸려면 .attr(‘속성’,’값’)을 쓸 수 있다.

분명히 이전에 배웠던 것인데 찾아보니 생각났다.

선택한 요소의 속성을 생성,수정 하는 동작

한번 사용해보자

                $('#temp').text(temp)
                if (temp > 20){
                    $('#temp').attr('class','red')
                } else{
                    $('#temp').attr('class','blue')
                }

 

정상적으로 동일하게 작동된다.

불필요한 span이 중복되서 추가되는 등 코드가 복잡해지는 것을 줄일 수 있었다.

 

 

참조한 내용은 아래에서 확인 할 수 있었다.

https://sowon-dev.github.io/2020/08/04/200805jspi/

 

[jQuery] attr(), html()와 text(), append()와 prepend()

attr() 함수 attr(‘속성’,’값’) : 선택한 요소의 속성을 생성,수정 하는 동작 css와 차이점 attr사용 : border color, border style적용안됨. css사용 : border color, border style 적용됨.

sowon-dev.github.io

 

 

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

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] for와 forEach의 의문점에서 시작해서 동기와 비동기 기본 개념까지  (0) 2023.07.03
[JavaScript] Fetch, 공공 데이터 OpenAPI 활용 실습 - 4  (0) 2023.07.03
[JSON] Fetch, 공공 데이터 OpenAPI 활용 실습 - 2  (0) 2023.07.02
[JavaScript] Fetch, 공공 데이터 OpenAPI 활용 실습 - 1  (0) 2023.07.01
[JavaScript] Fetch 이용해보기  (0) 2023.07.01
'Python&Flask Tutorials, AWS EB/2nd WEEK JavaScript, JQuery, Fetch, API' Related Articles more