[JS] Javascript #9 Summary

Javascript #9 Summary

• 드림코딩 by 엘리: 자바스크립트 10. JSON 개념 정리 와 활용방법 및 유용한 사이트 공유 JavaScript JSON | 프론트엔드 개발자 입문편 (JavaScript ES6)
  
  
  Caution
  
  강의를 듣고 제가 기억하기 쉽게 기록하여 변형된 내용이 있을 수 있습니다.
  오류가 있거나 해당 글에 문제가 있을 경우 피드백 부탁드립니다.

JSON

JavaScript Object Notation

• Simplest data interchange format

• Lightweight text-based structure

• Easy to read

• Key-value pairs

• Used for serialization and transmission of data between the network and the network connection

• Independent programming language and platform

HTTP

Hypertext Transfer Protocal

• Hypertext: 하이퍼링크 뿐만 아니라 문서나 이미지 파일도 포함한다.

AJAX

Asynchronous Javascript And XML

• 웹페이지에서 동적으로 서버에게 데이터를 주고 받을 수 있는 기술
• ex. XMLHttpRequest (XHR): Browser API 에서 제공하는 Object 중 하나
• ex2. fetch() API: 나온지 얼마 안된 API

XML

Extensible Markup Language

• HTML 과 같은 Markup Language 중 하나
• 불필요한 태그 --> 파일 사이즈 커짐 + 가독성 안좋음
• json 이 이를 대체하게 됨

Object to JSON

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

json = JSON.stringify(['apple', 'banana']);
console.log(json);  // ["apple","banana"]

const rabbit = {
    name: 'tori',
    color: 'white',
    size: null,
    birthDate: new Date(),
    // symbol: Symbol("id"),  // javascript에만 있는 특별한 data type 은 json 에 포함 X
    jump: function() { console.log(`${this.name} can jump!`); },  // object 에 있는 data 가 아니기 때문에 json 에 포함 X
}


json = JSON.stringify(rabbit);
console.log(json);  // {"name":"tori","color":"white","size":null,"birthDate":"2020-08-28T13:00:11.703Z"}


json = JSON.stringify(rabbit, ['name', 'color'])
console.log(json);  // {"name":"tori","color":"white"}


json = JSON.stringify(rabbit, (key, value) => {
    console.log(`key: ${typeof key}, value: ${value}`);  // key, value 모두 출력.
    // 첫번째 값의 key 는 empty string, value 에 최상위 object 가 반환됨을 알 수 있다.
    return key === 'name' ? 'bruce' : value;
});
console.log(json);  // {"name":"bruce","color":"white","size":null,"birthDate":"2020-08-28T13:15:20.210Z"}

JSON to Object

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

json = JSON.stringify(rabbit);
const obj = JSON.parse(json);

console.log(obj);

rabbit.jump();  // tori can jump!
json.jump();  // serialization 과정에서 function 은 포함이 되지않아 jump() 가 call 되지않는다.