슬기로운 AI생활 - 집요한 PM 에릭

띵동코딩 12주차 개발일지 : Fetch 사용하기 본문

코딩공부

띵동코딩 12주차 개발일지 : Fetch 사용하기

집요한 기획자 에릭 2022. 8. 22. 22:01
1. 이번 주 느낀 점
 
서버에서 데이터를 불러온다는 개념과, 그 데이터가 json 형식으로 온다는 것을
직장에서 들어서 대략은 알고 있었지만, 실제 json 데이터의 형식을 보고
이것을 불러오는 작업을 해 보니 훨씬 이해가 빨랐다.
 
Key와 Value 형식으로 이루어진 데이터라는 것도 이해가 되었고,
이러한 데이터를 바탕으로 수많은 서비스를 만들 수 있다는 것이 놀라우면서도 조금씩 이해가 되기 시작했다.
 
오늘부터는 조금 머리를 쓰고, 함수를 구조화하는 것을 하면서 나름대로 재미도 느낄 수 있었다.
특히 많게만 보였던 미세먼지 json 파일을 이해할 수 있는 문자로 표출하는 것을 보고, 데이터를 바탕으로 서비스를 구축하는 최소한의 원리를 이해할 수 있어서 좋았다.
 
코딩을 공부하면서 항상 잊지 말아야 할 것은, 이러한 코드의 구조와 작동 원리, 웹과 서비스의 작동 원리를 익히면서
웹 서비스가 어떻게 제공되는지 더 잘 이해하고,
그러한 이해를 바탕으로 어떻게 더 나은 서비스를 구축할 수 있을지를 지속적으로 생각하는 것이다.
 
 
2. 이번 주 코드
 
1) 스스로 해 보기 : 미세먼지 70 이상의 값만 불러오기
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>띵동코딩 - fetch 연습</title>
    <style>
        .client {
           margin: 10px 10px;
        }
        .mise{
            color: red;
        }
    </style>
    <script>
        function mise(){
            $('#city').empty()

            fetch(url).then(res => res.json()).then((data) => {
                let rows = data['RealtimeCityAir']['row']
                for (let i = 0; i<rows.length; i++){
                    let gu = rows[i]['MSRSTE_NM']
                    let value = rows[i]['IDEX_MVL']
                    let status = rows[i]['IDEX_NM']

                    let temp_html = `<li>${gu} : ${value}(${status})</li>`

                    if (value>70) {
                        $('#city').append(temp_html)
                    }

                }
            });
        }
    </script>
</head>

<body>
    <div>
        <button onclick="mise()">미세먼지 정보</button>
        <div class="client">지역별</div>
        <ul id="city">
        </ul>
    </div>

</body>

</html>

 

2) 미세먼지 120 이상은 글자 빨간색으로 해서 불러오기
 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>띵동코딩 - fetch 연습</title>
    <style>
        .client {
           margin: 10px 10px;
        }
        .mise{
            color: red;
        }
    </style>
    <script>
        function mise(){
            $('#city').empty()

           
            fetch(url).then(res => res.json()).then((data) => {
                let rows = data['RealtimeCityAir']['row']
                for (let i = 0; i<rows.length; i++){
                    let gu = rows[i]['MSRSTE_NM']
                    let value = rows[i]['IDEX_MVL']
                    let status = rows[i]['IDEX_NM']
                    let temp_html = '';

                    if (value > 120) {
                        temp_html =`<li class="mise">${gu} : ${value}(${status})</li>`;
                        } else {
                        temp_html =`<li>${gu} : ${value}(${status})</li>`;
                        }
                    $('#city').append(temp_html);

                }
            });
        }
    </script>
</head>

<body>
    <div>
        <button onclick="mise()">미세먼지 정보</button>
        <div class="client">지역별</div>
        <ul id="city">
        </ul>
    </div>

</body>

</html>

 

3. 이번 주 인증샷

'코딩공부' 카테고리의 다른 글

띵동코딩 14주차 - JS&Jquery&Fetch  (0) 2022.09.05
띵동코딩 13주차 개발일지 : Fetch 활용하기  (0) 2022.08.30
띵동코딩 11주차 개발 일지 : jquery와 Javascript  (0) 2022.08.20
띵동코딩 10주차 개발 일지 : Javascript 복습  (0) 2022.08.08
띵동코딩 9주차 개발 일지 : Javascript 기초  (0) 2022.08.02
'코딩공부' Related Articles more