1. Javascript, Jquery 그리고 Ajax (서버에서 데이터 가져오기)
1주차에서는 웹의 개념과 HTML,CSS, 자바스크립트의 기본 문법에 대해 알아보았다면 이번 2주차는 본격적으로 자바스크립트를 기반으로 Jquery를 이용해 HTML을 조작하고 AJAX를 통해 서버API에서 데이터를 받아오는 법을 배웠다.
본격적인 내용에 들어가기에 앞서, 저번주 마지막에 배웠던 자바스크립트 기본 문법을
짝수/홀수에 따라 다른 경고문을 띄우는 onclick용 함수(아래 코드 참조)를 만들면서 내용을 시작하였다.
<script>
let count = 1;
function hey() {
if (count % 2 == 0) {
alert('짝짝짝👏');
} else {
alert('홀홀홀🎅');
}
count += 1;
}
</script>2.Jquery 시작하기 & 다뤄보기 (나홀로 메모장)
강사님은 javascript 기본 문법만으로 거의 모든 내용을 다룰수 있다고는 하셨지만, 코드 복잡성 및 브라우저 간 호환성 문제도 있고 해서 Jquery라는 라이브러리가 등장했다고 말씀하셨다. 그러면서 Jquery는 미리 전문가들이 만들어둔 자바스크립트 코드이기에 쓰기전에 미리 import를 해둬야 한다고 꼭 당부하셨다. (아래는 javascript 예시 코드와 jquery로 만든 동일 내용의 코드이다. 코드 길이면에서 확연히 차이가 난다.)
document.getElementById("element").style.display = "none"; // <-기본 자바스크립트로 만든 코드$('#element').hide(); // <-Jquery로 만든 코드일단 강사님 말씀대로 html 파일 안 코드 적는 란에 임포트를 해야하는데 해당 링크의 CDN 부분을 복사해 < head > 태그 안에 복사해 넣으면 임포트가 완료된다고 말씀하셨다. (코드는 다음과 같다.)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>또한, CSS에서 색깔이나 크기를 변경할때 해당 객체를 클래스 선언해줬어야 했는데, 이번 jquery는 id 선언을 통해 해당 객체를 선언해줘야 jquery로 미리 코드로 짜둔 동작 내용이 반영된다.
그 뒤 가장 많이 쓰는 jquery 기능들을 하나 하나 알려주셨다. 다음과 같다.
1) input 박스의 값을 가져와 보기
(예시가 되는 기반 코드들은 저번 1주차 부트스트랩 만들었던 나홀로 메모장 코드로 진행하셨다.)
<div class="posting-box">
<div class="form-group">
<label for="exampleInputEmail1">아티클 URL</label>
<input id<="post-url" type="email" class="form-control" aria-describedby="emailHelp"
placeholder="">
</div>
<div class="form-group">
<label for="exampleInputPassword1">간단 코멘트</label>
<input type="password" class="form-control" placeholder="">
</div>
<button type="submit" class="btn btn-primary">기사 저장</button>
</div>위의 코드들 중 < input id="post-url"~ >은 "아티클 URL"이라는 제목을 가진,
사용자의 입력값을 받는 input 박스이다. (다음 사진과 같다.)
그렇다면 해당 input 박스의 값을 가져올때는 다음과 같은 jquery 코드를 사용한다.
// 크롬 개발자도구 콘솔창에서 쳐보기
// id 값이 post-url인 곳을 가리키고, val()로 값을 가져온다.
$('#post-url').val();2) div 보이기 / 숨기기
<div class="posting-box" id="post-box">
<div class="form-group">
<label for="exampleInputEmail1">아티클 URL</label>
<input id="post-url" type="email" class="form-control" aria-describedby="emailHelp"
placeholder="">
</div>
<div class="form-group">
<label for="exampleInputPassword1">간단 코멘트</label>
<input type="password" class="form-control" placeholder="">
</div>
<button type="submit" class="btn btn-primary">기사 저장</button>
</div>위의 코드들 중 < div id = "post-box" ~ > 부분은 아티클 URL, 간단 코멘트, 기사 저장 모두를 포함하는 구역 상자이다. 이 부분을 보이거나 숨기려면 다음과 같은 코드를 입력해야한다.
// 크롬 개발자도구 콘솔창에 쳐보기
// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.(=css의 display 값을 none으로 바꾼다)
$('#post-box').hide();
// show()로 보이게 한다.(=css의 display 값을 block으로 바꾼다)
$('#post-box').show();hide() 코드를 입력했을시 다음 사진과 같이 아티클 URL, 간단 코멘트, 기사저장 부분이 사라진다.
3) CSS ('display') 값 가져오기, input 박스 값/text 값 변경하기
CSS('display') 값 가져오는 코드는 다음과 같다.
$('#post-box').hide(); // <- post-box 안 보임
$('#post-box').css('display'); // <-'none' 출력
$('#post-box').show(); // <- post-box 보임
$('#post-box').css('display'); // <- 'block' 출력그리고 input 박스 값과 text 값을 넣거나 변경하는 코드는 다음과 같다.
$('#post-url').val('여기에 텍스트를 입력하면!'); // <- input 박스 (id=post-url) 값 변경// 가리키고 싶은 버튼에 id 값을 준다음
<button id="btn-posting-box" type="button" class="btn btn-primary">포스팅 박스 열기</button>$('#btn-posting-box').text('포스팅 박스 닫기'); // <- text 값 (id=btn-posting-box) 변경4) 태그 내 html 추가 입력하기
html내 새로 추가 되는 내용이 있을시에 jquery를 이용하여 다음과 같이 처리할수 있다.
// 사이에 html을 넣고 싶은 태그에 id값을 준 다음
<div id="cards-box" class="card-columns">
<div class="card">
<img class="card-img-top" src="https://www.fodors.com/wp-content/uploads/2018/10/4_UltimateRome_PiazzaNavona-975x650.jpg" alt="Card image cap">
<div class="card-body">
<a href="https://naver.com/" class="card-title">여기 기사 제목이 들어가죠</a>
<p class="card-text">여기에 기사 내용이 들어가겠죠</p>
<p class="card-text comment">여기엔 코멘트가 들어갑니다</p>
</div>
</div>
</div>let temp_html = '<button>나는 추가될 버튼이다!</button>';
$('#cards-box').append(temp_html); // <- 버튼을 넣는 방법
// 주의: 홑따옴표(')가 아닌 backtick(`)으로 감싸야 합니다.
// 숫자 1번 키 왼쪽의 버튼을 누르면 backtick(`)이 입력됩니다.
// backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있습니다.
let img_url = 'https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg';
let link_url = 'https://naver.com/';
let title = '여기 기사 제목이 들어가죠';
let desc = '기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...';
let comment = '여기에 코멘트가 들어갑니다.';
let temp_html = `<div class="card">
<img class="card-img-top"
src="${img_url}"
alt="Card image cap">
<div class="card-body">
<a href="${link_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);
3. Jquery 적용하기 (나홀로 메모장)
그럼 이제 본격적으로 앞서 배웠던 기능들로 나홀로 메모장에 어떻게 적용하는지를 알려주셨다.
"포스팅 박스 열기" 버튼을 누르면 아까 아티클 URL~간단 코멘트~기사 저장 부분이 나오고
버튼 텍스트가 "포스팅 박스 닫기"로 변경되며 다시 버튼을 누르면 앞서 말했던 아티클 URL 부분이 사라지고 "포스팅 박스 열기"로 변경되는 동작 시퀀스를 만든다고 하셨다. (다음 GIF 사진 참고)
먼저, 함수를 만들고 해당 버튼에 함수와 함께 onclick 속성을 부여하자. (클릭시 "openclose" 함수 실행)
<script>
function openclose() {
// 여기에 jQuery를 이용해 코드를 짤 예정
}
</script>
// onclick 속성(attribute)을 추가합니다.
<button onclick="openclose()" class="btn btn-primary btn-lg">포스팅박스 열기</button>그 뒤, 포스팅 박스에 id 값(post-box)을 줌과 동시에 함수 부분을 if문 + 아까 css(display)와 show()/hide() 기능과 결합해 작성한 뒤,
<div class="form-post" id="post-box">
<div>
<div class="form-group">
<label for="exampleFormControlInput1">아티클 URL</label>
<input class="form-control" placeholder="">
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">간단 코멘트</label>
<textarea class="form-control" rows="2"></textarea>
</div>
<button type="button" class="btn btn-primary">기사저장</button>
</div>
</div>function openclose() {
// id 값 post-box의 display 값이 block 이면
if ($('#post-box').css('display') == 'block') {
// post-box를 가리고
$('#post-box').hide();
} else {
// 아니면 post-box를 펴라
$('#post-box').show();
}
}+) 추가로, 포스팅 박스 부분을 처음부터 가려두는것도 작성해둔다.(물론 class 선언뒤 CSS style 태그에서 display:none을 할수도 있겠지만, 본문 태그에 직접 적어 적용하는 이러한 방식을 inline-style이라고 한다.)
<div class="form-post" id="post-box" style="display:none"> // <- display:none inline 방식
<div>
<div class="form-group">
<label for="exampleFormControlInput1">아티클 URL</label>
<input class="form-control" placeholder="">
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">간단 코멘트</label>
<textarea class="form-control" rows="2"></textarea>
</div>
<button type="button" class="btn btn-primary">기사저장</button>
</div>
</div>이제 id 선언후 "포스팅 박스 열기/닫기" 버튼 텍스트가 변경되는것까지 함수에 추가하면 마무리가 된다.
<button id="btn-posting-box" onclick="openclose()" class="btn btn-primary btn-lg">포스팅박스 열기</a>function openclose() {
// id 값 post-box의 display 값이 block 이면
if ($('#post-box').css('display') == 'block') {
// post-box를 가리고
$('#post-box').hide();
// 가렸으니까 이제 열기로 바꿔두기
$('#btn-posting-box').text('포스팅 박스 열기');
} else {
// 아니면 post-box를 펴라
$('#post-box').show();
// 폈으니까 이제 닫기로 바꿔두기
$('#btn-posting-box').text('포스팅 박스 닫기');
}
}4. Jquery_Quiz 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;
}
</style>
<script>
function q1() {
// 1. input-q1의 입력값을 가져온다. $('# .... ').val() 이렇게!
// 2. 만약 입력값이 빈칸이면 if(입력값=='')
// 3. alert('입력하세요!') 띄우기
// 4. alert(입력값) 띄우기
}
function q2() {
// 1. input-q2 값을 가져온다.
// 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 구글링!)
// 3. info.spartacoding@gmail.com -> gmail 만 추출해서 ( .split('@') 을 이용하자!)
// 4. alert(도메인 값);으로 띄우기
// 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기
}
function q3() {
// 1. input-q3 값을 가져온다. let txt = ... q1, q2에서 했던 걸 참고!
// 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = `<li>${txt}</li>`) 요렇게!
// 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!)
}
function q3_remove() {
// 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)
}
</script>
</head>
<body>
<h1>jQuery + Javascript의 조합을 연습하자!</h1>
<div class="question-box">
<h2>1. 빈칸 체크 함수 만들기</h2>
<h5>1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기</h5>
<h5>[완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기</h5>
<input id="input-q1" type="text" /> <button onclick="q1()">클릭</button>
</div>
<hr />
<div class="question-box">
<h2>2. 이메일 판별 함수 만들기</h2>
<h5>2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기</h5>
<h5>2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기</h5>
<h5>[완성본]2-3. 이메일 도메인만 얼럿 띄우기</h5>
<input id="input-q2" type="text" /> <button onclick="q2()">클릭</button>
</div>
<hr />
<div class="question-box">
<h2>3. HTML 붙이기/지우기 연습</h2>
<h5>3-1. 이름을 입력하면 아래 나오게 하기</h5>
<h5>[완성본]3-2. 다지우기 버튼을 만들기</h5>
<input id="input-q3" type="text" placeholder="여기에 이름을 입력" />
<button onclick="q3()">이름 붙이기</button>
<button onclick="q3_remove()">다지우기</button>
<ul id="names-q3">
<li>세종대왕</li>
<li>임꺽정</li>
</ul>
</div>
</body>
</html>차례대로 function (함수) q1, q2, q3를 코드 작성하는거였는데 q1은 input 박스의 값 불러오기, q2는 input 박스 값을 불러오고 괄호안 해당 문자가 있는지 보고 true/false 값을 출력하는 includes와 저번에 배웟던 split 기능을 이용하여 이메일 도메인을 최종적으로 출력하는 방법을 복습하고, q3는 새로 추가할 html 내용을 넣는 방법을 (append 기능 이용) 복습하는것이었다.
완성 해답 코드는 다음과 같았다.
<!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;
}
</style>
<script>
function q1() {
// 1. input-q1의 입력값을 가져온다.
let value = $('#input-q1').val();
// 2. 만약 입력값이 빈칸이면 if(입력값=='')
if (value == '') {
// 3. alert('입력하세요!') 띄우기
alert('입력하세요!');
} else {
// 4. alert(입력값) 띄우기
alert(value);
}
}
function q2() {
// 1. input-q2 값을 가져온다.
let email = $('#input-q2').val();
// 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 찾아보자!)
if (email.includes('@')) {
// 3. info.spartacoding@gmail.com -> gmail 만 추출해서
// 4. alert(도메인 값);으로 띄우기
let domainWithDot = email.split('@')[1];
let onlyDomain = domainWithDot.split('.')[0];
alert(onlyDomain);
} else {
// 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기
alert('이메일이 아닙니다.');
}
}
function q3() {
// 1. input-q3 값을 가져온다.
let newName = $('#input-q3').val();
if (newName == '') {
alert('이름을 입력하세요');
return;
}
// 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = `<li>${가져온 값}</li>`)
let temp_html = `<li>${newName}</li>`;
// 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!)
$('#names-q3').append(temp_html);
}
function q3_remove() {
// 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)
$('#names-q3').empty();
}
</script>
</head>
<body>
<h1>jQuery + Javascript의 조합을 연습하자!</h1>
<div class="question-box">
<h2>1. 빈칸 체크 함수 만들기</h2>
<h5>1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기</h5>
<h5>[완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기</h5>
<input id="input-q1" type="text" /> <button onclick="q1()">클릭</button>
</div>
<hr />
<div class="question-box">
<h2>2. 이메일 판별 함수 만들기</h2>
<h5>2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기</h5>
<h5>2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기</h5>
<h5>[완성본]2-3. 이메일 도메인만 얼럿 띄우기</h5>
<input id="input-q2" type="text" /> <button onclick="q2()">클릭</button>
</div>
<hr />
<div class="question-box">
<h2>3. HTML 붙이기/지우기 연습</h2>
<h5>3-1. 이름을 입력하면 아래 나오게 하기</h5>
<h5>[완성본]3-2. 다지우기 버튼을 만들기</h5>
<input id="input-q3" type="text" placeholder="여기에 이름을 입력" />
<button onclick="q3()">이름 붙이기</button>
<button onclick="q3_remove()">다지우기</button>
<ul id="names-q3">
<li>세종대왕</li>
<li>임꺽정</li>
</ul>
</div>
</body>
</html>완성된 화면은 다음 gif와 같다.
5. 서버-클라이언트 통신 이해하기
일단 서버에서 클라이언트로 데이터를 주는 방식인 JSON을 이해해야한다.
크롬 익스텐션 JSON view에 들어가서 확장자 설치후 서울시 미세먼지 OpenAPI에 접속하면 다음과 같은 코드가 뜰 것이다.
{
"RealtimeCityAir": {
"list_total_count": 25,
"RESULT": {
"CODE": "INFO-000",
"MESSAGE": "정상 처리되었습니다"
},
"row": [
{
"MSRDT": "202205122100",
"MSRRGN_NM": "도심권",
"MSRSTE_NM": "중구",
"PM10": 27.0,
"PM25": 16.0,
"O3": 0.044,
"NO2": 0.021,
"CO": 0.4,
"SO2": 0.003,
"IDEX_NM": "보통",
"IDEX_MVL": 62.0,
"ARPLT_MAIN": "O3"
},
{
"MSRDT": "202205122100",
"MSRRGN_NM": "도심권",
"MSRSTE_NM": "종로구",
"PM10": 41.0,
"PM25": 20.0,
"O3": 0.046,
"NO2": 0.017,
"CO": 0.5,
"SO2": 0.003,
"IDEX_NM": "보통",
"IDEX_MVL": 64.0,
"ARPLT_MAIN": "O3"
},
{
"MSRDT": "202205122100",
"MSRRGN_NM": "도심권",
"MSRSTE_NM": "용산구",
"PM10": 39.0,
"PM25": 24.0,
"O3": 0.042,
"NO2": 0.025,
"CO": 0.5,
"SO2": 0.003,
"IDEX_NM": "보통",
"IDEX_MVL": 61.0,
"ARPLT_MAIN": "O3"
},
...이렇게 "RealtimeCityAir" 키값과 딕셔너리형 value값이 있고 또 그 value값 안에 "row" 값 안에 리스트형 value 값이 서로 얽혀져있는, 우리가 앞서 배웠던 이런 딕셔너리형과 리스트형의 데이터가 서로 연결되어있는 데이터 구조를 JSON이라 하며 보통 서버 데이터는 이런 구조를 띄고 있다. 이런 데이터 형식에서 서버는 클라이언트에게 클라이언트가 요청한 데이터를 전송한다.
이렇게 json을 배운 뒤 강사님은 클라이언트에서 서버로 데이터 요청을 하는 방식, 특히 GET을 알려주셨다. 본격적으로 들어가기전에 앞서 강사님은 먼저 API에 대해서 이해해야한다고 하셨는데, API(APPLICATION PROGRAMMING INTERFACE)는 단순히 말해서 은행 창구와 같다고 하셨다. 은행에서도 개인 고객이냐 기업 고객이냐에 따라서, 요청에 따라서 처리해야하는게 달라지는 만큼, 서버와 클라이언트 사이에 위치하면서 요청하는 '타입'에 따라 어떤 데이터를 주고 받을지 결정하고 흐름을 중개해주는 역할을 하는것이 API라고 하셨다. (더 나아가서는 서로 다른 프로그램과 프로그램간의 통신도 중개하는것도 API라고 하셨다.)
크게는 "GET"과 "POST"로 나뉘어진다고 하셨는데, GET은 데이터 조회(Read)를 요청할때 쓰고, POST는 데이터의 생성(Create),변경(Update),삭제(Delete)요청을 할때 쓴다고 하셨다. (이번 2주차때는 GET만을 쓸거고 POST는 4주차에 사용한다고 하셨다.)
그러면서 대표적인 GET 요청 방식의 예시를 보여주셨는데, 바로 구글 검색시 나타나는 웹 주소였다. (다음과 같다)
? : 여기서부터 전달할 데이터가 작성된다는 의미입니다.
& : 전달할 데이터가 더 있다는 뜻입니다.
예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
위 주소는 google.com의 search 창구에 다음 정보를 전달합니다!
q=아이폰 (검색어)
sourceid=chrome (브라우저 정보)
ie=UTF-8 (인코딩 정보)그러면서 이런 방식은 모두 프론트엔드-백엔드 개발자간의 약속으로 정해진다고 하셨다.
6. AJAX 시작하기 & 연습하기 (서울시 미세먼지 OPEN API)
일단 앞서 배운 JSON-API-GET 내용을 실전으로 배우기 위해 강사님은 AJAX 문법을 사용한다고 하셨다.
먼저 AJAX를 사용하기 위해선 JQUERY를 임포트 해야하기 때문에 꼭 앞서 배웠던 JQUERY 임포트 방법을 하라고 하셨고, AJAX의 기본 구조(GET) + 서울시 미세먼지 OPEN API와 결합한 내용은 다음 코드와 같다고 하셨다.
$.ajax({
type: "GET", // GET 방식으로 요청한다.
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
}
})
//
GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져갑니다.
http://naver.com?param=value¶m2=value2
POST 요청은, data : {} 에 넣어서 데이터를 가져갑니다.
data: { param: 'value', param2: 'value2' },
//이를 이용해 모든 구의 이름과 미세먼지 값을 출력하는 코드를 짜보기로 했다.
일단, 미세먼지 데이터가 정확히 어디에 있는지 찾고 (RealtimeCityAir -> row 에 위치)
$.ajax({
type: "GET",
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {},
success: function(response){
let mise_list = response["RealtimeCityAir"]["row"]; // 꺼내는 부분!
console.log(mise_list);
}
})그 다음, 반복문으로 출력해본뒤
$.ajax({
type: "GET",
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {},
success: function (response) {
let mise_list = response["RealtimeCityAir"]["row"];
for (let i = 0; i < mise_list.length; i++) {
let mise = mise_list[i];
console.log(mise);
}
},
});구 데이터에서 구 이름, 해당 구 미세먼지 수치를 출력하기 위해 구 이름 키 값인 "MSRSTE_NM", 미세먼지 수치 키값인 "IDEX_MVL"의 밸류를 입력하면 완성이다.
$.ajax({
type: "GET",
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {},
success: function (response) {
let mise_list = response["RealtimeCityAir"]["row"];
for (let i = 0; i < mise_list.length; i++) {
let mise = mise_list[i];
let gu_name = mise["MSRSTE_NM"];
let gu_mise = mise["IDEX_MVL"];
console.log(gu_name, gu_mise);
}
}
});이제 본격적으로 AJAX를 이용해 HTML 완성본까지 만들어보기 위해 다음과 같이 강사님이 코드문을 주셨다.
<!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;
}
</style>
<script>
function q1() {
// 여기에 코드를 입력하세요
}
</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">
<li>중구 : 82</li>
<li>종로구 : 87</li>
<li>용산구 : 84</li>
<li>은평구 : 82</li>
</ul>
</div>
</body>
</html>업데이트 버튼에 onclick으로 걸려있는 q1 함수를 채우면 완성되는것이기에 해당 부분만 채워넣으면 완성본은 다음과 같다.
<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 = `<li>${gu_name} : ${gu_mise}</li>`
$('#names-q1').append(temp_html);
}
}
})
}
</script>일단 업데이트 버튼 onclick으로 q1 함수가 실행될때마다 .empty 기능을 이용해 지난 기록된 데이터들은 싹 지워지고 새로운 데이터 값을 받으면 되며 새로운 값을 받기 위해 적어야 하는 코드는 아까 적었던 반복문 코드와 append 코드문을 합친것과 같다.
+) 여기서 더 나아가서 미세먼지 수치가 70 이상인 곳만 표시하게 된다면 어떻게 해야할지 다음 코드문과 같이 강사님이 추가적으로 알려주셨다.
<!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;
font-weight: bold;
}
</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 > 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>if문을 이용해 gu_mise(IDEX_MVL)이 70 초과면 append 기능으로 채워넣을 temp_html이 class "bad" 스타일(글자색 빨간색, 폰트 굵음)이 적용된 html로 들어갈거고, 초과가 아니라면 class "bad"는 빠진채로 html 내용이 추가된다. 마지막 완성본을 실행하면 다음 gif와 같이 나온다.
7. AJAX_Quiz 1 & 2 연습하기
강사님은 QUIZ를 두 가지 주셨는데 첫번째는 또 다른 서울시 OPEN API 공유 자전거 따릉이였다.
해당 API 주소로 다음의 코드문을 완성하는것이었다.
<!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>방금 해본 미세먼지와 같은 형식으로서 비슷하게 진행하면 완성 코드문은 다음과 같다.
<!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() {
$('#names-q1').empty();
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulbike",
data: {},
success: function (response) {
let rows = response["getStationListHist"]["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 = `<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">
<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">
</tbody>
</table>
</div>
</body>
</html>+) 더 나아가 거치된 따릉이 대수가 5대 미만이라면 다음과 같이 추가적으로 작성하면 된다.
<!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;
}
.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">
<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">
</tbody>
</table>
</div>
</body>
</html>완성된 화면은 다음 gif와 같다.
두번째 퀴즈는 랜덤으로 고양이 사진이 업데이트 되어 나오는 웹 페이지를 구현하는것이었다.
이번에는 JQUERY에서 src 이미지 태그 변경하는 법을 알아야 하는데 해당 링크에 나와있었다. 적용하면 다음과 같은 완성 코드가 나온다.
<!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>
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>3. 랜덤 고양이 사진 API를 이용하기</h2>
<p>예쁜 고양이 사진을 보여주세요</p>
<p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
<button onclick="q1()">고양이를 보자</button>
<div>
<img id="img-cat" width="300" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/>
</div>
</div>
</body>
</html>완성된 화면은 다음 gif 같이 나온다.
8. 2주차 숙제
2주차 숙제는 1주차 숙제인 쇼핑몰 페이지에 환율 기능을 넣는것이었다. 환율 API는 해당 링크를 참조하면 되고 페이지가 로딩되자마자 환율이 뜨게하기 위해 다음 코드문을 이용해야한다고 하셨다.
$(document).ready(function(){
alert('다 로딩됐다!') <- 페이지가 로딩되자마 '다 로딩됐다~' 경고문 팝업
});완성 코드문은 다음과 같다.
...(중략)
<style>
.rate {
color: blue;
}
</style>
<script>
function order() {
alert('주문이 완료되었습니다.');
}
$(document).ready(function () {
get_rate()
});
function get_rate() {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/rate",
data: {},
success: function (response) {
let current_rate = response['rate']
$('#current-rate').text(current_rate)
}
})
}
</script>
</head>
<body>
<div class="wrap">
<div class="item_image"></div>
<div class="item_desc">
<h1>기름 램프를 팝니다 <span class="price">가격: 3000원/개</span></h1>
<p>이 램프는 사실 소원을 들어주는 램프입니다. 기름을 넣고 불을 키면 어떤 소원이든지 들어드려요. 게다가 좋은 아로마 향도 난답니다.</p>
<p class="rate">달러-원 환율: <span id="current-rate">1219.5</span></p>
</div>
...(중략)완성된 화면은 다음 gif와 같이 작동한다.
