스파르타코딩클럽 웹개발 종합반 2주차 완료. 학교 과제와 스파르타를 병행하느라 스파르타 진도가 조금 밀렸다. 이번 주는 밀리지 않도록 꾸준히 조금씩 페이스를 유지해 보도록 하자.
이번 주차는 jQuery 와 Ajax 를 어떻게 다루는지 공부했다. HTML 파일에서 우리는 Javascript 로 서버에 데이터를 요청하고 받는다. 하지만 자바스크립트만 사용하면 코드가 복잡하기 때문에 HTML 안에서 jQuery 를 이용해 자바스크립트를 보다 쉽게 제어하고, 다시 Ajax 를 이용해 서버에 요청한 데이터를 받는다.
jQuery
jQuery 란 HTML 의 요소들을 조작하는, 편리한 Javascript 를 미리 작성해 둔 것이다. 즉, 라이브러리라고 생각하면 된다. 자바스크립트로도 모든 기능을 구현할 수는 있다. 하지만 코드가 복잡할 뿐만 아니라 브라우저 간 호환성 문제도 고려해야 하기에 jQuery 라는 라이브러리가 만들어진 것.
jQuery = 편리한 Javascript 를 미리 작성해 둔 "라이브러리."
<script>
// Javascript
document.getElementById("element").style.display = "none";
// jQuery
$('#element').hide();
</script>위에 비교한 코드를 보면, 자바스크립트 코드보다 jQuery 코드가 훨씬 간단하고 직관적임을 알 수 있다. jQuery 는 자바스크립트와 같지 않은 특별한 소프트웨어가 아니라, 그냥 미리 작성된 자바스크립트 코드이다. 전문 개발자들이 짜 둔 코드를 가져와서 사용하는 것이기 때문에, 쓰기 전에 반드시 임포트를 해야 한다.
jQuery 임포트하기
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
</head>가뜩이나 "너무 어렵고 복잡하다" 는 생각이 들었는데 시작하기도 전에 "이 복잡한 것들을 다 외울 생각" 을 한다면 당신은 바보다. 모든 jQuery 를 외울 필요, 단 1도 없다. 스크롤의 움직임을 감지한다거나 화면 사이즈를 출력하는 등 jQuery 가 할 수 있는 일은 매우 많으니, 필요할 때 필요한 기능을 구글링해서 쓰면 된다. 어차피 나중에 시간 지나면 외운 것도 잊어버리고, 일부러 외우지 않은 것도 자연히 외워지기 마련이다. 그러니 외우지 마라. 시간 낭비다. 계속 쓰다 보면 외워지겠지 뭐.
JSON View
서버와 클라이언트 간 통신을 알아보기 위해 서울시 OpenAPI 데이터를 불러왔다. (추천 - Chrome extension 중 JSON View 를 설치하면 조금 더 깔끔하게 데이터를 볼 수 있다.)
JSON 은 Key:Value 로 이루어져 있다. 자료형 딕셔너리와 매우 유사한 형태다.
API
API 는 은행 창구와 같다. 같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 가져와야 하는 서류나 처리 방식이 다른 것처럼. 클라이언트가 서버에 요청할 때, GET 과 POST 라는 두 가지 "타입" 이 존재한다.
- GET → 데이터 조회(Read)를 요청할 때
예) 영화 목록 조회 등- POST → 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
예) 회원 가입, 회원 탈퇴, 비밀번호 수정 등
이 중에서 이번 주에는 GET 방식에 대해 공부한다. (POST 방식은 4주차 개발일지에 등장한다)
GET 방식으로 데이터를 전달하는 방법
먼저 아래 예시를 보자.
예시1) https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967
위 주소는 "?" 를 기점으로 크게 두 부분으로 쪼개진다.
"?" 를 기준으로 앞부분이 [서버 주소], 뒷부분이 [영화 정보] 다.
서버 주소: https://movie.naver.com/movie/bi/mi/basic.nhn
영화 정보: code=161967
여기서 "code" 라는 이름으로 영화에 번호를 매기는 것은 프론트엔드 개발자와 백엔드 개발자가 미리 정해둔 약속이다. 다음 예시를 보자.
예시2) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
위 주소는 google.com 의 search 창구에 다음 정보를 전달한다.
q=아이폰 (검색어)
sourceid=chrome (브라우저 정보)
ie=UTF-8 (인코딩 정보)정리하면 아래와 같다.
? : 여기서부터 전달할 데이터가 작성됨
& : 전달할 데이터가 더 있음
Ajax
Ajax 사용 시에 주의할 점이 있다. Ajax 는 jQuery 를 임포트한 페이지에서만 동작한다. 즉, 구글에서 개발자 도구를 열면, jQuery 임포트가 되어 있지 않기 때문에 아래와 같이 에러가 뜬다.
Uncaught TypeError: $.ajax is not a functionAjax 기본 골격
Ajax 를 불러오는 기본 코드이다.
<script>
$.ajax({
type: "GET", // GET 방식으로 요청
url: "여기에-URL을-입력",
data: {}, // 요청하면서 함께 줄 데이터 (GET 요청 시 공백)
success: function(response) { // 서버에서 준 결과를 response 라는 변수에 담음
// 코드 입력
}
})
</script>
크롬에서 Inspect 를 누른 후, 콘솔에 들어간다. 코드 입력하는 부분에 console.log(response) 를 입력하면 콘솔 창에 출력값이 쌓인다.
연습하기
자바스크립트의 기초 문법을 Ajax 에 적용해보자. 좀 더 그럴싸해진다.
OpenAPI 가져와 출력하기
서울시 자전거 '따릉이' OpenAPI 를 가져왔다. 코딩하기 전에, 주의할 점 겸 힌트는 아래와 같다.
// 표 안에 해당하는 값을 출력
<td>${variable_name}</td>
// 빨간색으로 출력: 클래스를 만들어 스타일에 적용, 전체 텍스트에 색을 입힌다.
<tr class="class_name">표 안에 해당하는 값을 넣고, 주차되어 있는 자전거가 5대 미만일 경우 빨간색으로 출력하는 부분까지의 코드이다.
<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 = ''; // 작은 따옴표가 아니라 백 팁
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>jQuery 이미지 태그 src 바꾸기
고양이 OpenAPI 를 가져왔다. 버튼을 누르면 이미지가 업데이트 되면서 랜덤으로 사진을 가져와 화면에 출력하는 코드이다.
<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>특정 값 선-로딩, 후-출력하기
<script>
// rate 함수를 가져와 먼저 로딩 후 화면에 출력
$(document).ready(function () {
rate();
});
function rate() {
$('#exchange-rate').empty()
$.ajax({
type: "GET",
url: "https://api.manana.kr/exchange/rate.json",
data: {},
success: function (response) {
let USDtoKRW = response['1']['rate']
let temp_html = `<text> USD to KRW : $1 = ₩ ${USDtoKRW}</text>`
$('#exchange-rate').append(temp_html)
}
})
}
</script>
<body>
<p class="product-info"> Exchange Rate </p>
<div class="product-info">
<ul id="exchange-rate">
<li> USD to KRW : $1 = ₩1200</li>
</ul>
<button class="button-design" onclick="rate()"> Update</button>
</div>
</body>
꾸준히 연습하자.
