210914 개발일지

Moonsun Kim·2021년 9월 14일
ajaxjqueryopen APIspartacodingclub웹개발
1

[SpartaCodingClub] 웹개발 종합반 43기

목록 보기
3/9

<Ajax>

1. Ajax 기본 골격

$.ajax({
    type: "GET",
    url: "여기에URL을입력",
    data: {},
    success: function(response){
        console.log(response)
    }
})

2. $ajax 코드 설명

☑ type: "GET" → GET 방식으로 요청한다.

GET: 데이터 조회(READ) 요청할 때
POST: 데이터 생성(CREATE), 변경(UPDATE), 삭제(DELETE) 요청할 때

☑ url: 요청할 url
☑ data: 요청하면서 함게 줄 데이터 (GET 요청시에는 비워두기)

GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져간다.
url: "http://naver.com?param=value&param2=value2",
POST 요청은, data : {} 에 넣어서 데이터를 가져간다.
data: {param: 'value', param2: 'value2'},

☑ success: 성공하면, response값에 서버의 결과 값을 담아서 함수를 실행한다.

success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
}

3. jQuery와 Ajax의 조합 연습

3-1) 서울시 실시간 미세먼지 상태

☑ 서울시 실시간 미세먼지 상태 OpenAIP http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99

(url 클릭하면 아래 이미지 나옴.)

☑ 업데이트 버튼을 누를 때마다 지웠다 새로 씌여지는 상태로 구현하기

$('#names-q1').empty()

☑ '미세먼지 수치'가 '50 이상'인 지역구만 '빨간색'인 상태로 구현하기

① url: " ", 에 서울시 실시간 미세먼지 상태 OpenAIP 넣기

② 가져올 data값 부르기

☐ let rows = response['RealtimeCityAir']['row']
☛ RealtimeCityAir 하위에 위치해 있는 row data값 가져온다.

③ 가져올 rows의 범위 정하기

☐ for (let i = 0; i < rows.length; i++)
☛ i는 0부터 rows.length까지의 data값을 1개씩 +해서 가져온다.

④ row 하위에 위치한 '구이름(gu_name)'과 '미세먼지 수치(gu_mise)'의 data값 이름을 가져오기

☐ let gu_name = rows[i]['MSRSTE_NM']
☛ 구이름(gu_name)의 data값을 row의 MSRSTE_NM에서 가져온다.
☐ let gu_mise = rows[i]['IDEX_MVL']
☛ 미세먼지 수치(gu_mise)의 data값을을 row의 IDEX_MVL에서 가져온다.

⑤ '미세먼지 수치'가 '50 이상'인 지역구만 '빨간색'인 상태로 구현하기

☐ <script> ~ </script> 안에

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

☐ <style> ~ </style> 안에

.bad {
    color: red;
}

<완성 코드>
<!doctype html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>jQuery 연습하고 가기!</title>
    
    <!-- jQuery를 import 합니다 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    
    <style type="text/css">
        div.question-box {
            margin: 10px 0 20px 0;
        }
        
        .bad {
            color: red;
        }
    </style>
    
    <script>
        function q1() {
            $('#names-q1').empty()
            $.ajax({
                type: "GET",
                url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
                data: {},
                success: function (response) {
                    let rows = response['RealtimeCityAir']['row']
                    for (let i = 0; i < rows.length; i++) {
                        let gu_name = rows[i]['MSRSTE_NM']
                        let gu_mise = rows[i]['IDEX_MVL']
                        
                        let temp_html = ``
                        if (gu_mise > 50) {
                            temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
                        } else {
                            temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                        }
                        $('#names-q1').append(temp_html)
                    }
                }
            })
        }
    </script>
</head>

<body>
    <h1>jQuery와 Ajax의 조합 연습</h1>
    
    <hr />
    
    <div class="question-box">
        <h2>서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기</h2>
        <button onclick="q1()">업데이트</button>
        <ul id="names-q1">
        </ul>
    </div>
</body>

</html>

3-2) 서울시 실시간 따릉이 현황

☑ 서울시 실시간 따릉이 현황 OpenAIP http://spartacodingclub.shop/sparta_api/seoulbike

(url 클릭하면 아래 이미지 나옴.)

☑ 업데이트 버튼을 누를 때마다 지웠다 새로 씌여지는 상태로 구현하기

$('#names-q1').empty()

☑ '현재 거치된 따릉이 수'가 '5 이하'인 거치대 위치만 '빨간색'인 상태로 구현하기

① url: " ", 에 서울시 실시간 따릉이 현황 OpenAIP 넣기

② 가져올 data값 부르기

☐ let rows = response['getStationList']['row']
☛ getStationList 하위에 위치해 있는 row data값 가져온다.

③ 가져올 rows의 범위 정하기

☐ for (let i = 0; i < rows.length; i++)
☛ i는 0부터 rows.length까지의 data값을 1개씩 +해서 가져온다.

④ row 하위에 위치한 '거치대 위치(name)'와 '거치대 수(rack)', '현재 거치된 따릉이의 수(bike)'의 data값 이름 가져오기

☐ let name = rows[i]['stationName']
☛ 거치대 위치(name)의 data값을 row의 stationName에서 가져온다.
☐ let rack = rows[i]['rackTotCnt']
☛ 거치대 수(rack)의 data값을을 row의 rackTotCnt에서 가져온다.
☐ let bike = rows[i]['parkingBikeTotCnt']
☛ 현재 거치된 따릉이의 수(bike)의 data값을을 row의 parkingBikeTotCnt 에서 가져온다.

⑤ '현재 거치된 따릉이 수'가 '5 이하'인 거치대 위치만 '빨간색'인 상태로 구현하기

☐ <script> ~ </script> 안에

let temp_html = ``
    if (bike < 5) {
        temp_html = `<tr class="bad">
                        <td>${name}</td>
                        <td>${rack}</td>
                        <td>${bike}</td>
                    </tr>`
    } else {
        temp_html = `<tr>
                        <td>${name}</td>
                        <td>${rack}</td>
                        <td>${bike}</td>
                     </tr>`
    }
$('#names-q1').append(temp_html)

☐ <style> ~ </style> 안에

.bad {
    color: red;
}

<완성 코드>
<!doctype html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>JQuery 연습하고 가기!</title>
    <!-- JQuery를 import 합니다 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

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

        table {
            border: 1px solid;
            border-collapse: collapse;
        }

        td,
        th {
            padding: 10px;
            border: 1px solid;
        }

        .bad {
            color: red;
        }
    </style>

    <script>
        function q1() {
            $('#names-q1').empty()
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/seoulbike",
                data: {},
                success: function (response) {
                    let rows = response['getStationList']['row']
                    for (let i = 0; i < rows.length; i++) {
                        let name = rows[i]['stationName']
                        let rack = rows[i]['rackTotCnt']
                        let bike = rows[i]['parkingBikeTotCnt']

                        let temp_html = ``
                            if (bike < 5) {
                                temp_html = `<tr class="bad">
                                                <td>${name}</td>
                                                <td>${rack}</td>
                                                <td>${bike}</td>
                                            </tr>`
                            } else {
                                temp_html = `<tr>
                                                <td>${name}</td>
                                                <td>${rack}</td>
                                                <td>${bike}</td>
                                            </tr>`
                            }
                        $('#names-q1').append(temp_html)
                    }
                }
            })
        }
    </script>

</head>

<body>
    <h1>jQuery와 Ajax의 조합 연습</h1>

    <hr />

    <div class="question-box">
        <h2>서울시 OpenAPI(실시간 따릉이 현황)를 이용하기</h2>
        <button onclick="q1()">업데이트</button>
        <table>
            <thead>
                <tr>
                    <td>거치대 위치</td>
                    <td>거치대 수</td>
                    <td>현재 거치된 따릉이 수</td>
                </tr>
            </thead>
            <tbody id="names-q1">
            </tbody>
        </table>
    </div>
</body>

</html>

3-3) 랜덤 고양이 사진

☑ 고양이 OpenAIP http://spartacodingclub.shop/sparta_api/seoulbike

(url 클릭하면 아래 이미지 나옴.)

☑ 로딩 후 바로 실행하는 방법

: 로딩 후 바로 고양이 사진 나오게 하기

$(document).ready(function () {
    q1();
});

☑ 업데이트 버튼을 누를 때마다 지웠다 새로 씌여지는 상태로 구현하기

: 새로운 고양이 사진 나오게 하기

① url: " ", 에 고양이 OpenAIP 넣기

② 가져올 data값 부르기

☐ let imgurl = response[0]['url']
☛ list에는 하나의 dictionary만 존재하기 때문에 0번째에 있는 url data값을 가져오도록 프로그래밍한다.

③ jQuery 이미지 태그 src 바꾸는 방법

☐ $('#img-cat').attr("src", imgurl);


<완성 코드>
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>JQuery 연습하고 가기!</title>
    <!-- JQuery를 import 합니다 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

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

    </style>

    <script>
        $(document).ready(function () {
            q1();
        });

        function q1() {
            $.ajax({
                type: "GET",
                url: "https://api.thecatapi.com/v1/images/search",
                data: {},
                success: function (response) {
                    let imgurl = response[0]['url']
                    $('#img-cat').attr("src", imgurl);
                }
            })
        }
    </script>

  </head>
  <body>
    <h1>JQuery와 Ajax의 조합 연습</h1>

    <hr/>

    <div class="question-box">
      <h2>랜덤 고양이 사진 API를 이용하기</h2>
      <button onclick="q1()">고양이를 보자</button>
      <div>
        <img id="img-cat" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/>
      </div>
    </div>
  </body>
</html>

3-4) 나홀로메모장에 OpenAPI 붙여보기

☑ 나홀로메모장 OpenAIP(GET)

http://spartacodingclub.shop/post

(url 클릭하면 아래 이미지 나옴.)

☑ 로딩 후 바로 실행하는 방법

: 로딩 후 바로 movie articles 나오게 하기

$(document).ready(function () {
    $('#cards-box').empty();
    listing();
});

☑ $ajax 코드를 활용하여 나홀로메모장 OpenAPI 가져오기

① url: " ", 에 나홀로메모장(movie articles) OpenAIP 넣기

② 가져올 data값 부르기

☐ let rows = response['articles']
☛ articles data값 가져온다.

③ 가져올 rows의 범위 정하기

☐ for (let i = 0; i < rows.length; i++)
☛ i는 0부터 rows.length까지의 data값을 1개씩 +해서 가져온다.

④ dictionary 순서에 따른 'comment'와 'desc', 'image', 'title', 'url'의 data값 가져오기

☐ let comment = rows[i]['comment']
☛ i번째에 위치한 comment의 data값을 가져온다.
☛ 이하 같은 원리로 i번째에 위치한 각각의 data값을 가져온다.

⑤ 브라우저에 data가 시각화되어 보이게 하는 코드 작성하기

let temp_html = `<div class="card">
                    <img class="card-img-top"
                         src="${image}"
                         alt="Card image cap">
                    <div class="card-body">
                        <a href="${url}" class="card-title">${title}</a>
                        <p class="card-text">${desc}</p>
                        <p class="card-text comment">${comment}</p>
                 </div>`

☛ <body>태그 사이에 위치한 <div class="card">를 let temp_html = 뒤에 붙여 바뀌는 data값을 ${} 형태로 변경한다.

⑥ 코딩한temp_html이 실제로 브라우저에 시각화되어 보이게 하기

☐ $('#cards-box').append(temp_html)

<완성 코드>
<!doctype html>
<html lang="en">

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

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>

    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>

    <link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">

    <style>
        * {
            font-family: 'Jua', sans-serif;
        }

        .wrap {
            width: 900px;
            margin: auto;
        }

        .comment {
            color: blue;
            font-weight: bold;
        }

        .posting-box {
            width: 500px;
            margin: 10px auto 30px auto;
            border: 3px solid black;
            border-radius: 5px;
            padding: 25px;

            display: none;
        }
    </style>

    <script>
        $(document).ready(function () {
            $('#cards-box').empty();
            listing();
        });

        function listing() {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/post",
                data: {},
                success: function (response) {
                    let rows = response['articles']
                    for (let i = 0; i < rows.length; i++) {
                        let comment = rows[i]['comment']
                        let desc = rows[i]['desc']
                        let image = rows[i]['image']
                        let title = rows[i]['title']
                        let url = rows[i]['url']

                        let temp_html = `<div class="card">
                                            <img class="card-img-top"
                                                 src="${image}"
                                                 alt="Card image cap">
                                            <div class="card-body">
                                                <a href="${url}" class="card-title">${title}</a>
                                                <p class="card-text">${desc}</p>
                                                <p class="card-text comment">${comment}</p>
                                            </div>
                                        </div>`
                        $('#cards-box').append(temp_html)
                    }
                }
            })
        }

        function openclose() {
            let status = $('#post-box').css('display');
            if (status == 'block') {
                $('#post-box').hide();
                $('#btn-posting-box').text('포스팅박스 열기');
            } else {
                $('#post-box').show();
                $('#btn-posting-box').text('포스팅박스 닫기');
            }
        }
    </script>
</head>

<body>
<div class="wrap">
    <div class="jumbotron">
        <h1 class="display-4">나홀로 링크 메모장!</h1>
        <p class="lead">중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다</p>
        <hr class="my-4">
        <p class="lead">
            <a onclick="openclose()" id="btn-posting-box" class="btn btn-primary btn-lg" href="#" role="button">포스트박스 열기</a>
        </p>
    </div>

    <div class="posting-box" id="post-box">
        <div class="form-group">
            <label>아티클 URL</label>
            <input type="email" class="form-control" id="article-url" aria-describedby="emailHelp" placeholder="">
        </div>
        <div class="form-group">
            <label for="exampleInputEmail1">간단 코멘트</label>
            <textarea class="form-control" id="exampleInputEmail1" rows=""></textarea>
        </div>
        <button type="submit" class="btn btn-primary form-group">기사저장</button>
    </div>

    <div class="card-columns" id="cards-box">
        <div class="card">
            <img class="card-img-top"
                 src="https://image.theminda.com/data/tg/image/tour/middle/201905/e74f31986c1b37aba4d446a5500e1ed8.jpg"
                 alt="Card image cap">
            <div class="card-body">
                <a href="http://naver.com/" class="card-title">여기 기사 제목이 들어가죠</a>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top"
                 src="https://image.theminda.com/data/tg/image/tour/middle/201905/e74f31986c1b37aba4d446a5500e1ed8.jpg"
                 alt="Card image cap">
            <div class="card-body">
                <a href="http://naver.com/" class="card-title">여기 기사 제목이 들어가죠</a>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top"
                 src="https://image.theminda.com/data/tg/image/tour/middle/201905/e74f31986c1b37aba4d446a5500e1ed8.jpg"
                 alt="Card image cap">
            <div class="card-body">
                <a href="http://naver.com/" class="card-title">여기 기사 제목이 들어가죠</a>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top"
                 src="https://image.theminda.com/data/tg/image/tour/middle/201905/e74f31986c1b37aba4d446a5500e1ed8.jpg"
                 alt="Card image cap">
            <div class="card-body">
                <a href="http://naver.com/" class="card-title">여기 기사 제목이 들어가죠</a>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top"
                 src="https://image.theminda.com/data/tg/image/tour/middle/201905/e74f31986c1b37aba4d446a5500e1ed8.jpg"
                 alt="Card image cap">
            <div class="card-body">
                <a href="http://naver.com/" class="card-title">여기 기사 제목이 들어가죠</a>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top"
                 src="https://image.theminda.com/data/tg/image/tour/middle/201905/e74f31986c1b37aba4d446a5500e1ed8.jpg"
                 alt="Card image cap">
            <div class="card-body">
                <a href="http://naver.com/" class="card-title">여기 기사 제목이 들어가죠</a>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
            </div>
        </div>
    </div>
</body>

</html>
profile
Moonsun Kim
:)
이전 포스트

210907 개발일지

다음 포스트

210915 개발일지

0개의 댓글