티스토리 뷰
◎통신 시작하기
서버와 통신한다는 것은?
= 데이터를 보내주고 서버로부터 데이터를 가져오는 것.
우리가 보는 네이버나, 다른 페이지는 잘 정리되어 있는 데이터지만 그렇지 않은 것도 있다.
↓ 서울시가 제공하는 현재 서울의 미세먼지 수치
http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99
우리가 평소 보는 페이지와 다르게 정리가 되지 않은 모습이다.
이같은 데이터를 보기 편하게 해주는 프로그램이 있다.
https://chrome.google.com/webstore/detail/json-viewer/aimiinbnnkboelefkjlenlgimcabobli?hl=ko
JSON Viewer
Validates and makes JSON documents easy to read. Open source.
chrome.google.com
설치를 하고 나면 데이터가 깔끔한 형태가 된다.
안의 데이터를 살펴보면 키-밸류 구성으로 이루어진 딕셔너리형태라는걸 알 수 있다.
이 데이터를 fetch를 사용해서 콘솔창에 띄워보자.
●fetch사용법
1. fetch기본 골격을 작성한다. (기본 골격은 코드스니펫 참고)
2. 호출할 정보를 가져올 파일 경로(혹은 url경로)를 작성한다.
3. 호출이 성공했다면 불러올 정보의 조건을 작성한다.
콘솔창을 켜고 fetch기본 골격을 붙여넣자.
fetch("경로").then(res => res.json()).then((data) => {
console.log(data);
});기본 골격에 서울 미세먼지 주소를 넣어준 후 실행을 시키면 모든 데이터값이 출력된다.
여기서 'RealtimeCityAir'의 'list_total_count'를 찍어 맞게 나오는지 확인해보자.
같은 값이 출력되었으므로 잘 연결된 것을 알 수 있다.
따라서 fetch라는 모듈을 통해 서버에서 보내주는 데이터를 가져올수 있다.
<연습해보기>
미세먼지 정보를 실시간으로 알려주는 페이지를 만들어보자.
페이지의 html코드는 코드스니펫으로 넣어주었다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>띵동코딩 - fetch 연습</title>
<style>
.client {
margin: 10px 10px;
}
</style>
<script>
</script>
</head>
<body>
<div>
<button>미세먼지 정보</button>
<div class="client">지역별</div>
<ul id="city">
<li>용산구 : 80</li>
<li>동작구 : 29</li>
<li>도봉구 : 58</li>
</ul>
</div>
</body>
</html>
미세먼지 정보 버튼을 누르면 현재 미세먼지 정보가 뜨도록 해보자.
먼저 버튼에 동작을 연결한다.
<button onclick="mise()">미세먼지 정보</button>연결이 되었는지 확인하기위해 버튼이 눌리면 메세지창이 뜨도록 해본다.
<script>
function mise() {
alert('안녕')
}
</script>
연결이 잘 되었다면 데이터를 불러오자.
fetch의 기본 코드를 가져오는데 url경로의 길이가 너무 길다면 줄여주는게 보기에 깔끔하다.
어떻게하나?
url변수를 선언하자.
function mise() {
let url = 'http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99'
fetch(url).then(res => res.json()).then((data) => {
console.log(data);
});
}새로고침 후 버튼을 누른 다음 콘솔창을 키면 데이터값이 찍혀있다.
이제 필요한 정보가 어디에 들어있는지 보자.
미세먼지의 수치와 해당 구이름은 row에 들어있으므로 row의 데이터를 가져와야한다.
function mise() {
let url = 'http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99'
fetch(url).then(res => res.json()).then((data) => {
console.log(data['RealtimeCityAir']['row']);
});
}
row안의 데이터가 모두 한번에 찍힌다.
하지만 데이터가 복잡하게 보이므로 반복문으로 데이터를 하나씩 찍어 보기좋게 나타내보자.
function mise() {
let url = 'http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99'
fetch(url).then(res => res.json()).then((data) => {
let rows = data['RealtimeCityAir']['row']
for (let i=0; i <rows.length; i++)
console.log(rows[i]);
});
}
이제 여기서 원하는 데이터의 값만 가져와 변수로 설정해준다.
function mise() {
let url = 'http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99'
fetch(url).then(res => res.json()).then((data) => {
let rows = data['RealtimeCityAir']['row']
for (let i=0; i <rows.length; i++) {
let gu = rows[i]['MSRSTE_NM']
let value = rows[i]['IDEX_MVL']
console.log(gu, value);
}
});
}
이 데이터를 페이지에 붙이려면?
html형태로 가져와 붙여주자!
붙여줄 형태를 가져와 데이터값을 붙여준 후 붙여질 위치의 id값을 가져와 붙여준다.
function mise() {
let url = 'http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99'
fetch(url).then(res => res.json()).then((data) => {
let rows = data['RealtimeCityAir']['row']
for (let i=0; i <rows.length; i++) {
let gu = rows[i]['MSRSTE_NM']
let value = rows[i]['IDEX_MVL']
let temp_html = `<li> ${gu} : ${value} </li>`;
$('#city').append(temp_html)
}
});
}
그런데 버튼을 누를때마다 아래에 계속 찍히는 모습이다.
버튼을 누르면 기존에 있던 내용은 없어지고 새로 찍히게 해주자.
함수가 시작되는 부분에 지우고 시작한다는 동작을 넣어주면 된다.
원래 페이지에 있던 필요없는 부분은 지워준다.
function mise() {
$('#city').empty()
let url = 'http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99'
fetch(url).then(res => res.json()).then((data) => {
let rows = data['RealtimeCityAir']['row']
for (let i=0; i <rows.length; i++) {
let gu = rows[i]['MSRSTE_NM']
let value = rows[i]['IDEX_MVL']
let temp_html = `<li> ${gu} : ${value} </li>`;
$('#city').append(temp_html)
}
});
}
+ 숫자 옆에 미세먼지 정도를 나타내주기
미세먼지의 정도는 'IDEX_NM'에 들어있으므로 새로 데이터를 넣어준다.
function mise() {
$('#city').empty()
let url = 'http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99'
fetch(url).then(res => res.json()).then((data) => {
let rows = data['RealtimeCityAir']['row']
for (let i=0; i <rows.length; i++) {
let gu = rows[i]['MSRSTE_NM']
let value = rows[i]['IDEX_MVL']
let status = rows[i]['IDEX_NM']
let temp_html = `<li> ${gu} : ${value} ${status} </li>`;
$('#city').append(temp_html)
}
});
}
+ 수치가 100보다 큰 구만 나타내기
조건문을 넣어주면 완성!
조건문을 어디에 넣어줘야 될까..?
나는 두 가지 방법으로 했다.
1. 조건이 충족 되면 temp_html에 데이터 넣어 붙이기
2. 조건이 충족되면 붙이기
2.번의 방법으로 해보자면
function mise() {
$('#city').empty()
let url = 'http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99'
fetch(url).then(res => res.json()).then((data) => {
let rows = data['RealtimeCityAir']['row']
for (let i=0; i <rows.length; i++) {
let gu = rows[i]['MSRSTE_NM']
let value = rows[i]['IDEX_MVL']
let status = rows[i]['IDEX_NM']
let temp_html = `<li> ${gu} : ${value} ${status} </li>`;
if (value > 100) {
$('#city').append(temp_html)
}
}
});
}
+ 수치가 120보다 큰 곳 빨간색으로 나타내기
if문으로 수치가 120보다 클 때와 그렇지 않을때의 temp_html의 출력 조건을 나누어준 후 css로 글자색을 넣어준다.
css를 넣어야하기 때문에 class를 달아주어야한다.
<style>
.client {
margin: 10px 10px;
}
.mise {
color: red;
}
</style>
<script>
function mise() {
$('#city').empty();
let url = 'http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99'
fetch(url).then(res => res.json()).then((data) => {
let rows = data['RealtimeCityAir']['row']
for (let i = 0; i < rows.length; i++) {
let gu = rows[i]['MSRSTE_NM'];
let value = rows[i]['IDEX_MVL'];
let status = rows[i]['IDEX_NM'];
let temp_html = '';
if (value > 120) {
temp_html =`<li class="mise">${gu} : ${value}(${status})</li>`;
} else {
temp_html =`<li>${gu} : ${value}(${status})</li>`;
}
$('#city').append(temp_html);
}
});
}
</script>
'코딩 > 띵동코딩' 카테고리의 다른 글
| 띵동코딩 11주차 - Javascript (1) | 2022.09.30 |
|---|---|
| 띵동코딩 5주차 - 스스로 해보기 (0) | 2022.09.29 |
| 띵동코딩 10주차 - Javascript (2) | 2022.09.29 |
| 띵동코딩 9주차 - Javascript (0) | 2022.09.27 |
| 띵동코딩 8주차 - 부트스트랩 (0) | 2022.09.27 |