1. 클라이언트 - 서버 이해하기
2. Fetch
[클라이언트→서버]: GET 요청 이해하기
서버 > api
API는 은행 창구와 같은 것!, 서버는 ~은행 @@지점
// 다음부터 첫번째 / 전까지 => 서버 위치
첫번째 /부터 ?전까지 => 창구 이름
? 뒤부터~ => 창구에 가져가는 데이터 (~는 ~다. -> 주민등록 번호는 9999..다.)
https://movie.daum.net/moviedb/main?movieId=68593
위 주소는 크게 두 부분으로 쪼개짐
"?" 기준으로 앞 부분이 <서버 주소> 뒷 부분이 [영화 번호]
* 서버 주소: https://movie.daum.net/moviedb/main?movieId=68593
* 영화 정보: movieId=68593
GET 방식으로 데이터를 전달하는 방법
? : 여기서부터 전달할 데이터가 작성된다는 의미
& : 전달할 데이터가 더 있다는 뜻
예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
위 주소는 google.com의 search 창구에 다음 정보를 전달
q=아이폰 (검색어)
sourceid=chrome (브라우저 정보)
ie=UTF-8 (인코딩 정보)
fetch 시작하기
prac2.html 새파일 만들고 fetch 연습하기 코드스니펫 복붙
미세먼지 코드스니펫 복붙
http://spartacodingclub.shop/sparta_api/seoulair => 미세먼지 코드스니펫
let : 변수 선언 방식
<script>
function hey() {
}
</script>
Fetch 기본 골격 코드스니펫 복붙
미세먼지 코드스니펫 아래에 붙여넣기
fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
console.log(data)
}) => Fetch 기본 골격 코드스니펫
<script>
function hey() {
fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
console.log(data)
})
}
</script>
fetch("여기에 URL을 입력") 부분에 'url 변수' 넣기 (너무 기니까)
<script>
function hey() {
fetch(url).then((res) => res.json()).then((data) => {
console.log(data);
});
}
</script>
페이지 결과
접속해 나온 결과가 'data'라는 변수에 저장이 된다는 뜻
응용해보기 1
data 변수에
http://spartacodingclub.shop/sparta_api/seoulair 링크에서
RealtimeCityAir 의 row에 0번째 값 불러오기
console.log(data['RealtimeCityAir']['row'][0]);
데이터는 자료형-딕셔너리 형태 이니까 [''] 사용
<script>
function hey() {
fetch(url)
.then((res) => res.json())
.then((data) => {
console.log(data["RealtimeCityAir"]["row"][0]);
});
}
</script>
위 코드 이해
hey 변수가 불린다.
url 변수를 선언한다. (url=>url 주소)
Fetch 기본 골격에 url을 그대로 넣어주면 우리는 데이터를 활용할 수 있게 된다.
현재 url의 데이터가 딕셔너리의 형태를 가지고 있기 때문에 RealtimeCityAir 의 row에 0번째 값을
console.log(data["RealtimeCityAir"]["row"][0]); 이렇게 코드를 쳐서 가져올 수 있게 된다.
RealtimeCityAir 의 row에 0번째 값
응용해보기 2
반복문을 이용해 돌면서 정보를 찍어보자
row에 해당하는 row0, row1, row2,... 리스트(=rows)를 받아와서 반복하면 된다.
#rows 선언하기
rows 선언, let rows ~
console.log(data["RealtimeCityAir"]["row"]);
라고 하면 console에 data(RealtimeCityAir, row)에 해당하는 25개가 나옴
data 함수 부분을 복사해서
let rows = data["RealtimeCityAir"]["row"];
rows 선언문에 data 함수를 가져다 넣기
#반복문 만들기
forEach문 사용
array.forEach(element => {
});
foreach문 형식에서 수정
array 말고 rows를 돌리기, element 너무 기니까 a로 바꾸기,
let rows = data["RealtimeCityAir"]["row"];
rows.forEach(a => {
console.log(a);
});
이렇게 되면 콘솔에서는
row에 있는 정보가 하나씩 다 나오게 됨!
그렇다면 지역(구)과 미세먼지상태만 뽑을 수도 있겠네?
let 변수 = ~
일단 변수 선언 let gu-name = a ~, let gu_mise = a ~
여기서 구 이름에 해당하는 라벨과 미세먼지 상태에 해당하는 라벨을 복사해서 a['']에 넣기!
let rows = data["RealtimeCityAir"]["row"];
rows.forEach(a => {
let gu_name = a['MSRRGN_NM'];
let gu_mise = a['IDEX_NM'];
콘솔에 띄워보자
let rows = data["RealtimeCityAir"]["row"];
rows.forEach(a => {
let gu_name = a['MSRRGN_NM'];
let gu_mise = a['IDEX_NM'];
console.log(gu_name, gu_mise);
});
콘솔 결과
Fetch 연습하기 2
페치를 페이지에 어떻게 이용하는지 알아보자
미리보기
새파일 prac3.html 만들기 -> fetch 연습(1) 코드스니펫 붙여넣기
fetch 연습(1) 코드스니펫
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>미세먼지 API로Fetch 연습하고 가기!</title>
<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>
fetch 연습(1) 코드스니펫 페이지
prac2 파일의 함수 'hey' 에 썼던 코드 복사
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'];
console.log(gu_name, gu_mise);
});
});
prac3. q1 아래에 복붙
<script>
function q1() {
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'];
console.log(gu_name, gu_mise);
});
});
}
</script>
콘솔창 보면 리스트가 뜸 (prac2에서 했던 내용임)
콘솔창에만 띄우는 게 아니라 페이지 내에 띄우게 하기
은평구 아래로는 빈 모습. 페이지에도 쭉 뜨게 만들어보자
html 만들어서 은평구 밑으로 붙이기
let temp_html , .append()
<ul id="names-q1">
<li>중구 : 82</li>
<li>종로구 : 87</li>
<li>용산구 : 84</li>
<li>은평구 : 82</li>
여기에 붙여야 하니까
양식은 <li>중구 : 82</li>, id는 "names-q1" 활용
let temp_html = `<li>${gu_name} : ${gu_mise}</li>`;
$('#names-q1').append(temp_html)
<li>중구 : 82</li> 이거를
`<li>${gu_name} : ${gu_mise}</li>` 이렇게 변형
왜? 우리는 함수를 gu_name, gu_mise 로 let 했기 때문에
즉,
function q1() {
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 = `<li>${gu_name} : ${gu_mise}</li>`;
$('#names-q1').append(temp_html)
});
});
}
근데 업데이트를 누를 때마다 계속 데이터가 쌓임
이때 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 = `<li>${gu_name} : ${gu_mise}</li>`;
$('#names-q1').append(temp_html)
});
});
더이상 안 쌓이게 됨
Fetch 연습하기 3
미세먼지 수치가 40이상인 곳은 빨갛게
temp_html에 css 속성을 먹인 html태그 넣기
li의 네이밍 'bad'
let temp_html = `<li class="bad"> ${gu_name} : ${gu_mise}</li>`;
$('#names-q1').append(temp_html)
CSS에서 컬러 주기
이렇게 되면 다 빨갛게 나옴
미세먼지 40이상이면 빨갛게!
let temp_html 은 빈값인데
만약 gu-mise의 값이 40보다 크면
temp_html = `<li class="bad"> ${gu_name} : ${gu_mise}</li>`;
temp_html에 bad값을 붙인(빨간)애로 나가게 해라
else {
temp_html =`<li> ${gu_name} : ${gu_mise}</li>`;
}
아니라면 bad 안 붙인 애로 나가라
(대신 아래에 넣은 코드는 빼주기
let temp_html = `<li class="bad"> ${gu_name} : ${gu_mise}</li>`;
$('#names-q1').append(temp_html)
이렇게 있던 애를 let temp_html = `<li class="bad"> ${gu_name} : ${gu_mise}</li>`; 이 부분 if에 넣어준 후 삭제
$('#names-q1').append(temp_html)
얘만 남게)
function q1() {
$('#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)
});
});
}
