서버-클라이언트 통신 이해
서버 -> 클라이언트
JSON: 사전 형식으로 서버에서 클라이언트로 데이터를 보냅니다.
JSON은 Key:Value로 구성되며 데이터 유형 사전과 유사합니다.
서울 미세먼지 OpenAPI
http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99
클라이언트 -> 서버
클라이언트가 요청할 때 “유형”이 있습니다.
GET : 데이터 검색(읽기)을 요청할 때
예) 영화 목록 찾아보기
포스트 데이터 생성, 업데이트, 삭제 요청에 따라
예) 회원가입, 회원탈퇴, 비밀번호 변경
GET 방식
https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967위 주소는 ?를 기준으로 합니다. 나뉘어지다.
서버 주소: https://movie.naver.com/movie/bi/mi/basic.nhn
영화 정보: 코드=161967
GET 메서드를 사용하여 데이터를 전달하는 방법
? : 전송할 데이터가 여기에서 생성된다는 의미입니다.
& : 더 많은 데이터를 전송할 예정입니다.
google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
위 주소는 google.com의 search 창구에 다음 정보를 전달
q=아이폰 (검색어)
sourceid=chrome (브라우저 정보)
ie=UTF-8 (인코딩 정보)https://www.w3schools.com/jquery/jquery_get_started.asp
?가 없으면 아무 데이터도 가져올 필요 없는 창구
즉, 오기만 하면 그냥 데이터를 준다는 의미가져오기 시작하기
가져오다
서버에서 데이터를 제공하는 URL이 있는 경우 해당 URL에서 데이터를 검색합니다.
기본 뼈대 얻기
fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
console.log(data)
})코드 해석
가져오기(“여기에 URL을 입력하세요”) : 이 URL에 대한 웹 통신 요청, 괄호 안에 URL이 하나만 있는 경우 기본 상태 GET
.그 다음에() : 통신 요청을 받은 후 ()와 같은 동작을 수행합니다.
입술 ⇒ 입술.json() : 통신 요청으로 받은 데이터를 res라는 이름으로 JSON 형식으로 변환합니다.
.then(데이터 ⇒ {}) : JSON 형식으로 변환된 데이터에 이름 데이터를 추가하여 사용
// 리마인드
GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져간다.
http://naver.com?param=value¶m2=value2
POST 요청은, data : {} 에 넣어서 데이터를 가져간다.
data: { param: 'value', param2: 'value2' },가져오기 통신 결과 값 사용
1. 미세먼지 데이터가 있는 곳 찾기
RealtimeCityAir > 행에는 입자상 물질 데이터가 포함되어 있습니다.
2. 꺼내서 확인
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
fetch("http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99")
.then(res => res.json())
.then(data => {
console.log(data('RealtimeCityAir')('row')(0))
})
</script>
3. 루프 문으로 이전 데이터 출력
<script>
fetch("http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99")
.then(res => res.json())
.then(data => {
let rows = data('RealtimeCityAir')('row')
rows.forEach((a) =>{
console.log(a);
})
})
</script>4. 지구 데이터에서 지구 이름(MSRSTE_NM) 및 입자상 물질 함량(IDEX_MVL) 선택 및 출력
<script>
fetch("http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99")
.then(res => res.json())
.then(data => {
let rows = data('RealtimeCityAir')('row')
rows.forEach((a) =>{
console.log(a('MSRSTE_NM'), a('IDEX_MVL'));
})
})
</script>
/* 변수를 사용하자
let gu_name = a('MSRSTE_NM')
let gu_mise = a('IDEX_MVL')
console.log(gu_name, gu_mise)
*/
가져오기 연습
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
.bed {
color : red;
}
</style>
<script>
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((a) => {
let gu_name = a('MSRSTE_NM')
let gu_mise = a('IDEX_MVL')
console.log(gu_name, gu_mise)
//조건문으로 미세먼지가 40이 넘으면 빨간색으로
let temp_html = ``
if(gu_mise > 40){
temp_html = `<li class="bed">${gu_name} : ${gu_mise}</li>`
}else{
temp_html = `<li>${gu_name} : ${gu_mise}</li>`
}
$('#names-q1').append(temp_html)
})
})
}
</script>
지금까지 사이클
데이터를 얻다
데이터에서 목록인 부분만 선택
목록을 살펴보고 필요한 정보를 꺼냅니다.
조건을 붙이다