프로그래밍 언어/Javascript
JSON 개념 정리와 활용 방법
김곰댕
2021. 8. 24. 16:36
728x90
1) HTTP : 클라이언트와 서버가 통신할 수 있도록 해주는 것
2) HTTP를 이용해 서버에게 데이터를 요청해 받아올 수 있는 방법 : AJAX(웹 페이지에서 동적으로 서버에게 데이터를 주고 받을 수 있음) ex) XHR
3) XML : 태그들을 이용하여 데이터를 나타냄
JSON : 브라우저뿐만 아니라 모바일에서 서버와 데이터를 주고 받을 때, 서버와 통신을 하지 않아도 오브젝트를 파일시스템에 저장할 때 사용
1) 데이터를 주고 받을 때 쓸 수 있는 가장 간단한 포맷
2) 텍스트를 기반으로해 가벼움
3) 읽기가 쉬움
4) key와 value로 이루어져 있음
5) 데이터를 서버와 주고받을 때 직렬화하고 데이터를 전송할 때 사용
6) 프로그래밍 언어나 플랫폼에 상관없이 사용이 가능
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" consent="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="json.js"></script>
</head>
<body></body>
</html>1. Object to JSON
//stringty(obj)
let json = JSON.stringify(true);
console.log(json);
json = JSON.stringify(['apple', 'banana']);
console.log(json);
const rabbit =
{
name: 'tori',
color: 'white',
size: null,
birthDate: new Date(),
//symbol: Symbol("id"), //자바스크립트에만 있는 특별한 데이터도 json에 포함되지 않음
jump: () => {console.log(`${this.name} can jump!`);}//jump(함수)는 json에 포함되지않음 : 함수는 오브젝트에 있는 데이터가 아니기 때문에 제외
}
json = JSON.stringify(rabbit);
console.log(json);
1) 배열형
//배열형
//토끼 오브젝트에서 원하는 프로퍼티만 뽑을 수 있음
json = JSON.stringify(rabbit,['name', 'color']);
console.log(json);
2) 콜백 함수형
//콜백 함수형
json = JSON.stringify(rabbit, (key, value) =>
{
console.log(`key: ${key}, value: ${value}`);
return key === 'name' ? 'ellie' : value ; //key가 name인 경우 ellie로 설정 아닌경우 value 사용
});
console.log(json);
2. JSON to Object
//parse(json)
json = JSON.stringify(rabbit);
console.log(json);
//json을 object로 변환
//const obj = JSON.parse(json);
//console.log(obj.birthDate); //obj.birthDate는 string이기 때문에 getDate()를 사용할 수 없음
//좀 더 세밀하게 변화하고 싶을 때 콜백함수 사용
const obj = JSON.parse(json, (key,value) =>{
console.log(`key: ${key}, value: ${value}`);
return key === 'birthDate' ? new Date(value) : value; //key가 birthDate인 경우 새로운 Date라는 오브젝트를 생성 아닌경우 value 사용
})
console.log(obj);
rabbit.jump();
//rabbit을 json으로 변환할때 jump함수는 포함되어 있지 않음
//따라서 json을 다시 object로 바꾼 obj에서는 obj.jump을 사용할 수 없음
console.log(rabbit.birthDate.getDate());
console.log(obj.birthDate.getDate()); //새로운 Date라는 오브젝트를 생성헀기 때문에 getDate() 사용가능
728x90