[JS]JSON

Hyodduru ·2021년 10월 26일
0

JavaScript

목록 보기
20/60
post-thumbnail

출처 : 유튜브 드림코딩 자바스크립트

서버통신의 시작 JSON

client (data request-->) <------------->(<--response) server

client와 server 간의 서버통신을 위해 http가 등장.

HTTP(HyperText Transfer Protocol) : 어떻게 Hypertext를 서로 주고받을 수 있는지를 규약한 protocol 중 하나.

Hypertext는 웹사이트에서 이용되어지는 Hyperlinks만 이야기하는 것이 아니라 전반적으로 쓰여지고 있는 resource, 문서나 이미지 file들을 포함해서 말한다.

HTTP를 이용해서 serverdprp data를 요청해서 받아올 수 있는 방법 => AJAX

AJAX? Asynchoronous Javascript and XML, 웹페이지에서 동적으로 server에게 data를 주고받을 수 있는 기술.

그밖에 XHR object(XML Http Request), fetch API 또한 있음.

참고) XML : html과 같은 markup언어 중 하나. AJAX, XHR은 XML뿐 아니라 다양한 data를 주고받을 수 있음!

요즘은 XML대신 JSON을 많이 쓴다.

JSON

Javascript Object Notation

키 - 값 쌍으로 이루어진 data object를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형표준 포맷 특히 인터넷에서 자료를 주고 받을 때 그 자료를 표현하는 방법으로 알려져 있음.

  • simplest data interchange format
  • light weight 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
    -> 프로그래밍 언어나 플랫폼에 상관없이 JSON사용이 가능하다.

공부해야할 것

  1. object를 어떻게 string으로 serialize(직렬화)해서 JSON으로 변환할 지
  2. string을 어떻게 deserialize하여 object로 변환할 지

1. Object to JSON

stringfy(Obj)

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

json = JSON.stringify(['apple','banana']);
console.log(json)//["apple","banana"] => 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);
//{"name":"tori","color":"white","size":null,"birthDate":"2021-10-26T11:31:39.352Z"} 

함수 jump는 제외됌. why? 함수는 object 내에 있는 data가 아니기 때문.
symbol도 제왜됨. why? js에만 있는 특별한 데이터도 json에 포함되지 않는다.

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


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

console.log(json) // name이 ellie로 변경되어 출력된다.

2. JSON to Object

parse(json)

json = JSON.stringify(rabbit);
const obj = JSON.parse(json);
console.log(obj);
rabbit.jump(); 
//obj.jump();//변환한 object는 함수는 serialize될때 포함되어있지 않았음. -> 함수 없어짐. error 발생. 

console.log(rabbit.birthDate.getDate());
//console.log(obj.birthDate.getDate());// error 발생. why? birthDate 는 string 이기 때문! 
                                     // json에서 저장된 문자열이 다시 object 형태에 문자열 타입으로 값이 할당 된 것! 

아래와 같이 콜백함수를 전달하여 세밀하게 무언가를 통제할 수 있다!


const obj2 = JSON.parse(json, (key, value)=>{
    console.log(`key : ${key}, value : ${value}`);
    return key === 'birthDate' ? new Date(value) : value;
})

console.log(obj2.birthDate.getDate()); // 값 얻을 수 있음! 

참고)
overloading : 함수의 이름은 동일하지만 어떤 parameter를 전달하냐에 따라서 각각 다른 방식으로 호출 가능한 것

JSON 관련 유용한 사이트)

  • JSON Diff - 서버에 요청했을 때 첫번째로 받아온 데이터와 두번째로 받아온 데이터 어떤 게 다른지 잘 모르겠을 때 비교 가능
  • JSON Beaufier - 서버에서 받음 json을 붙여넣으면 format이 망가지는 경우 있음. 포맷 예쁘게 만들어줌
  • JSON Parser - json type을 object 형태로 어떻게 표기되는지 확인 가능!
  • JSON Validator - 유효한 json data인지 확인 가능
profile
꾸준히 성장하기🦋 https://hyodduru.tistory.com/ 로 블로그 옮겼습니다

0개의 댓글