[스파르타코딩클럽 웹개발 기초] 3주차-2 / JSON, Fetch

JSON

서버 → 클라이언트

• API : 운영체제와 응용프로그램 사이의 통신에 사용되는 언어나 메시지 형식(by 네이버)

              - 통상적으로 허락된 곳의 접근만 허락

              - open API : 누구나 접근 가능

• JSON : Key:Value로 이루어짐 (자료형 Dictionary와 유사)

서울시 미세먼지 OpenAPI

 

클라이언트 → 서버

클라이언트가 요청 할 때의 데이터 타입 : GET, POST

•   GET : 데이터 조회(Read)를 요청할 때 - 영화 목록 조회
•   POST : 데이터 생성(Create), 변경(Update), 삭제(Delete)를 요청 할 때 - 회원 가입, 탈퇴, 비밀번호 수정

 

GET

다음 영화에서 명량 검색 (현재는 다음 영화 서비스 종료)

주소 → https://movie.daum.net/moviedb/main?movieId=68593

  - '?'를 기준으로 앞은 서버 주소, 뒤 영화 번호

  - 서버 주소 : https://movie.daum.net/moviedb/main  

  -영화 번호 : movieId=68593

 

• ? : 여기서부터 전달할 데이터가 작성된다
• & : 전달할 데이터가 더 있다

 

Fetch

• fetch('url 입력') → 이 url로 웹통신 요청
• .then() →  통신 요청을 받은 다음 이렇게 할 거야
• .then(res ⇒ res.json()) → 통신 요청을 받은 데이터는 res라는 이름으로 JSON화
• .then(data ⇒ {}) →  JSON 형태로 바뀐 데이터를 data 라는 이름 붙임

(1)

서울시 미세먼지 open API page

서울시 미세먼지 데이터에서 반복문을 통해 구 이름과 미세먼지 상태 불러오기(코드는 코드스니펫 복사)

위 코드를 통해 만들어진 페이지

'fetch 연습!' 버튼을 누른 후 '검사'>Console을 살펴보면 구이름과 미세먼지 상태가 나와있음

 

(2) Console 창이 아닌 웹 창에 수치 띄우기

q1 버튼을 누르면 데이터 모두 지우고(empty) fetch append

body - 코드스니펫에서 복사

처음 화면

'업데이트' 버튼을 눌렀을 때 - 누를 때마다 수치가 실시간 정보로 업데이트 됨

 

(3) 미세먼지 수치가 40이상이면 빨간색으로 표시

fetch 안 반복문 안에 조건문 넣기

  - 미세먼지 수치(gu_mise = IDEX_MVL)가 40 이상이면 class bad 값을 주고 아니면 그대로

style에 bad는 red로

40 이상만 빨간색

 

 

<Fetch 적용>

(1) 추억앨범에 현재 미세먼지 상태 표시하기

바껴야 하는 부분에 span 태그한 후 id 값 주기

fetch로 미세먼지 상태 불러오기

페이지 상단에 현재 서울의 미세먼지 상태가 추가됨

 

(2) 스파르타플릭스 현재 기온 표시하기

현재 서울 기온 Open API page

현재기온 span으로 id 값 주기

fetch로 현재 기온 불러오기

스파르타플릭스 페이지 상단에 현재기온이 추가됨

 

 

 

---

스파르타코딩클럽

[왕초보] 코딩이 처음이어도 쉽게 배우는 웹개발 A to Z

3주차 3-6 ~ 3-12