Fetch
어떤 서버에서 데이터를 받는 것
Fetch() 함수를 지원하기 전엔 특정 라이브러리에서 API를 호출 했다.
왜? 전에는 HTTP에서 요청을 받고 응답을 하는게 복잡한 과정이었다.
Fetch() 함수가 나오면서 대부분의 문제가 해결 됐다.
클라이언트 사용자는 서버에다가 주거나 받는 걸 항상 한다.
서버->클라이언트: JSON // 딕셔너리랑 비슷하게 생김
클라이언트->서버: GET 요청
https://movie.daum.net/moviedb/main?movieId=158260 이라고 하면
movie.daum.net 이건 서버의 위치
/moviedb/main 이건 서버 창구의 이름
?movieId=158260 이건 창구에 가져가는 번호(데이터)다.
- GET 호출
통상적으로 데이터 조회(Read)를 요청할 때
예) 영화 목록 조회
- POST 호출
통상적으로 데이터 생성(Creat), 변경(Update), 삭제(Delete) 요청
예) 회원 가입, 회원 탈퇴, 비밀번호 수정
GET 방식
API 는 통상적으로 허락된 곳에만 접근이 가능하다.
Fetch 기본 골격
fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
console.log(data)
})
let url = 'url.com' 을 사용해서 fetch에 사용하면 더 편하다
<head>
<title>실시간 서울시 날씨 정보</title>
<script>
function other() {
let url = 'http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99'
fetch(url).then(res => res.json()).then(data => {
console.log(data)
})
}
</script>
</head>
<body>
<button onclick="other()">서울시 날씨 정보 불러오기</button>
</body>http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99
서울시 날씨 정보 openapi다
버튼을 클릭하면 서울시 날씨 정보 openapi에 있는 정보를 console로 불러온다.
row에 있는 0번째 값을 불러오고 싶으면
<head>
<title>실시간 서울시 날씨 정보</title>
<script>
function other() {
let url = 'http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99'
fetch(url).then(res => res.json()).then(data => {
console.log(data['RealtimeCityAir']['row'][0])
})
}
</script>
</head>
<body>
<button onclick="other()">서울시 날씨 정보 불러오기</button>
</body>이렇게 불러오면 된다.
Fetch에 반복문 사용
<head>
<title>실시간 서울시 날씨 정보</title>
<script>
function other() {
let url = 'http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99'
fetch(url).then(res => res.json()).then(data => {
let rows = data['RealtimeCityAir']['row'] // rows라는 변수에 ['RealtimeCityAir']['row'] 이라는 데이터를 저장 한다.
rows.forEach(a => { // rows 를 a 라는 변수에 할당
let gu_name = a['MSRSTE_NM'] // a의 MSRSTE_NM 값을 가져와서 gu_name에 저장
let gu_mise = a['IDEX_NM'] // a의 IDEX_NM 값을 값을 가져와서 gu_mise에 저장
console.log(gu_name, gu_mise) // console에 gu_name, gu_mise 값을 출력
})
})
}
</script>
</head>
<body>
<button onclick="other()">서울시 날씨 정보 불러오기</button>
</body>row안에 있는 서울시 지역별 이름과 미세먼지 심각도 값을 버튼을 누르면 콘솔로 출력할 거다
반복문을 사용하여 console에 값이 뜨도록 했다.
2주차에 배운 temp_html과
append를 활용하여 사이트에 값이 출력되도록 할 수 있다.
append만 넣으면 버튼을 누를때마다 값이 계속 들어간다.
이를 방지하기 위해 fetch하기 전에 empty를 한번 해주자
class 값을 적용해서 스타일 값을 넣어준 뒤
조건문으로 특정 수치 이상만 스타일 값으로 바뀌게 설정 할 수 있다.
$(document).ready(function () {
alert('안녕!');
})페이지가 로드되면 자동으로 alert로 안녕을 출력하게 한다.
여기에 fetch를 넣어서 따로 버튼을 누를 필요없이 새로고침 시 값이 바뀌게 만들 수 있다.
'TIL' 카테고리의 다른 글
| 나의 미래 신문 홈페이지 (0) | 2023.09.28 |
|---|---|
| 내일배움캠프 9기 자바스프링 사전캠프 웹 개발 AtoZ 5주차 (0) | 2023.09.25 |
| 내일배움캠프 9기 자바스프링 사전캠프 웹 개발 AtoZ 4주차 (0) | 2023.09.25 |
| 내일배움캠프 9기 자바스프링 사전캠프 웹 개발 AtoZ 2주차 (0) | 2023.09.25 |
| 내일배움캠프 9기 자바스프링 사전캠프 웹 개발 AtoZ 1주차 (2) | 2023.09.25 |
