# 자바스크립트 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/>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://leeboa.gitbook.io/study/_/json.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.