JSON（サーバ通信）

1. HTTP (HyperTextTransferProtocal)

Clinet < - 통신 -> Server
Clinet - request -> Server (요청)
Clinet < - response - Server (응답)

01. AJAX (Asynchronous Javascript And XML)

Clinet < - 통신(fetch API, JSON) -> Server

Clinet - request({key:value}) -> Server (요청)
 Clinet < - response({key:value}) - Server (응답)

02.JSON学習法

2. JSON (JavaScriptObjectNotation)

01. Object to JSON, JSON.stringify();

let json = JSON.stringify(true);
console.log(json); // "true"

json = JSON.stringify(['apple', 'banana']);
console.log(json); // ["apple', 'banana"], single quota '가 아닌 double qouta "가 표준 사항이다

const rabbit = {
	name : 'tory',
	color : 'white',
	size : null,
	birthDate : new Date(),
	sysmol : Symbol('id'),
	jump : () => {
		console.log(`${this.name} can jump!`);
	},
};
json = JSON.stringify(rabbit);
console.log(json); 
// "{"name":"tory","color":"white","size":null,"birthDate":"2021-02-02T16:54:56.602Z"}"
// 함수는 object에 있는 data가 아니기 때문에 제외된다,
// symbol 같이 js에만 있는 특별한 데이터도 포함되지 않는다

// JSON으로 변화되는것을 통제하고 싶을 때
// 배열에 key 값을 넣게되면 해당 key 값만 JSON 형식으로 변환 됨
json = JSON.stringify(rabbit, ["name"]);
console.log(json); // "{"name":"tory"}"

// callbackFn, 세밀하게 통제할 수 도 있다
json = JSON.stringify(rabbit, (key, value)=> {
console.log(`key : ${key}, value: ${value}`);
return value;
});
console.log(json);
// key : , value: [object Object]
// key : name, value: tory
// key : color, value: white
// key : size, value: null
// key : birthDate, value: 2021-02-02T16:54:56.602Z
// key : jump, value: () => {
//                    console.log(`${this.name} can jump!`);
//             }
// "{"name":"tory","color":"white","size":null,"birthDate":"2021-02-02T16:54:56.602Z"}"

json = JSON.stringify(rabbit, (key, value)=> {
console.log(`key : ${key}, value: ${value}`);
return key == 'name'?'ellie' : value;
});
console.log(json);
// "{"name":"ellie","color":"white","size":null,"birthDate":"2021-02-02T16:54:56.602Z"}"        

02. JSON to Object, JSON.parse(json)

json = JSON.stringify(rabbit);
console.log(json);
// {"name":"tory","color":"white","size":null,"birthDate":"2021-02-02T16:54:56.602Z"}
const obj = JSON.parse(json);
console.log(obj);
// "{"name":"tory","color":"white","size":null,"birthDate":"2021-02-02T16:54:56.602Z"}"
// 함수는 포함되지 않는다

console.log(rabbit.birthDate.getDate());
// Date라는 object가 입력되어 있기에 date의 내장함수 사용가능(API)
console.log(obj.birthDate.getDate());
// Error, obj안에 있는 값은 String이기 때문에 object가 아니다

const obj = JSON.parse(json, (key,value)=>{
console.log(`key : ${key}, value: ${value}`);
return value;
});
// key : name, value: tory
// key : color, value: white
// key : size, value: null
// key : birthDate, value: 2021-02-02T16:54:56.602Z
// key : , value: [object Object]
// {name: "tory", color: "white", size: null, birthDate: "2021-02-02T16:54:56.602Z"}

// key가 birthdate의 value 값을 string이 아닌 date 객체로 전환
const obj = JSON.parse(json, (key,value)=>{
return key === 'birthDate' ? new Date(value) : value;
});
// {name: "tory", color: "white", size: null, birthDate: Wed Feb 03 2021 01:54:56 GMT+0900 (대한민국 표준시)}

console.log(obj.birthDate.getDate());
// 에러가 나지 않는다

コメントサイト