Programming Language/HTML, CSS

2. 서버(Server) -> 클라이언트(Client), Fetch

wakelight23 2024. 10. 28. 21:33

JSON 이해하기

● JSON은 Key : Value 로 구성

  = 자료형 Dictionary와 비슷함

Fetch? 패치!

● 수정한 내용을 서버에 보내서 클라이언트 내용을 변경하는 것

→ 쉽게 말하면 실시간 멀티 플레이 게임에서 게임 업데이트를 하는 것 = 패치

 

fetch("여기에 URL을 입력")
// 이 URL로 웹 통신을 요청한다. 괄호 안에 다른 것이 없다면 GET!

.then(res => res.json()) 
// 통신 요청을 받은 데이터는 res라는 이름으로 JSON화

.then(data => { 
console.log(data) // 개발자 도구에 찍어보기
}) // JSON 형태로 바뀐 데이터를 data라는 이름으로 붙여 사용

- fetch("여기에 URL을 입력")

   → 이 URL로 웹 통신 요청을 보냄

- 괄호 안에 URL 밖에 들어있지 않다면 Default 상태로 GET

- then()

   → 통신 요청을 받은 다음 이렇게 할 것이다

- res => res.json()

   → 통신 요청을 받은 데이터는 res라는 이름을 붙일 것이다 (res는 변수 이름이니 변경 가능)

   → res는 JSON 형태로 바꿔서 조작을 가능케 함

- then(data => {} ) 

   → JSON 형태로 바뀐 데이터를 data 라는 이름으로 붙일 것이다

 

예시 코드로 좀 더 자세히

실행 환경 : VS code

url : 미세먼지 API

 

1. 기본적인 Fetch 형태

<script>
fetch("url").then(res => res.json()).then(data => {
    console.log(data)
})
</script>

 

결과물 : Chrome에서 마우스 우클릭 → 검사

- 가장 기본적인 틀을 만들어서 확인 했더니 위와 같은 결과가 나온다

 

2. Key를 알았으니 어떤 데이터를 가져올 지 정하기

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)
})

 

결과물

- MSRSTE_NM, IDEX_MVL에 저장된 데이터들을 가져오니 순서대로 위와 같은 결과가 출력.

- data['RealtimeCityAir']라는 Key에서 row에 있는 value 값 중에서
  지역 이름과 미세먼지 농도의 데이터를 가져온다.

 

3. 그럼 이제 HTML에 직접 출력해보기

let rows = data['RealtimeCityAir']['row']
$('#names-q1').empty()
rows.forEach((a) => {
   let gu_name = a[]
   let gu_mise = a[]
   console.log(gu_name, gu_mise)

   let temp_html = `<li>${gu_name} : ${gu_mise}</li>`
   $('#names-q1').append(temp_html)
})

 

결과물

→ 업데이트 버튼을 누르면

→ 위와 같이 지정한 데이터 값을 가져와서 HTML에 출력