몇 일만에 쓰는 회고일까요...?ㅋㅋㅋ
2주차 들은지 좀 많이 지나서 뭘 배웠는지 생각이 잘 안나는 상황..ㅠㅠ
역시 망각의 동물은 복습을 하고 살아야한다...!!!!
그럼 복습 스따뜨~ 💥💥
수업 목표
- Javascript 문법에 익숙해진다.
- jQuery로 간단한 HTML을 조작할 수 있다.
- Ajax로 서버 API에 데이터를 주고, 결과를 받아온다.
배운 것
Javascript 복습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스파르타코딩클럽 | 자바스크립트 복습</title>
<script>
let num = 0;
function handleClick() {
num += 1;
if (num % 2 == 0) {
alert('짝짝짝👏');
} else {
alert('홀홀홀🎅');
}
}
</script>
</head>
<body>
<button onclick="handleClick()">이 버튼을 눌러보세요</button>
</body>
</html>
jQuery 개념
- HTML의 요소들을 편리하게 조작하기 위해 Javascript를 미리 작성해 둔 것. 즉, Javascript 크로스 플랫폼 라이브러리!
- Javascript로도 모든 기능을 구현할 수는 있지만, 코드가 복잡하고, 브라우저 간 호환성 문제가 있어 고안되었다.
- 사용하기 전 head 태그 안에 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 코드를 import 해야한다.
| Javascript | jQuery |
| document.getElementById("element").style.display = "none"; | $("#element").hide(); |
위 코드는 지정한 요소를 사라지게 하는 코드이다. Javascript와 비교했을 때, jQuery가 더 직관적이고 간단하게 사용 가능하다!
input box의 값 가져오기 / 입력하기
<input id="post-url" type="email" class="form-control" aria-describedby="emailHelp" placeholder="">// id 값이 post-url인 곳을 가리키고, val()로 값을 가져온다.
$('#post-url').val();
//input box에 값 입력하기
$('#post-url').val('여기에 텍스트를 입력하면!');
//버튼의 텍스트 변경하기
$('#btn-posting-box').text('포스팅 박스 닫기');
div 보이기 / 숨기기
<div class="posting-box" id="post-box"> <!--코드 내용 생략--> </div>// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.(=css의 display 값을 none으로 바꾼다)
$('#post-box').hide();
// show()로 보이게 한다.(=css의 display 값을 block으로 바꾼다)
$('#post-box').show();
동적으로 HTML 추가하기
- 백틱(``)안에 HTML 코드를 작성해야 한다!
let temp_html = `<div class="card">
<img class="card-img-top"
src="${image}"
alt="Card image cap">
<div class="card-body">
<a class="card-title" href="${url}">${title}</a>
<p class="card-text">${desc}</p>
<p class="card-text comment">${comment}</p> <!--클래스 중첩-->
</div>
</div>`
$('#cards-box').append(temp_html) // ${}와 헷갈리지 않도록 주의!
포스팅 박스 여닫기
<!-- onclick 속성(attribute)을 추가합니다. -->
<button onclick="openclose()" class="btn btn-primary btn-lg">포스팅박스 열기</button><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() {
let status = $('#post-box').css('display');
if (status == 'block'){ // id값 post-box의 display값이 block이면
$('#post-box').hide();
$('#btn-posting-box').text('포스팅박스 열기');
} else { // block이 아니면
$('#post-box').show();
$('#btn-posting-box').text('포스팅박스 닫기');
}
}
서버-클라이언트 통신: JSON 이해
- JSON은 Key:Value로 이루어져 있다. (Dictionary 자료형과 유사)
데이터 전송 방식: GET / POST
- API는 은행 창구와 같은 것! 같은 예금 창구에서도 개인/기업 고객에 따라 다른 서류가 필요한 것 처럼 클라이언트가 요청할 때도 각각의 타입이 존재한다.
| GET | POST |
| 통상적으로 데이터 조회(Read)를 요청할 때 ex) 영화 목록 조회 |
통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청할 때 ex) 회원 가입, 회원 탈퇴, 회원정보 수정 |
| [google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8] ?: 여기부터 전달할 데이터라는 뜻 &: 전달할 데이터가 더 있다는 뜻 |
Ajax 개념
- Asynchronous JavaScript and XML의 약자로, 동적인 웹 페이지를 만들기 위한 비동기 통신 기법이다.
- 웹 페이지 전체를 다시 로딩하지 않아도 일부분만 갱신이 가능하다. (사용자 입장에서는 화면 갱신 없이 빠르게 동작하는 것처럼 느껴짐)
- jQuery를 import한 페이지에서만 동작한다.
| 동기식 통신 | 비동기식 통신 |
| 서버로 데이터 요청 후 응답을 기다리는 동안 작업을 멈추고 대기. | 서버로 데이터 요청 후 응답을 기다리는 동안 웹은 자신의 다른 업무를 진행하고 응답이 오면 그 후 작업을 진행. |
/* Ajax 기본 골격 */
$.ajax({
type: "GET", // GET 방식으로 요청
url: "요청할 URL 입력",
data: {}, // 요청하면서 함께 전달할 데이터 (GET 요청시에는 비워둠)
success: function(response){ // 서버에서 준 결과를 response 변수에 담음
console.log(response) // 나머지 코드 작성부
}
})
Open API 사용하기
- 서울시 실시간 미세먼지 현황 Open API의 구조를 살펴보고 활용해 보았다.
// 서울시 모든 구의 실시간 미세먼지 정보를 ul 태그 안에 추가하는 코드
function q1() {
$('#names-q1').empty() // ul 태그 내용 초기화
$.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 = `` // HTML 담을 변수 초기화
if (gu_mise > 70) { // 미세먼지 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) // ul 태그에 HTML 동적으로 추가
}
}
})
}
- 서울시 실시간 따릉이 현황 Open API의 구조를 살펴보고 활용해 보았다.
// 서울시 실시간 따릉이 정보를 tbody 태그 안에 추가하는 코드
function q1() {
$('#names-q1').empty() // tbody 태그 내용 초기화
$.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 station_name = rows[i]['stationName'] // 거치대 위치
let rackTot_cnt = rows[i]['rackTotCnt'] // 거치대 수
let parkingBikeTot_cnt = rows[i]['parkingBikeTotCnt'] // 거치된 따릉이 수
let temp_html = `` // HTML 담을 변수 초기화
if (parkingBikeTot_cnt < 5) { // 현재 따릉이 수가 5개 이하면 빨간색으로 표시
temp_html = `<tr class="few">
<td>${station_name}</td>
<td>${rackTot_cnt}</td>
<td>${parkingBikeTot_cnt}</td>
</tr>`
} else {
temp_html = `<tr>
<td>${station_name}</td>
<td>${rackTot_cnt}</td>
<td>${parkingBikeTot_cnt}</td>
</tr>`
}
$('#names-q1').append(temp_html) // tbody 태그에 HTML 동적으로 추가
}
}
})
}
- 랜덤 고양이 사진 Open API의 구조를 살펴보고 활용해 보았다.
// img 태그의 요소를 변경하여 고양이 사진을 랜덤하게 보여주는 코드
function q1() {
$.ajax({
type: "GET",
url: "https://api.thecatapi.com/v1/images/search",
data: {},
success: function (response) {
let url = response[0]['url'] // 매번 바뀌는 url을 담는 변수
$('#img-cat').attr("src", url) // img 태그의 src 요소를 url변수 값으로 변경
}
})
}만든 것
$(document).ready(function () {
// 로딩 하자마자 자동으로 ajax call
get_rate()
});
function get_rate() {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/rate",
data: {},
success: function (response) {
let now_rate = response[1]['rate'];
$('#now-rate').text(now_rate);
}
})
}좋았던 것
동적으로 움직이는게 하는 건 역시나 재밌었다! ヾ(•ω•`)o
예전에 해시코드 사이트 클론코딩 할 때 Ajax를 써보긴 했지만,,
그때는 이해가 부족한 채로 동작이 되기만을 바라면서 억지로 코드 짰었는데ㅠㅠㅋㅋ
이제 다시 튜터님과 함께 개념을 잡고 실습해보니까 좀 더 코드가 와닿게 되었다.
Ajax 너..멋진 녀석이었구나..다시 봤다..!!
바라는 것
회고를 좀 짜잘짜잘 꾸준히 써놓자...일주일치를 한방에 다 쓰려니까 너무 힘들다!!!!!😭😭
'Programming > Web' 카테고리의 다른 글
| [개발일지/회고] 스파르타코딩클럽 웹개발 종합반 - 5주차 (2) | 2022.02.12 |
|---|---|
| [개발일지/회고] 스파르타코딩클럽 웹개발 종합반 - 4주차 (0) | 2022.01.27 |
| [개발일지/회고] 스파르타코딩클럽 웹개발 종합반 - 3주차 (0) | 2022.01.20 |
| [개발일지/회고] 스파르타코딩클럽 웹개발 종합반 - 1주차 (0) | 2022.01.08 |
| [JavaScript] 자바스크립트란? (0) | 2020.12.24 |