# 자바스크립트 json

## json

* 데이터를 주고 받을때 쓸 수 있는 가장 간단한 포멧 
* 텍스트를 이용해 사용하기때문에 가볍고 사람 눈으로 읽기에도 편함
* KEY와 VALUE 로 이루어짐
* 데이터를 서버와 주고 받을때 직렬화 하다 
* 프로그래밍언어와, 플랫폼에 상관없이 JSON으로 변환하고 쓸 수있다.

### HTTP

* 브라우저 위에서 동작하고있는 웹페이지나, 앱어플리케이션 같은 클라이언트들이 어떻게 서버와 통신할 수 있는지를 
* hypertext tansfer protocal 을 어떻게 서로 주고 받는지를 정리한것을 규약한것  프로토콜의 하나

### AJAX

* 웹페이지에서 동적으로 서버에게 데이터를 주고 받을수 있는 기술 
* 최근 개발된 fetch() API로 좀 더 간편하고 빠르게 주고 받을 수 있게 되었다. (브로우저 서버 통신)
* 인터넷 익스플로우에서는 지원이 안됨 

### XML

* html과 같은 마크업하는 언어 태그들을 이용해서 화면에 나타나게함 
* 요즘에는 많이 사용되지 않음

### ​

### object to JSON

```javascript
//stringfy(obj)
let json = JSON.stringify(true);
console.log(json);

json = JSON.stringify(['apple', 'banana']);
console.log(json);
// JSON은 "" 로 출력이됨 (JSON 규격사항)

const rabbit = {
    name: 'tori',
    color: 'white',
    size: null,
    birhDate: new Date(),
    jump: () => {
        console.log(`${name} can jump!`);
    },
};
// JSON 에는 함수나 심볼은 유효하지 않기 때문에 그렇게 인자로 들어와도 결국은 null로 리턴

json = JSON.stringify(rabbit);
console.log(json); // {"name":"tori","color:" "white"....이런식으로 출력됨}

json = JSON.stringify(rabbit, ['name','color','size']); // replacer
console.log(json); // name, color, size 만 출력됨

json = JSON.stringify(rabbit, (key, value) => {
    console.log(`key: ${key}, value: ${value}`);
    return key === 'name' ? 'ellie' : value; // name이 ellie로 변환됨
});
console.log(json);

```

* JSON 에는 parse, stringify가 있음
* 두가지는 전달 되는 매게변수가 다르다. 각각 다른 방식으로 호출이 가능하다. (오버로딩)

### json to object

```javascript
//parse(json)
console.clear();
json = JSON.stringify(rabbit);
console.log(json); // rabbit의 값이 출력됨
const obj = JSON.parse(json, (key, value) => {
    console.log(`key: ${key}, vlaue: ${value}`);
    return key === 'birthDate' ? new Date(value) : value;
});
console.log(obj);
rabbit.jump();
// obj.jump(); 에러 함수는 포함이 되있지 않기때문에 그것을 obj전환 했을때 점프라는 기능을 갖고있지 않음 


console.log(rabbit.birhDate.getDate());
console.log(obj.birhDate.getDate()); //29

```

### 유용한 사이트

*  JSON Diff checker: [http://www.jsondiff.com/](https://www.youtube.com/redirect?event=video_description\&redir_token=QUFFLUhqa2VNX1c5dzlpVmVmOU1uYXFWMjlmSGZXVUtSd3xBQ3Jtc0ttZHhGU3BNWGZZTWhhb3VLMDZabmR3b0NpRi1uX2RFZkRwdWl2TWlMZktwNHhOcUx2R0Q4c2d0OXFFd1JiQ3dJQmFFLXdjcVZaUmFIanNMa1NSYzFyXzVQQTRPdldWSkc3MkFFclFrcmJGZklBczBvUQ\&q=http%3A%2F%2Fwww.jsondiff.com%2F)
*  JSON Beautifier/editor: [https://jsonbeautifier.org/](https://www.youtube.com/redirect?event=video_description\&redir_token=QUFFLUhqbUhUWGNzS2xmbUVQcXNvMnRlcHZha2Y3U2dXZ3xBQ3Jtc0tuWXVjME82X2pWQl9TU0tfTlh0cnRKQTZTUFJCWFhPRWQwc3k1aExsZnktVlhOUkdaYzItcEVwanN4ZEtUVmstTHlFbFRWQ2VPUTg5cUxjQWtab0RpMV84SG5NdC1CYmROaWJZdnpKMWdXd3ROQkpYOA\&q=https%3A%2F%2Fjsonbeautifier.org%2F)
*  JSON Parser: [https://jsonparser.org/](https://www.youtube.com/redirect?event=video_description\&redir_token=QUFFLUhqbmNhWkZkS2RHOHhHWWFJLXBjSXhRdFdWLXNHUXxBQ3Jtc0tuZzB4YVRZWld4RlJEWlpDX2g2Q1JPbUFQeXJvYkZEQWdEQkFJemRHMXZrYVNReE9KTDBtdDdVVGVfdlhWSUxaV1VydDk2SzB4NF9DenMzcVphQXEyNWZQYk5sODh4SXBQaEpVWHFUaS14OXdKdXBUWQ\&q=https%3A%2F%2Fjsonparser.org%2F)
* &#x20;JSON Validator:<https://tools.learningcontainer.com/json-validator/>