TIL(20210716) - JSON & XML

🎁  Daily

- JavaScript 비동기 JSON 개념 학습

- XML과 JSON의 공통점과 차이점 학습

 

🤔  Learned

JSON(JavaScript Object Notation)

• JSON은 좀 더 쉽게 데이터를 교환하고 저장하기 위하여 만들어진 텍스트 기반의 데이터 교환 표준입니다.
• JSON은 XML의 대안으로서 좀 더 쉽게 데이터를 교환하고 저장하기 위하여 고안되었습다.
• 또한, JSON은 텍스트 기반이므로 어떠한 프로그래밍 언어에서도 JSON 데이터를 읽고 사용할 수 있습니다.

XML(EXtensible Markup Language)

• XML은 HTML과 매우 비슷한 문자 기반의 마크업 언어(text-based markup language)입니다.
• 이 언어는 사람과 기계가 동시에 읽기 편한 구조로 되어 있습니다.
• XML은 HTML처럼 데이터를 보여주는 목적이 아닌, 데이터를 저장하고 전달할 목적으로만 만들어졌습니다.
• XML 태그는 HTML 태그처럼 미리 정의되어 있지 않고, 사용자가 직접 정의할 수 있습니다.

 

JSON과 XML의 공통점

1. 둘 다 데이터를 저장하고 전달하기 위해 고안되었습니다.
2. 둘 다 기계뿐만 아니라 사람도 쉽게 읽을 수 있습니다.
3. 둘 다 계층적인 데이터 구조를 가집니다.
4. 둘 다 다양한 프로그래밍 언어에 의해 파싱될 수 있습니다.
5. 둘 다 XMLHttpRequest 객체를 이용하여 서버로부터 데이터를 전송받을 수 있습니다.

JSON과 XML의 차이점

1. JSON은 종료 태그를 사용하지 않습니다.
2. JSON의 구문이 XML의 구문보다 더 짧습니다.
3. JSON 데이터가 XML 데이터보다 더 빨리 읽고 쓸 수 있습니다.
4. XML은 배열을 사용할 수 없지만, JSON은 배열을 사용할 수 있습니다.
5. XML은 XML 파서로 파싱되며, JSON은 자바스크립트 표준 함수인 eval() 함수로 파싱됩니다.

XML 예제

<dog>
    <name>승재</name>
    <family>인간<family>
    <age>28</age>
    <weight>70</weight>
</dog>

JSON 예제

{
    "name": "승재",
    "family": "인간",
    "age": 28,
    "weight": 70
}

---

1. JSON.stringify() 메소드

 JSON.stringify() 메소드는 인수로 전달받은 자바스크립트 객체를 문자열로 변환하여 반환합니다.

문법)

JSON.stringify(value)

예제)

// 1. Object to JSON
// stringfy(obj)
let json = JSON.stringify(['apple', 'banana']);
console.log(json);

const rabbit = {
    name: 'tori',
    color: 'white',
    size: null,
    birthDate: new Date(),
    jump: () => {
        console.log(`${name} can jump!`);
    },
};

json = JSON.stringify(rabbit);
console.log(json);

json = JSON.stringify(rabbit, ['name', 'color', 'size']);
console.log(json);

json = JSON.stringify(rabbit, (key, value) => {
    console.log(`key: ${key}, value: ${value}`);
    return key === 'name' ? 'Seungjae' : value;
});
console.log(json);

 

2. JSON.parse() 메소드

JSON.parse() 메소드는 JSON.stringify() 메소드와는 반대로 인수로 전달받은 문자열을 자바스크립트 객체로 변환하여 반환합니다.

문법)

JSON.parse(text)

예제)

// 2. JSON to Object 
// parse(json)
console.clear();
json = JSON.stringify(rabbit);
console.log(json);
const obj = JSON.parse(json, (key, value) => {
    console.log(`key: ${key}, value: ${value}`);
    return key === 'birthDate' ? new Date(value) : value;
});
console.log(obj);
rabbit.jump();
//obj.jump();

console.log(rabbit.birthDate.getDate());
console.log(obj.birthDate.getDate());

🌈  Tomorrow

• 클래스와 오브젝트
• 10가지 배열함수
• 비동기 callback
• 프로미스
• async & await