1. Fetch란?
Fetch는? URL을 넣으면 그 데이터를 가져오는 친구다.
해당 HTTP로 요청하고 데이터를 반환 받는다.
이 한 문장의 개념으로 간단하게 이해하자.
2. Fetch를 사용하는 기본 골격
Fetch의 기본 형태는 다음과 같다.
fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
console.log(data)
})
JavaScript
복사
URL을 입력해서 데이터를 가져오는지 확인해볼 차례
3. 서울시 미세먼지 실시간 데이터 링크를 써서 확인
저번에 사용했던 서울시 미세먼지 실시간 데이터 링크를
URL에 입력해본다.
fetch("http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99").then(res => res.json()).then(data => {
// 데이터 전체가 찍히는지 확인console.log(data)
})
JavaScript
복사
개발자도구의 console에 다음과 같이 데이터가 들어온 것을 확인 할 수 있다.
4. 추가적으로 다른 방식으로 데이터가 정리되는지 확인
전체 데이터는 리스트 형식이기 때문에 내가 원하는 정보만 추출 할 수 있는지 확인해보려고
이것저것 코드를 다르게 추가해보았다.
fetch("http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99").then(res => res.json()).then(data => {
// 데이터 전체가 찍히는지 확인(완료)// console.log(data)// 첫번째 데이터가 찍히는지 확인console.log(data['RealtimeCityAir']['row'][0])
// 반복문으로 찍히는지 확인let rows = data['RealtimeCityAir']['row']
rows.forEach((a) => {
console.log(a)
});
// 구의 이름'MSRSTE_NM'만 찍히는지 확인
rows.forEach((a) => {
console.log(a['MSRSTE_NM'])
});
// 구의 이름'MSRSTE_NM'과 수치'IDEX_MVL'이 찍히는지 확인
rows.forEach((a) => {
console.log(a['MSRSTE_NM'], a['IDEX_MVL'])
});
})
JavaScript
복사
첫번째 데이터 index가 [0]인 데이터만 찍히는지 확인
rows로 데이터는 [RealtimeCityAir]의 [row] 데이터만으로 선언후
반복문 forEach 로 찍히는지 확인
반복문 중 특정 필드값만
구의 이름'MSRSTE_NM'만, 또는 구의 이름+수치'IDEX_MVL'
추출되는지 확인
해당 전체 코드를 보면서
이전에 공부 할때 구경만 했던
=> 화살표 함수(Arrow function)
등장하고있다.
취향이라고 들었지만 이렇게 쓰기만 하는 기업도, 개발자도 있다고 배웠는데
막상 사용을 많이 안해봐서 익숙하지 않다.
직관적인 장점이 있다고하니 익숙해져보는 것도 나쁘지 않을것 같다.
Arrow function은 좀 찾아봐야 할 듯 하다.
