JSON(JavaScript Object Ntation)
데이터를 저장하거나 전송할 때 많이 사용하는 경량의 데이터 전송 방식이다.
key와 value로 구성
https://velog.io/@surim014/JSON%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80
JSON이란 무엇인가?
JSON (JavaScript Object Notation) JavaScript Object Notation라는 의미의 축약어로 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식 Javascript에서 객체를 만들 때 사용하는 표현식을 의미한
velog.io
자세한 내용은 여기 사이트 참조해서 공부하기.
API
- GET
통상적으로 데이터 조회(read)를 요청할 때 사용
ex)영화 목록 조회
주소가 크게 두가지 부분으로 나뉘는데 '?' 를 기준으로 나뉜다
'?' 기준 앞이 서버 주소, 뒤가 전달할 데이터이다.
뒤에 전달할 데이터가 하나가 아니라 더 있다면 '&' 사용
ex) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
q=아이폰 (검색어)
sourceid=chrome (브라우저 정보)
ie=UTF-8 (인코딩 정보)
GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져갑니다.
http://naver.com?param=value¶m2=value2
- POST
통상적으로 데이터 생성(create), 수정(update), 삭제(delete) 요청할 때 사용
ex)회원가입, 비밀번호 수정, 회원탈퇴
POST 요청은, data : {} 에 넣어서 데이터를 가져갑니다.
data: { param: 'value', param2: 'value2' },
Fetch
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Fetch 시작하기</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function hey() {
let url = 'http://spartacodingclub.shop/sparta_api/seoulair';
fetch(url).then((res) => res.json()).then((data) => {
console.log(data['RealtimeCityAir']['row'][0]);
});
}
</script>
</head>
<body>
<button onclick="hey()">fetch 연습!</button>
</body>
</html>url 변수에 openAPI 주소를 넣고
fetch("이곳에 url 입력") 이 url로 웹 통신 요청
괄호안에 url만 존재하면 GET 방식
.then((res)
통신 요청을 받은 데이터의 명 'res' (변경가능)
=> res.json())
res는 JSON 형태로 바꿔서 조작 가능해질 것이다
.then((data) => {})
JSON 형태로 받은 데이터를 data라는 이름으로 붙일 것이다.
'html,css,javascript' 카테고리의 다른 글
| toggle, val (0) | 2024.11.25 |
|---|---|
| jquery, list dictionary 혼합사용 (0) | 2024.11.21 |
| html, css, javascript (2) | 2024.11.20 |