안녕하세요, 오늘은 사전캠프 4일차입니다.
오늘은 데일리미션인 알고리즘 코드카타 2문, SQL 코드카타 2문을 풀었습니다!
<오늘 공부한 내용>
웹개발 종합반 - 3주차 강의 완주 - jQuery와 fetch
오늘은 SQL 강의는 안듣고 웹개발 종합반만 3주차 강의를 완주하였습니다.
어제 배운 제이쿼리를 적용해보는 연습과 fetch 사용법에 대해 배웠는데요.
너무 어려워서 어질어질합니다.
하지만 제이쿼리를 통해 페이지를 움직이는 것을 배우고, 펫치를 통해 다른 웹사이트에서 정보를 가져와 보여줄 수 있는 기능을 써보니 진짜 개발을 하는 거 같았습니다.
완벽히 이해가 되진 않아서 딱 뭔가를 얻었다고는 하기 어렵지만 그래도 오늘 배운것 정리!
<script>
$(document).ready(function () {
let url = "http://spartacodingclub.shop/sparta_api/weather/seoul";
fetch(url).then(res => res.json()).then(data => {
let temp = data['temp'];
$('#aaa').text(temp);
})
})
function openclose() {
$('#postingbox').toggle();
}
function makecard() {
let image = $('#image').val();
let title = $('#title').val();
let coment = $('#coment').val();
let star = $('#star').val();
let temp_html = `
<div class="col">
<div class="card h-100">
<img src="${image}">
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">${star}</p>
<p class="card-text">${coment}</p>
</div>
</div>
</div>
`
$('#card').append(temp_html);
}
</script>
제이쿼리 사용하는 것을 만들어놨던 추억앨범과 스파르타플릭스에 적용을 하면서 실습을 했습니다.
- $('#aaa').text(temp); 요 문법.
toggle은 어떤 속성이나 상태를 켜거나 끄는 동작을 한다. - let star = $('#star').val();
.val()은 JQuery 메서드 중 하나로 선택한 요소의 값을 가져오는 역할을 한다.
API는 은행 창구와 같은 것!
같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라
가져와야 하는 것 / 처리해주는 것이 다른 것처럼, 클라이언트가 요청 할 때에도, "타입"이라는 것이 존재한다.
- GET → 통상적으로! 데이터 조회(Read)를 요청할 때
예) 영화 목록 조회
<!doctype html>
<html lang="ko">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
.bad {
color: red;
}
</style>
<script>
function q1() {
let url = 'http://spartacodingclub.shop/sparta_api/seoulair';
$('#names-q1').empty();
fetch(url).then(res => res.json()).then(data => {
let rows = data['RealtimeCityAir']['row'];
rows.forEach(a => {
let gu_name = a['MSRSTE_NM'];
let gu_mise = a['IDEX_MVL'];
let temp_html = ``;
if (gu_mise > 40) {
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>
<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>
- fetch(url).then(res => res.json()).then(data => {
let rows = data['RealtimeCityAir']['row'];
이 구문만 기억해도 반은 할 것 같은데..
아 지금 벨로그 편집 너무 어려워서 더 작성할 마음이 다 떴다
어떻게 하는거야
암튼 오늘도 끝! 숙제를 했는데 뿌듯하지만 아직 제출은 안했다. 내일 더 수정하고 제출해야지!
풀스택 개발자의 공부기록 📖