2주차에는
1주차에 웹의 정적인 요소들인 HTML + CSS 를 다루는 것을 넘어
웹 페이지를 동적으로 만들어주는 JavaScript에 대해 깊이있게 돌아보는 시간이었다.
JavaScript 를 통해, 모든 웹 페이지의 HTML 요소를 건들여줄 수 있지만
1) 너무 복잡하고
2) 브라우저 간의 호환성 문제가 있어서
미리 전문 개발자들이 짜놓은, jQuery 라는 라이브러리를 임포트해서 사용하면 매우매우 편리하다.
사실 예전에 웹개발을 아무것도 모를 때,
맨땅에 부딫혀가며 구글링하며 jQuery고 ajax고 사용해본 적 있었지만,
그 땐 이렇게 정리되게 배우질 못해서, 이것에 대해 듣자마자 확실히 이해가 갔다.
역시 정제된 지식을 얻기 전에, 일단 굴러보는 것도 나에게 큰 도움이 된다는 것을 또 다시 느꼈다.
jQuery 를 통해서 HTML 요소들을 다루기 위해서는
HTML 요소의 태그에 id 속성을 붙여줘야 한다.
<div class="question-box">이렇게 HTML div 요소에, class 태그를 붙여주는 것은 css 속성을 추가해줄 때이고
<ul id="names-q1">이렇게 HTML ul 요소에, id 태그를 붙여주는 것은 JavaScript에서 id를 통해 HTML Element를 찾게 해준다.
$('#names-q1').empty();jQuery의 사용 예시이다.
해석하면, HTML elements 중에서 id 값이 names-q1 인 요소를 찾아서 가져온 뒤에
미리 정의해놓은 메서드인 empty() 메서드를 사용해서 ( = 그래서 자바스크립트 코드가 매우 직관적이 된다 ! )
해당 HTML 요소 내부에 있는 내용을 비우는 것이다.
$.ajax({
type : "GET",
url : "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data : {},
success : function(response) {
console.log("success!");
let rows = response['RealtimeCityAir']['row'];
for ( let i = 0 ; i<rows.length ; i++) {
gu_names.push(rows[i]['MSRSTE_NM'])
gu_mises.push(rows[i]['IDEX_MVL'])
}
// console.log(gu_names.length);
// console.log(gu_mises.length);
}
$.ajax() 를 사용해서 HTTP Request 를 만든다.
ajax 실습을 하던 도중 작성한 코드이다. ( = 서울시 미세먼지 데이터를 JSON 으로 받아서, 가공한 뒤 내가 원하는 정보를 저장하는 코드를 작성해보았다.
console.log()를 통해 데이터가 제대로 왔는지, 모양은 어떤지 console 창을 통해 확인하며 학습했다. )
웹 페이지에서 jQuery를 import 했다는 가정 하에,
ajax 를 사용하여, 서버와 클라이언트가 통신 = 정보를 주고받을 수 있다.
HTML을 다시 로드할 필요 없이, 서버에서 데이터만 JSON or XML 형식으로 받아서
다시 클라이언트의 HTML을 JavaScript를 사용해 바꿔주는 것이다,
Ajax란
Asynchronous
Javascript
And
Xml
의 약자로, 솔직히 처음에 "비동기적인" 이라는 이름에서 거부감이 들어서 막연히 아~ 어렵다~ 싶었던거였는데
막상 오늘 실습해보니, 뭐야 별거 아니네 하는 생각이 들었다.
명확히 개념을 인지하고 간 하루여서, 막연히 두려워했던 것이 사실 별 거 아니였다는 생각이 든 하루였다 :)