[스파르타코딩클럽] 웹개발 종합반 - 2주차(3)
2-10 Quiz_Ajax 연습하기(1)
서울시 OpenAPI(실시간 따릉이 현황)를 이용하기
1-1.따릉이 현황 나타내기
- 정답
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 cnt = rows[i]['rackTotCnt']
let bike = rows[i]['parkingBikeTotCnt']
let temp_html =`<tr>
<td>${name}</td>
<td>${cnt}</td>
<td>${bike}</td>
</tr>`
$('#names-q1').append(temp_html)
}
}
})
}- 나의 코드
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 cnt = rows[i]['rackTotCnt']
let bike = rows[i]['parkingBikeTotCnt']
❌❌❌ let temp_html=`<td>${name}${cnt}${bike}</td>`❌❌❌
}
$('#names-q1').append(temp_html)
}
})
}❌ let temp_html
바로 전에 풀었던 미세먼지 지수 퀴즈를 그대로 응용하는 문제였는데 그거 보면서 그 코드를 그대로 따라 쓰는 바람에 틀리고 말았다. (이해는 빠르나 응용이 안되는 편)
- 미세먼지
<ul id="names-q1">
<li>중구 : 82</li>
<li>종로구 : 87</li>
<li>용산구 : 84</li>
<li>은평구 : 82</li>
</ul> - 따릉이
<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>미세먼지는 names-q1 안에 li 하나의 코드만 있지만 따릉이는 tr 안에 td가 있는 이중구조였다는 걸 간과한 것이다.
temp_html = `<li>${gu_name} : ${gu_mise}</li>`그래서 미세먼지는 temt_html에 li 코드 하나만 적어도 되지만 따릉이는 tr, td 둘 다 적어줘야 한다. 멍청한 나는 또 출력될 내용이 td 안에 있으니까 li와 td가 곧이 곧대로 대응이 되는 줄 알았다...^^
그리고 또 하나,
names-q1에 원래부터 적혀있던 내용을 지워야 하는데 그걸 또 놓치고 지나갔다.
1-2.조건문 응용하기
- 정답
<sytle>
.urgent {
color: red;
font-weight: bold;
}
</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 rack_name = rows[i]['stationName'];
let rack_cnt = rows[i]['rackTotCnt'];
let bike_cnt = rows[i]['parkingBikeTotCnt'];
let temp_html = '';
if (bike_cnt < 5) {
temp_html = `<tr class="urgent">
<td>${rack_name}</td>
<td>${rack_cnt}</td>
<td>${bike_cnt}</td>
</tr>`
} else {
temp_html = `<tr>
<td>${rack_name}</td>
<td>${rack_cnt}</td>
<td>${bike_cnt}</td>
</tr>`
}
$('#names-q1').append(temp_html);
}
}
})
}
</script>
</head>
<body>
<h1>jQuery+Ajax의 조합을 연습하자!</h1>
<hr />
<div class="question-box">- 나의 코드
<style>
.good {
color: blue;
font-weight: bold;
}
.bad {
color: red;
font-weight: bold;
}
</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 cnt = rows[i]['rackTotCnt']
let bike = rows[i]['parkingBikeTotCnt']
let temp_html =``
if (bike > 10) {
temp_html = `<tr class="good">
<td>${name}</td>
<td>${cnt}</td>
<td>${bike}</td>
</tr>`
} else if (bike < 3) {
temp_html = `<tr class="bad">
<td>${name}</td>
<td>${cnt}</td>
<td>${bike}</td>
</tr>`
} else {
temp_html = `<tr>
<td>${name}</td>
<td>${cnt}</td>
<td>${bike}</td>
</tr>`
}
$('#names-q1').append(temp_html)
}
}
})
}
</script>이번엔 틀린 거 아님. 드디어 응용에 성공한 거임.
예전 수업 때 배운 조건문 중 else if를 활용해서 10보다 많으면 파란색, 3보다 적으면 빨간색으로 구현되도록 짜보았다.
실행하면 이런식으로 출력된다😎
2-10 Quiz_Ajax 연습하기(1)
랜덤 고양이 사진 API를 이용하기
- 정답
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)
}
})
}- 나의 코드
function q1() {
$.ajax({
type: "GET",
url: "https://api.thecatapi.com/v1/images/search",
data: {},
success: function (response) {
❌❌❌ let url = response['url'][0] ❌❌❌
}
❌❌❌ $("#img-cat").attr("src","url") ❌❌❌
})
}❌ let url
이제 변수를 써야하는 상황은 확실히 아는데 변수 유형이 바뀌기라도 하면 그것을 어떻게 호출해야 하는지 응용이 안된다. 여기에선 let imgurl = response[0]['url']를 적기 전, succsses: function(response) 다음에 console.log(response)를 사용했어야 했다.
[{…}]
0:
breeds: []
height: 276
id: "vxMLPUGso"
url: "https://cdn2.thecatapi.com/images/vxMLPUGso.png"
width: 388
__proto__: Object
length: 1
__proto__: Array(0)개발자 도구에서 확인하면 [0][url]이라는 url의 경로를 파악할 수 있다. 나는 순서만 바꿔서 썼는데 저것도 얻어 걸렸다. 뭘 알고 쓴 게 아니다.
❌ $('#id값').attr(src,변수값) : JQuery를 활용한 이미지의 src 변경
얼핏 보면 맞는 것 같지만 따옴표도 잘못 쓰고 코드도 } 안에 들어가야 한다. 하여튼 잘 안돼서 보면 이런 실수가 90% 이상이라니까...^^
민윤기의 믹테 가사가 생각나는 요즘...가끔씩 내가 천재인 것 같다가도 가끔씩 내가 재능이 없는 것 같기도 해^^... 나는 천재라는 생각조차 해본 적도 없다는 게 함정 가르쳐 준 건 기가 막히게 잘 하는데 기출 변형이라도 나오면 탁 막히니 암담하기만 하다.... IT업계에 종사하는 친구가 나보고 개발 잘할 것 같다고 했는데 아니었나봐 친구야....친구들이 나보고 컴퓨터, 로봇, AI 같다고 해서 나도 기계처럼 사고할 수 있다고 생각했는데...이렇게 휴먼이었단 게 증명 되었네요...^^ 이 코드들이 어떤 매커니즘으로 작동하는 건지 이해하려고 하지 말고 그냥 외우라는 얘기를 1주차 때부터 거의 매수업시간마다 들었는데 그게 잘 안 된다. INTP특인가 애초에 나란 사람자체가 원리를 파악해야만 이해하는 사고방식을 가져서 무조건 그냥 외우는 게 안 된다. 아니 차라리 영단어처럼 아무 이유없이 외우기만 하면 되는 거면 아주 간단한 문젠데 이해가 필요한 영역에는 매커니즘을 알고싶어서 미칠 것 같음.......하...어렵다......왜 그래야 하는지 이유도 모르고 무작정 외우는 것보다는 차라리 톨킨처럼 내가 언어를 직접 창조하는 쪽이 머리는 덜 깨질 것 같음
Author And Source
이 문제에 관하여([스파르타코딩클럽] 웹개발 종합반 - 2주차(3)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@cinephile/스파르타코딩클럽-웹개발-종합반-2주차3저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
