js 공부(ft. sparta)/2주차
2-5. Fetch 시작하기(1)
c_sm
2023. 4. 5. 17:27
서버에서 데이터를 가지고와서 활용할 수있는것이 Fetch.
Fetch를 가지고 아까 봤던 미세먼지 데이터를 가지고 와서 코드에서 활용할 수 있게 된다.
먼저 새로운 파일을 만들어 준 다음. 코드스니펫에있는 것을 복사해 붙여넣어준다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Fetch 시작하기</title>
<script>
</script>
</head>
<body>
Fetch 연습을 위한 페이지
</body>
</html>
그리고 나서 Fetch 기본 골격이란 코드스니펫을 복사해서 script에 넣어준다.
fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
console.log(data)
})
위 코드의 뜻은 "여기에 url을 입력" 이건 내가 가져오고싶은곳의 url을 입력해주고, res =>res.json() 은 json 형태로 바꿔줄꺼다. data =>{ ... } 그리고 그 data를 내가 활용할거다. 라는 뜻이다.
위 코드에서 url입력란에 http://spartacodingclub.shop/sparta_api/seoulair 이걸 넣어주고 실행하면 미세먼지 데이터를 가져온것을 console창에서 확인할 수 있다.