내일배움단 Web2.2
[웹개발 종합반] 2주 2일차 개발일지(2주 7-11강, 숙제)
💻TIL Web.202
1. 서버-클라이언트 통신 이해하기
1) JSON
Ajax는 자바스크립트를 이용해 페이지 전환 없이 서버에서 값을 받아올 수 있는 방법이다. 클라이언트는 서버에게 데이터를 요청하는데, 이때 서버가 클라이언트에게 요청을 받는 창구를 API라고 한다. 서버가 클라이언트에게 요청을 받은 후 데이터를 내려줄 때의 포맷이 있는데, 이 포맷을 JSON이라고 한다. JSON은 Array(리스트)와 Object(딕셔너리)의 조합과 그 생김새가 같다. 실제 값을 이용할 때는 이러한 구조를 타고 타고 들어가서 값에 접근한다.
2) 클라이언트->서버: GET 요청
앞에 정의된 대로 API는 서버가 클라이언트에게 데이터 요청을 받는 창구라 할 수 있다. 클라이언트는 GET과 POST를 포함한 여러 타입으로 데이터를 요청할 수 있다. 통상적으로 GET은 데이터 조회(read)를 할 때, POST는 데이터 생성(create), 변경(Update), 삭제(delete) 요청을 할 때 사용된다. 예를 들어, 조건에 맞는 영화를 조회할 때는 GET, 회원가입과 탈퇴, 수정 등은 POST를 이용한다.
- GET이 url을 요청할 때
우리가 브라우저에 무언가를 입력하고 엔터를 치는 행위도 GET 요청에 해당한다. 아래의 url 주소를 간단히 살펴보자.
https://movie.naver.com/movie/bi/mi/basic.naver?code=187320
<!--
movie.naver.com => 서버의 주소 ex)우리은행 용산지점
/movie/bi/mi/basic.naver => API의 주소 ex)우리은행 용산지점 안에서의 창구 이름(입출금 창구)
code=187320 => 고객이 가지고 가는 데이터 ex)주민등록증...
-->
주소에서 ?를 기준으로 앞쪽이 서버 주소, 뒤쪽이 고객이 가져가는 정보다. 위 예시에서는 고객이 code라는 값을 가져가는데, 이 값은 프론트엔드와 백엔드 개발자가 합의해 정한 이름이다. 이 이름이 같아야 데이터가 제대로 전달될 수 있다. 한편 ? 뒤에 & 표시로 고객이 가져가는 정보를 덧붙일 수 있는데, 기존 주소에서 어떤 값을 덧붙여도 제대로 작동은 한다. 이는 꼭 필요한 정보만 사용하고 불필요한 정보는 사용하지 않기 때문이다.
2. Ajax 시작하기
Ajax는 jQuery를 import한 페이지에서만 작동한다.
다른 페이지의 개발자 도구 Console창에서는 Ajax 입력 시 에러가 뜬다.
- Ajax 기본 골격
$.ajax({
type: "GET",
url: "여기에URL을입력",
data: {},
success: function (response) {
console.log(response);
}
})
Ajax를 사용할 때는 위 코드를 그대로 가져다 복사해 쓰면 된다. type는 앞에서 배운 GET과 POST 등의 타입이며, url은 API 주소에 해당한다고 볼 수 있다. data는 요청하면서 함께 줄 데이터인데, 주로 POST에서 사용하므로 GET 요청 시에는 비워둔다. function의 parameter인 response(변수명은 바뀔 수 있음)에는 서버에서 준 결과가 자동으로 담긴다. 예를 들어, 미세먼지 Open API 주소를 url에 입력하면 Ajax를 통해 관련 데이터에 접근하고 값을 처리할 수 있다.
3. Ajax 연습하기
1) 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기
① 서울시 OpenAPI의 모든 구 이름과 미세먼지 수치 표기하기
② 업데이트 버튼을 누를 때마다 지웠다 새로 쓰여지게 하기
③ 미세먼지 수치가 70 이상인 곳은 빨간색으로 표시하기
- 결과 이미지
- 나의 코드
<head>
<script>
function q1() {
$.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++) {
$('#names-q1').empty();
let gu_name = rows[i].MSRSTE_NM;
let gu_mise = rows[i].IDEX_MVL;
let temp_html = `<li>${gu_name} : ${gu_mise}</li>`
if (gu_mise > 70) {
$('#names-q1').css('color', 'red');
}
$('#names-q1').append(temp_html);
}
}
})
}
</script>
</body>
<body>
<button onclick="q1()">업데이트</button>
<ul id="names-q1">
</ul>
</body>
반복문을 사용해 JSON 데이터를 한 element씩 돌면서 해당 값을 찾고, temp_html과 append를 이용해 값을 출력했다. 여기까지만 하면 업데이트 버튼을 누를 때마다 새로운 값이 덧붙여서 기록되기 때문에 empty를 함수 처음에 사용해, 입력된 목록을 지우고 다시 입력될 수 있도록 했다. 미세먼지 수치가 70 이상인 곳을 빨간색으로 나타나게 하기 위해, 조건문과 css('color', 'red')로 css 속성값을 바꿔주었다.
☑️ 완성 페이지와 달리 잠깐 지워지고 새로고침되지 않고, 업데이트 버튼을 눌러도 글자가 그대로 있다.
☑️ jQuery를 사용하면 $('#아이디') 형태로 아이디가 들어가야 하는데, 변수만 따로 속성값을 주는 방법을 모르겠다. 위의 코드를 실행시키면, 미세먼지가 70을 넘는 구가 하나라도 있으면 모든 목록의 색깔이 변한다.
- 해설 코드
<head>
<style>
.bad {
color: red;
}
</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>
<button onclick="q1()">업데이트</button>
<ul id="names-q1">
</ul>
</body>
✅ 글자가 그대로였던 이유는 내가 empty()를 for문 안에 써서였다. 함수의 가장 처음에 empty()를 써야 전체 입력값이 새롭게 나타날 수 있다.
✅ 자바스크립트 함수 안에서 바로 CSS 속성을 바꿔주는 대신, <style> 태그에서 먼저 class를 지정한 다음, temp_html에서 조건을 만족하는 값에 선택적으로 클래스를 주는 방식을 이용했다. temp_html은 값을 지정하기 전 먼저 빈 값으로 선언해 두고, 조건에 따라 class를 준 HTML 태그와 일반 HTML 태그를 할당하는 방식! 자주 쓰이는 패턴이라고 하니 기억해 두자.
2) 서울시 OpenAPI(실시간 따릉이 현황)를 이용하기
① 서울시 OpenAPI의 모든 따릉이 현황 보여주기
② 업데이트 버튼을 누를 때마다 지웠다 새로 쓰여지게 하기
③ 현재 거치된 따릉이 수가 5대 미만인 곳은 빨간색으로 굵게 표시하기
- 결과 이미지
- 나의 코드
<head>
<style>
.low {
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 totalCount = rows[i].rackTotCnt;
let parkingCount = rows[i].parkingBikeTotCnt;
let temp_html = ``;
if (parkingCount < 5) {
temp_html = `<tr class="low">
<td>${name}</td>
<td>${totalCount}</td>
<td>${parkingCount}</td>
</tr>`;
} else {
temp_html = `<tr>
<td>${name}</td>
<td>${totalCount}</td>
<td>${parkingCount}</td>
</tr>`;
}
$('#names-q1').append(temp_html);
}
}
})
}
</script>
</head>
<body>
<button onclick="q1()">업데이트</button>
<table>
<thead>
<tr>
<td>거치대 위치</td>
<td>거치대 수</td>
<td>현재 거치된 따릉이 수</td>
</tr>
</thead>
<tbody id="names-q1">
</tbody>
</table>
</body>
코드의 큰 틀은 1번 퀴즈와 비슷해서 전체적인 틀을 짜는 것은 어렵지 않았다. 표의 형태를 나타내는 <table> 태그는 조금 생소했지만, 아래에 있던 예시 형태를 참고해 temp_html을 만들 수 있었다. <table> 태그 syntax는 MDN 공식문서를 참고하자!
앞 퀴즈와 마찬가지로, 조건에 맞는 값에 class를 준 후 append()를 사용해 값을 붙였다. 또 함수의 제일 처음에 empty()를 이용해 업데이트 버튼을 누를 때마다 값들이 지워지고 새로 입력될 수 있도록 했다.
- 해설 코드
<head>
<style>
.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>
<table>
<tbody id="names-q1">
</tbody>
</table>
</body>
3) 랜덤 고양이 사진 API를 이용하기
랜덤 고양이 사진 API는 새로고침을 할 때마다 랜덤한 고양이 사진의 url 주소를 준다. 자료 형태가 Array(리스트)로 넘어오기 때문에 0번째의 url 키의 값이 이미지 주소가 된다.
① 랜덤한 고양이 사진 표시하기
② ‘고양이를 보자’ 버튼을 누를 때마다 사진을 지웠다 새로 표시하기
- 결과 이미지
- 나의 코드
<head>
<script>
function q1() {
$.ajax({
type: "GET",
url: "https://api.thecatapi.com/v1/images/search",
data: {},
success: function (response) {
let catUrl = response[0].url;
$("img").attr("src", "${catUrl}");
$("#img-cat").attr("src", `${catUrl}`);
}
})
}
</script>
</head>
<body>
<button onclick="q1()">고양이를 보자</button>
<div>
<img id="img-cat" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/>
</div>
</body>
‘how to change jquery img src’를 구글링했더니 attr()라는 새로운 method가 나왔다. $('#아이디').attr("속성", "새로운 값")의 형식으로 사용한다. 더 자세한 내용은 jQuery 공식 문서 참고! attr()를 사용하기 전 url값을 새로운 변수로 설정해두었다. 변수 값을 그대로 넣기 위해서는 back-tick을 사용해야 하는데 기본 문법만 보고 ““를 사용했더니 코드가 작동하지 않았다. ${} back-tick까지 세트로 기억할 것!
변수 값을 바로 사용하기 위해서는 back-tick(``) 이용하기!
- 해설 코드
<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>
해설 코드를 보니 back-tick 없이 코드를 그대로 가져와서 써도 된다! 나는 url 주소가 문자열이라고 생각해서 따로 문자열 표시(‘’, “”, ``)를 해 주어야 한다고 생각했는데, 변수를 바로 써도 되는 듯하다.
4. 숙제: 원페이지 쇼핑몰에 환율 계산기 달기
1) 힌트
아래 코드는 ‘페이지 로딩 후 코드 실행’을 위한 코드 스니펫이다. 페이지가 로딩된 직후 환율 API를 call해서 환율의 해당 값을 페이지에 찍어야 하기 때문에, 아래 코드를 이용해 보자!
$(document).ready(function(){
alert('다 로딩됐다!');
});
위 코드를 앞의 예제 <script> 코드에 붙여보면, 페이지가 로딩되자마자 alert 창이 뜨고, 페이지를 새로고침할 때마다 alert 창이 먼저 뜬다.
① 페이지가 로딩되자마자 현재 달러-원 환율이 페이지에 찍히도록 만들기(환율 API 이용하기)
② 페이지를 새로고침할 때마다 환율이 바뀌도록 하기
2) 결과 이미지/나의 코드
<head>
<style>
#rate {
font-weight: bold;
}
</style>
<script>
$(document).ready(function() {
getRate();
});
function getRate() {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/rate",
data: {},
success: function (response) {
let currentRate = response.rate;
$("#rate").append(`* 달러-원 환율: ${currentRate}`);
}
})
}
</script>
</head>
<body>
<p id="rate"></p>
</body>
<script> 태그에 로딩되자마자 Ajax 함수를 호출하도록 하는 코드를 입력하고, 환율 API를 가져오는 Ajax 함수를 정의했다. <body> 태그에 ‘rate’라는 아이디를 주고, getRate() 함수에서 <p> 태그에 ‘달러-원 환율’ 문자열을 붙여넣도록 append()를 이용했다. 환율 부분을 굵은 글씨로 표시하기 위해 아이디 선택자(#)를 이용해 <style> 태그에서 글씨 굵기를 설정했다. 실제 페이지에서 새로고침을 누를 때마다 currentRate 변수인 환율 부분이 바뀌는 것을 볼 수 있다.
3) 해설 코드와 배울 점
<head>
<style>
#rate {
font-weight: bold;
}
</style>
<script>
$(document).ready(function() {
get_rate();
});
function get_rate(){
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/rate",
data: {},
success: function (response) {
let now_rate = response['rate'];
$('#now-rate').text(now_rate);
}
})
}
</script>
</head>
<body>
<p class="rate">달러-원 환율: <span id="now-rate">1219.15</span></p>
</body>
✅ 해설 코드에서는 <p>를 빈 칸으로 두고 전체 문자열을 JavaScript에서 입력하지 않고, Ajax에서 환율 값만 가져와서 출력할 수 있도록 해당 환율 부분의 문자열만 <span> 태그 처리했다. 내 사이트에서는 짧은 순간이지만 글자 전체가 깜박인다면, 해설 코드는 숫자 부분만 새로고침되면서 변해서 보기에 더 편할 것 같다.
✅ text()는 지난 2주 1일차에서 input 태그 이외의 태그들에서 텍스트 값을 받아오거나 바꾸는 데 쓰이는 method라고 배웠다. 해설 코드에서는 환율의 초기값을 미리 입력해 두고 페이지가 로딩될 때마다 새로운 환율값으로 <span> 태그 안의 숫자값을 바꾸는 방식을 사용했다.
Leave a comment