2-9_Quiz_Ajax 연습하기(1) (feat. 따릉이 api, ajax, append(), api 연결)

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-9_Quiz_Ajax 연습하기(1) (feat. 따릉이 api, ajax, append(), api 연결) 본문

[WEB & AI] (feat. 취준)/프론트&백엔드

2-9_Quiz_Ajax 연습하기(1) (feat. 따릉이 api, ajax, append(), api 연결)

부시매나_HA 2023. 1. 28. 13:46

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)


			}
		}
	})
}
</script>

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

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

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-11_2주차 끝 & 숙제 설명 (feat. 다키스트아워 팬명록, 온도 api 설정, ajax text 활용) (2)	2023.01.28
2-10_Quiz_Ajax 연습하기(2) (feat. 이미지, 텍스트 바꿔치기, ajax, attr, text, api 연결) (0)	2023.01.28
가독성 좋은 코드 작성을 위한 style guide (feat. CS50 수업, style guide) (0)	2023.01.25
[웹개발종합반] 1-5 CSS (feat. 부모-자식 관계, parent child, hierarchy) (0)	2023.01.24
[웹개발종합반] 1-4_Quiz_간단한 로그인 페이지 만들어보기 (0)	2023.01.24

'[WEB & AI] (feat. 취준)/프론트&백엔드' Related Articles

Comments

Hello creators 🙌

2-9_Quiz_Ajax 연습하기(1) (feat. 따릉이 api, ajax, append(), api 연결) 본문

2-9_Quiz_Ajax 연습하기(1) (feat. 따릉이 api, ajax, append(), api 연결)

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

1. 배우고자 하는 것

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

1. 해봐

Ⅲ. ajax 퀴즈 1

1. 기본 제공 코드

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

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

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

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

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

💭 What i learned

'[WEB & AI] (feat. 취준) > 프론트&백엔드' 카테고리의 다른 글

티스토리툴바

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