Fetch
서버에서 데이터를 가지고 와서 활용할 수 있는 Fetch에 대해서 알아보자 !
일단 나는 연습을 해야되니깐 vsc에서 prac2.html 이라는 파일을 하나 만들어 주고 큰 틀을 작성해 줬다. jQuery 임포트 해줌 !
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Fetch 시작하기</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
//fetch 골격 입력할 부분
</script>
</head>
<body>
Fetch 연습을 위한 페이지
</body>
</html>여기서 이제 Fetch의 기본적인 골격을 가져와서 script 내에 붙여넣었다.
fetch("여기에 URL 입력") // 이 URL로 웹 통신을 요청
.then((res) => res.json()) // 통신 요청을 받은 데이터는 res라는 이름으로 JSON화
.then((data) => {
console.log(data); // 콘솔에 찍어보기
}); // JSON 형태로 바뀐 데이터를 data라는 이름으로 붙여 사용Fetch 코드 설명 ✔
fetch("여기에 URL을 입력")← 이 URL로 웹 통신 요청을 보낼 거야!
- ← 이 괄호 안에 URL밖에 들어있지 않다면
기본상태인 GET!.then()← 통신 요청을 받은 다음 이렇게 할 거야!res ⇒ res.json()
- ← 통신 요청을 받은 데이터는 res 라는 이름을 붙일 거야(변경 가능)
- ← res는 JSON 형태로 바꿔서 조작할 수 있게 할 거야!
.then(data ⇒ {})←JSON 형태로 바뀐 데이터를 data 라는 이름으로 붙일거야
위 코드를 앞으로 쭉 복사해서 쓰면 될 거 같당. ~~ 히히 url 부분에 아까 미세먼지 API 주소를 넣어주면 될 거 같다. (근데 갑자기 다른 주소 주셔서 그거 넣음.. 근데 딱히 다른 건 없는 듯 ? 그래서 그냥 썼다 ㅎㅎ;) 아래 코드처럼 작성 완료 !
fetch("http://spartacodingclub.shop/sparta_api/seoulair")
.then((res) => res.json())
.then((data) => {
console.log(data);
});여기서 이제 console 창에 중구에 대한 정보만 가져와 보자. 아래 코드처럼 작성하면 된다.
fetch("http://spartacodingclub.shop/sparta_api/seoulair")
.then((res) => res.json())
.then((data) => {
console.log(data["RealtimeCityAir"]["row"][0]);
});data에서 ["RealtimeCityAir"]의["row"]에[0]번째를 가져온다는 코드 ! (data["RealtimeCityAir"]["row"]만큼은 list. 그 list의 0번째라는 뜻)
반복문을 사용해 보자.
fetch("http://spartacodingclub.shop/sparta_api/seoulair")
.then((res) => res.json())
.then((data) => {
let rows = data["RealtimeCityAir"]["row"];
rows.forEach((location) => {
console.log(location);
});
});rows 라는 변수를 선언해주고, 반복문을 돌릴 거니까 forEach문을 사용해줬다. location은 내가 마음대로 지정한 변수 ~~ ! 요렇게 코드 작성해주고 실행해보면
이런 식으로 콘솔창에 구별로 쭉 출력이 된다. 구의 이름만 출력하고 싶다면 어떻게 해야 할까 ? 일단 중구 값의 key를 가져온다. (MSRSTE_NM) 이걸 console.log(location["MSRSTE_NM"]); 이렇게 작성해주면 console 창에 구만 출력이 된다.
다시 정리해보자 !!
Fetch는 뭔가 데이터를 주는, 서버에서 데이터를 받아올 수 있는 URL이 있다면 그 URL을 집어넣으면 데이터를 받아오는 함수 !
fetch("http://spartacodingclub.shop/sparta_api/seoulair") 이렇게 URL을 받아왔고, let rows = data["RealtimeCityAir"]["row"]; 여기서 사용을 함. data를 보니 RealtimeCityAir에 row의 그 아래의 list !! 그래서 row까지 잘라서 rows라는 변수에서 list로 만들어 주었고, 이걸 반복문으로 구 이름을 찍은 게 여기까지 배운 내용 ! (조금 헷갈리지만 몇 번 더 작성해보면 될 듯?)
jQuery + Ajax 조합 연습
이제 미세먼지 데이터를 가지고 html에 붙여넣는(append) 걸 할 예정. 일단 prac3.html 파일을 만들어 줬다.
문제 - 서울시 OpenAPI를 이용하기
모든 구의 미세먼지를 표기해 주세요. 업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.
기본 뼈대는 아래 코드 ↓↓
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>미세먼지 API로Fetch 연습하고 가기!</title>
<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;
}
</style>
<script>
function q1() {
// 여기에 코드를 입력하세요
}
</script>
</head>
<body>
<h1>Fetch 연습하자!</h1>
<hr />
<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>
</body>
</html>function q1() 안에 앞에 작성했던 fetch 함수를 넣어주고, rows 라는 변수 설정하고 반복문 작성했다.
function q1() {
fetch("http://spartacodingclub.shop/sparta_api/seoulair")
.then((res) => res.json())
.then((data) => {
let rows = data["RealtimeCityAir"]["row"];
rows.forEach((location) => {
let lo_name = location["MSRSTE_NM"];
let lo_dust = location["IDEX_MVL"];
console.log(lo_name, lo_dust);
});
});
}-중구 : 82
-종로구 : 87
이런 식으로 나와야 하기 때문에 구를 표시해줄 lo_name 변수랑 미세먼지 수치를 나타내줄 lo_dust 변수를 선언해서 console 창에 출력해 봤다. 그럼 이제 콘솔창에 나타나는 코드를 버튼을 누르면 아래에 쭉 나올 수 있도록 html에 append 해줘야 하는데, 배웠던 내용을 토대로 작성 해보자.
function q1() {
fetch("http://spartacodingclub.shop/sparta_api/seoulair")
.then((res) => res.json())
.then((data) => {
let rows = data["RealtimeCityAir"]["row"];
$('#names-q1').empty();
rows.forEach((location) => {
let lo_name = location["MSRSTE_NM"];
let lo_dust = location["IDEX_MVL"];
let temp_html = `<li>${lo_name} : ${lo_dust}</li>`;
$('#names-q1').append(temp_html);
});
});
}문제에서 업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다. 라고 했는데 내용을 지우고 append 하는 것부터 해봤다. ( 항상 차근차근 하기 ! ) temp_html 이라는 변수를 작성해주고 append 할 내용을 백틱 `` 안에 <li>중구 : 82</li> 형태로 작성되야 하기 때문에 중구 자리에 ${lo_name}, 82 자리에 ${lo_dust}로 바꿔서 작성해 줬다. names-q1부분 내용을 지우고 forEach문을 돌리기 위해 empty 함수를 먼저 써줬다. ( 코드는 항상 위에서 아래로 실행되는 거 잊지 말기 )
짜잔 - 페이지에서 버튼 클릭하면 이렇게 된다 😊
여기서 수치가 40 이상인 구들의 text를 빨간색으로 바꾸고 싶으면 어떻게 해야할까?
조건문 쓰면 되지 않나 생각 했는데 이걸 어떻게 쓰냐.. ? 아직 감이 안옴 .. 일단 강의를 더 들어봐야지.
헤헤 작성완료 - !
.bad{
color: rgb(255, 56, 56);
}일단 글자 색을 바꿀 css 코드를 작성했다.
function q1() {
fetch("http://spartacodingclub.shop/sparta_api/seoulair")
.then((res) => res.json())
.then((data) => {
let rows = data["RealtimeCityAir"]["row"];
$("#names-q1").empty();
rows.forEach((location) => {
let lo_name = location["MSRSTE_NM"];
let lo_dust = location["IDEX_MVL"];
let temp_html = ``;
if (lo_dust >= 40) {
temp_html = `<li class = "bad">${lo_name} : ${lo_dust}</li>`;
} else {
temp_html = `<li>${lo_name} : ${lo_dust}</li>`;
}
$('#names-q1').append(temp_html);
});
});
}temp_html을 빈 백틱 값으로 변수 설정해주고, 조건문 쓰는데 조건에 lo_dust 즉 미세먼지 수치가 40보다 크거나 같으면 class = "bad" 가 들어간 temp_html을 그게 아니라면 그냥 기본 코드를 작성하라고 설정했다. 그리고 설정한 값들을 $('#names-q1)에 append 하면 완성 ! 저장하고 페이지에서 버튼 클릭하면 아래 사진처럼 나온다 (내가 해냄) ~~ !
일단 오늘은 여기까지 ! 내일은 서울시 따릉이 데이터를 이용해서 Fetch함수 연습을 더 해볼 예정이다. 복습 화이팅 !!
