[Fetch] 클라이언트 서버개념 이해하기

서버에서 클라이언트로 다량의 정보가 이동할때

클라이언트는 분류를 해내야하는데, 그 분류하는과정을 돕는것이 Jason 이라는 것이다.

 

Jasonview 라는 프로그램을 설치하면 데이터분류가 더 수월해진다. 

https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko

JSONVue - Chrome 웹 스토어

 

서버    은행 하나의 지점이라고 보면된다. 예를들어 주소창에 movie.daum.net 까지가 서버입니다.

 

 

 

api:허락된곳만 접근이 가능하고

open api :  모두가 접근이 가능하다.

 

주소창에 ? 뒤에는 데이터이다. 데이터를 가져가는것이다. 이것이 바로  get 방식이라고 부른다.

 

스크립트에 fetch코드를 넣어준다. 

 

let url = 'http://주소'

fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
console.log(data)
})

 

 

 

 

forEach 구문으로 날씨 제이슨 코드에서 상세한 정보 따오기.

 

 

 

 

 

 

우리는 날씨 open api의 주소를 가져와서 미세먼지 농도가 40이상인 지역에 빨간효과를 준것입니다.

실시간 데이터이다보니 해보니까 신기하기도하고 두근두근합니다.

코드 짜는 능력은 아직까진없지만 그래도 조금씩 따라하니까 다 되더라구요.

일단 우리는 document에 open api의 데이터들을 가져와 줍니다.

onclick 함수를 html에 입력을 해주고 스크립트에서 함수를 선언해줍니다.

그안에서는 fetch의 url을 입력해줍니다.

data값에서 우리는 RealtimeCityAir 에서 row값 안에있는 세밀한 정보들을 가져와야하기때문에 변수를 또 만들어줘야합니다.

모든 데이터들이 실시간으로 다 들어와야하기때문에 forEach  구문을 적어줘야하고,

let temp_html = `` 안에 저 칸들이 있어야합니다.