2주차: Javascript, JQuery, Fetch
- Javascript: 웹을 움직이게 하는 코드
- JQuery: html 뼈대를 선택해서 쉽게 조장할 수 있습니다. (라이브러리 사용)
- Fetch: 짧은 코드로 요청을 보내고 받아올 수 있습니다. (서버에서 내려오는 데이터를 우리가 가져다 씁니다)
JQery 예제
let a = ['사과', '배', '감', '귤'] $('#q1').text(a[1]) <div id="q1"> 테스트 </div>
'테스트'를 리스트 a에 첫번째 인덱스인 '배'로 바꿔줌
JQuery - append
<
$('#q2').empty()
let people = [
{ 'name': '서영', 'age': 24 },
{ 'name': '현아', 'age': 30 },
{ 'name': '영환', 'age': 12 },
{ 'name': '서연', 'age': 15 },
{ 'name': '지용', 'age': 18 },
{ 'name': '예지', 'age': 36 }
]
people.forEach((a) => {
let name = a['name']
let age = a['age']
let temp_html = `<p>${name}는 ${age}살입니다.</p>`
$('#q2').append(temp_html)
})
<div id="q2">
<p>영수는 24살입니다.</p>
<p>세종은 30살입니다.</p>
<p>수영은 20살입니다.</p>
</div>JQuery 기본 사용법
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>시작하기</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
</script>
</head>
<body>
</body>
</html>Fetch 기본 골격
fetch("URL 넣기").then(res => res.json()).then(data => {
console.log(data)
})fetch란 서버에서 데이터를 받아올 수 있는 URL이 있다면 그 URL에서 데이터를 가져옴
미세먼지 API 예제
<script> function q1() { $('#names-q1').empty() fetch("http://spartacodingclub.shop/sparta_api/seoulair").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 = `<li>${gu_name} : ${gu_mise}</li>` $('#names-q1').append(temp_html) }) }) } </script> <div class="question-box"> <h2>1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기</h2> <p>모든 구의 미세먼지를 표기해주세요</p> <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p> <button onclick="q1()">업데이트</button> <ul id="names-q1"> <li>중구 : 82</li> <li>종로구 : 87</li> <li>용산구 : 84</li> <li>은평구 : 82</li> </ul> </div>
결과
정리하자면
- 업데이트 버튼을 누르면 q1 함수가 호출됩니다.
- 기본 정적 틀이였던 names-q1 빈 상태로 만듭니다.
- Fetch사용하여 미세먼지 api에서 RelitimeCityAir -> row 리스트 데이터를 가져옵니다.
- forEach loop을 돌면서 구 네임이랑 구 미세먼지를 html인
<li></li>안에 넣어주고 names-q1에 append해줍니다.
Backend Programmer