항해프리2기 1주차 - 쉽게 배우는 웹개발 A 부터 Z 까지 3차 강의

JQuery, fetch

fetch

 - 인터넷을 통해 데이터를 요청하고 받아오는 과정을 의미

 

Postbox 접고 펼치기

.toggle() 메서드 작성

        function openclose() {

            $('#postbox').toggle();

        }

 

 

데이터 넣고 카드 생성하기

 .val()을 통해 postbox에 값들 변수에 담기
 div안에 class 선택자 선택 후 append

        function makeCard() {

            let image = $('#image').val();

            let title = $('#title').val();

            let star = $('#star').val();

            let good = $('#good').val();

            let temp_html = `

            <div class="col">

                <div class="card h-100">

                    <img src="${image}"

                        class="card-img-top" alt="...">

                    <div class="card-body">

                        <h5 class="card-title">${title}</h5>

                        <p class="card-text">${star}</p>

                        <p class="card-text">${good}</p>

                    </div>

                </div>

            </div>`

            $('#card').append(temp_html);

        }

 

 

[서버→클라이언트]: JSON

 - Key:Value로 이루어짐(딕셔너리와 유사)

 

[클라이언트→서버]: GET

서버 주소의 경우

 - 서버의위치/ 창구의이름 ? 데이터의 위치(이 부근을 GET)

? : 전달할 데이터가 존재함을 의미

& : 전달할 데이터가 추가로 존재함을 의미 

 

fetch

fetch(url로 웹 통신 요청).then(res => res.json()).then(data => {

 

서울 미세먼지 정보

{
    "RealtimeCityAir": {
        "row": [
            {
                "ARPLT_MAIN": "O3",
                "CO": 0.4,
                "IDEX_MVL": 31,
                "IDEX_NM": "좋음",
                "MSRDT": "201912052100",
                "MSRRGN_NM": "도심권",
                "MSRSTE_NM": "중구",
                "NO2": 0.015,
                "O3": 0.018,
                "PM10": 22,
                "PM25": 14,
                "S
}

꺼내기

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

                let rows = data['RealtimeCityAir']['row'];

                rows.forEach(a => {

                    let gu_name = a['MSRSTE_NM']

                    let gu_mise = a['IDEX_MVL']

                    let temp_html = ``;

                    if(gu_mise > 40){

                        temp_html = `<li class = "bad">${gu_name} : ${gu_mise}</li>`

                    } else {

                        temp_html = `<li>${gu_name} : ${gu_mise}</li>`

                    }

                    $('#names-q1').append(temp_html)

                });

            })

 

웹 페이지에 바로 적용

document ready

$(document).ready(function () {

 

)}

 

3차 숙제 서울 온도 확인 및 20도 이상이면 더워요 밑이면 추워요 표시하기

    <script>
        $(document).ready(function () {
            let url = "http://spartacodingclub.shop/sparta_api/weather/seoul";
            fetch(url).then(res => res.json()).then(data => {
                let temp = data['temp'];
                if (temp >= 20) {
                    $('#ondo').text('더워요 ').append(temp)
                    
                } if (temp < 20) {
                    $('#ondo').text('추워요 ').append(temp)
                }
            })
        })