jQuery란?
HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. (라이브러리)
Javascript 만으로도 버튼의 색깔을 바꾸거나, 박스를 감추는 등 구현할 수는 있지만 코드가 복잡하고 브라우저 간 호환성 문제도 고려해야합니다. 그래서 등장한 것이 jQuery!
jQuery는 미리 작성된 Javascript 코드입니다. 전문 개발자들이 짜둔 코드를 사용하는 것입니다.
그래서 쓰기 전에 '임포트'를 해야합니다.
jQuery + Ajax의 조합
jQuery를 이용해 Javascript로 HTML을 쉽게 제어하고, Ajax를 이용해 다시 서버에 데이터를 요청하고 받는 연습을 해보겠습니다.
📌서울시 API
http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99
📌 JSON 설치
https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko
API는 은행 창구와 같습니다. 같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 가져와야 하는 것과 처리해주는 것이 다른 것처럼, 클라이언트가 요청 할 때에도, "타입"이라는 것이 존재합니다. 여러가지 타입 중 GET 타입에 대해서 알아보도록 하겠습니다.
* GET 타입
통상적으로! 데이터 조회(Read)를 요청할 때
예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
📌미세먼지 API
http://spartacodingclub.shop/sparta_api/seoulair
📌ajax 기본 골격 코드
$.ajax({
type: "GET",
url: "여기에URL을입력",
data: {},
success: function(response){
}
})
✏️결과
<script>
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulair",
data: {},
success: function(response){
let rows = response['RealtimeCityAir']['row'] ▶︎ 검사-console 화면에 있는 미세먼지 API '이름' 가져오기
for (let i = 0; i < rows.length; i++) {
let gu_name = rows[i]['MSRSTE_NM'] ▶︎ 서울시 '구'의 이름
let gu_mise = rows[i]['IDEX_MVL'] ▶︎ 미세먼지 수치
console.log(gu_name,gu_mise) ▶︎이름, 미세먼지 수치만 추출하여 console 화면에 뜬다
}
}
})
</script>
📌연습2 업데이트를 누르면 미세먼지 구 이름과 수치가 뜬다.
<script>
function q1() {
$('#names-q1').empty(); ▶︎업데이트 할 때마다 지워진 상태로 시작하기
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulair",
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 = `<li>${gu_name} : ${gu_mise}</li>`
$('#names-q1').append(temp_html);
}
}
})
}
</script>
📌연습 3. '70' 이상은 빨간색으로
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery 연습하고 가기!</title>
<!-- jQuery를 import 합니다 -->
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
.bad {
color: red;
font-weight: bold;
}
</style>
<script>
function q1() {
// 여기에 코드를 입력하세요
$('#names-q1').empty();
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulair",
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 > 70) {
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>1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기</h2>
<p>모든 구의 미세먼지를 표기해주세요</p>
<p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
<button onclick="q1()">업데이트</button>
<ul id="names-q1">
</ul>
</div>
</body>
</html>
📎최종결과 이미지
후기
갈수록 다양한 코딩언어가 등장하고 배웠던 것도 헷갈리기 시작한다. 오늘도 10분짜리 영상을 복습하고 기록하면서 이해하느라고 3시간이 걸린 것 같다. 코딩언어는 외울 필요는 절대 없지만 가지고 올 코딩 언어, 함수를 잘 이해해야 적절하게 배치하고 사용할 수 있다. 지금 당장 왜 let 이 들어가는지 왜 li 다음에 class 가 들어가는지, 이유를 찾는 것은 의미가 없다. 우선은 전체적으로 내가 원하는 그림을 만들기 위해 들어가는 대강의 모양새를 이해하는 중이다. 예를 들어 클릭하는 행위를 했을 때 이미지가 뜨게 하고 싶다면 temp_html 이 들어가는 문장이 필요하다는 것을 기억하면 된다. 그 문장을 그대로 옮겨다가 script 라고 하는 부분에 잘 넣어주면 된다.
다만 강사님의 표현 방식은 여전히 어려울 때가 많다. 미세먼지의 API 를 보고 '이걸 돌리고 싶으면 어떻게 하면 될까요?' '돌린다'의 의미가 도통 이해가 되지 않았지만 그냥 일단 따라해보고 있다. 결과를 보고서 이해가 되기도 한다. 오늘도 조금씩이나마 이해해서 다행이다. 그리고 강의 들을 때 팁은 강의자료에 내용을 읽어가면서 들어야 한다는 것이다. 강사님이 상세하게 설명해 주시기 않기 때문에 코딩 언어의 정의나 구체적인 설명을 확인하면 조금 더 이해가 쉽다.
'창업일지' 카테고리의 다른 글
| 스파르타 코딩 강의 정리_API 이용하여 업데이트 웹사이트 만들기 (0) | 2023.01.17 |
|---|---|
| 스파르타 코딩 강의 정리_API를 이용해 원하는 구성으로 웹에 표현하기 (0) | 2023.01.15 |
| 무자본 소자본 창업 준비 과정#2_스파르타 코딩 2주차 자바스크립트 정리 및 후기 (0) | 2023.01.10 |
| 무자본 소자본 창업 준비 과정 #1_스파르타 코딩 기초 <2023년 나의 버킷리스트 만들기> 정리 (1) | 2023.01.08 |
| 무자본 소자본 창업 준비 과정 #0_프롤로그 (1) | 2023.01.08 |
