2-8_Ajax 함께 연습하기

250x250

Recent Posts

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

관리 메뉴

Hello creators 🙌

2-8_Ajax 함께 연습하기 본문

[WEB & AI] (feat. 취준)/스파르타코딩클럽_웹개발종합반

2-8_Ajax 함께 연습하기

부시매나_HA 2023. 10. 6. 07:00

728x90

Ⅰ. 이번 회차 학습 목표 (goal)

1. 배우고자 하는 것

따릉이 데이터로 이렇게 만들기
- 업데이트 버튼 누르면 -> 나오게
- 5개 미만이면 -> 빨간색

Ⅱ. 따릉이 API 데이터 구조 확인

1. 해봐

따릉이 API

http://spartacodingclub.shop/sparta_api/seoulbike

보면서 확인할 것
- 전체 데이터 구조
- 필요한 항목 이름 체크

Ⅲ. ajax 퀴즈 1

1. 기본 제공 코드

<!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;
        }
    </style>

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

</head>

<body>
    <h1>jQuery + Ajax의 조합을 연습하자!</h1>

    <hr />

    <div class="question-box">
        <h2>2. 서울시 OpenAPI(실시간 따릉기 현황)를 이용하기</h2>
        <p>모든 위치의 따릉이 현황을 보여주세요</p>
        <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
        <button onclick="q1()">업데이트</button>
        <table>
            <thead>
                <tr>
                    <td>거치대 위치</td>
                    <td>거치대 수</td>
                    <td>현재 거치된 따릉이 수</td>
                </tr>
            </thead>
            <tbody id="names-q1">
                <tr>
                    <td>102. 망원역 1번출구 앞</td>
                    <td>22</td>
                    <td>0</td>
                </tr>
                <tr>
                    <td>103. 망원역 2번출구 앞</td>
                    <td>16</td>
                    <td>0</td>
                </tr>
                <tr>
                    <td>104. 합정역 1번출구 앞</td>
                    <td>16</td>
                    <td>0</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>

2. ''`어떤 html tag`'' 를 넣어야 '==원하는 렌더링=='이 되는지 확인

렌더링 된걸 눈으로 보면 -> 칸 들이 들어가야 함

==칸== 을 표현하는 html tag 는? -> tr 이 녀석들

그걸 포함하는 tag 에 id 넣기

⭐⭐⭐⭐⭐ 렌더링 되어야 하는 것 -> 그거에 해당하는 html 태그 -> 포괄하는 id 확인 순으로

3. ajax 로 받아와서 console 에 찍기 : for 문을 돌릴 수 있기 전까지 찍기

<script>
    function q1() {
        // 여기에 코드를 입력하세요
        $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/sparta_api/seoulbike",
            data: {},
            success: function (response) {
                console.log(response['getStationList']['row'])
            }
        })
    }
</script>

주의!
- 기존에 작성된 전체 코드에서 q1 이 실행되는 조건은 업데이트 버튼 클릭 임. 따라서, 그걸 클릭해야 response 를 찍어볼 수 있음. ⭐⭐⭐⭐⭐
  - console 로 찍을 때, for문 으로 돌릴 수 있는 상태까지 확인하기 -> 그러면, 변수에 넣기 좋음 ⭐⭐⭐⭐⭐⭐⭐

4. 변수에 넣고 for문 돌기기

작성 코드

<script>
function q1() {
    // 여기에 코드를 입력하세요
    $.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']

                console.log(name, rack, bike)
            }
        }
    })
}
</script>

중요한 것
- 이때, 내가 원하는 대로 console 에 찍히는지 꼭! 확인 ⭐⭐⭐⭐⭐

결과물

5. jquery_append 사용해서 원하는 html 만들어주기

우선 돌아가는 코드

<script>
function q1() {

  // empty() = 업데이트 기능 핵심 ⭐⭐⭐⭐⭐ 
  $('#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 = `<tr>
                                  <td>${name}</td>
                                  <td>${rack}</td>
                                  <td>${bike}</td>
                              </tr>`

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

        }
    }
})

}



- 지워주는게 없으면 -> 업데이트가 아니라 '누적' 이 된다. ⭐⭐⭐⭐⭐⭐ -> so, `empty()` 까지 꼭! 해줄 것 

<br>
<br>

### 6. 5개보다 적은 곳 빨간색으로 칠하기 

<br>

- css 코드 
``` css
.urgent {
    color: red;
}

잘 되는지 테스트

let temp_html = `<tr class = "urgent">
                  <td>${name}</td>
                  <td>${rack}</td>
                  <td>${bike}</td>
              </tr>`

조건문 실행전 반드시 잘 되는지 테스트
- 이걸 하는게 중요함 ⭐⭐⭐⭐⭐

조건문 적용해서 넣어주기

<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']

              // 비어있는 temp html 
              let temp_html = `   `

              if (bike < 5) {
                  temp_html = `<tr class = "urgent">
                                  <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>

굉장히 중요한 패턴인 것 같은데 ⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐

💭 What i learned

'렌더링 되어야 하는 것', '어떤 html 태그?' '그걸 포괄하는 id' 를 확인 순으로 진행
[ajax 로 받아와서 console 에 찍을 때] 기존에 작성된 전체 코드에서 q1 이 실행되는 조건은 업데이트 버튼 클릭 임. 따라서, 그걸 클릭해야 response 를 찍어볼 수 있음. ⭐⭐⭐⭐⭐
[ajax 로 받아와서 console 에 찍을 때] console 로 찍을 때, for문 으로 돌릴 수 있는 상태까지 확인하기 -> 그러면, 변수에 넣기 좋음 ⭐⭐⭐⭐⭐⭐⭐

[변수 넣고 for 문 돌리기] for 문에 넣고 변수에 돌릴 때, 내가 원하는대로 찍히는지 꼭 확인
[원하는 HTML 만들때] 지워주는게 없으면 -> 업데이트가 아니라 '누적' 이 된다. ⭐⭐⭐⭐⭐⭐ -> so, empty() 까지 꼭! 해줄 것
[5개 미만 빨간색 표시] 조건문 실행전 반드시 잘 되는지 테스트 / 테스트 하는 것도 능력이라고 생각함. ⭐⭐⭐⭐⭐

728x90

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

'[WEB & AI] (feat. 취준) > 스파르타코딩클럽_웹개발종합반' 카테고리의 다른 글

2-10_Quiz_Ajax 연습하기(2) (2)	2023.10.06
2-9_Quiz_Ajax 연습하기(1) (2)	2023.10.06
2-7_Ajax 시작하기 (0)	2023.10.06
2-6_서버-클라이언트 통신 이해하기 (4)	2023.10.05
2-5_Quiz_JQuery 연습하기 (0)	2023.10.05

'[WEB & AI] (feat. 취준)/스파르타코딩클럽_웹개발종합반' Related Articles

Comments

Hello creators 🙌

2-8_Ajax 함께 연습하기 본문

2-8_Ajax 함께 연습하기

Ⅰ. 이번 회차 학습 목표 (goal)

1. 배우고자 하는 것

Ⅱ. 따릉이 API 데이터 구조 확인

1. 해봐

Ⅲ. ajax 퀴즈 1

1. 기본 제공 코드

2. ''어떤 html tag'' 를 넣어야 '==원하는 렌더링=='이 되는지 확인

3. ajax 로 받아와서 console 에 찍기 : for 문을 돌릴 수 있기 전까지 찍기

4. 변수에 넣고 for문 돌기기

5. jquery_append 사용해서 원하는 html 만들어주기

💭 What i learned

'[WEB & AI] (feat. 취준) > 스파르타코딩클럽_웹개발종합반' 카테고리의 다른 글

티스토리툴바

2. ''`어떤 html tag`'' 를 넣어야 '==원하는 렌더링=='이 되는지 확인