[JavaScript] 자바스크립트 기본 Part 3

 

들어가기 전

HTTP를 이용해 서버와 주고받는데 이때 AJAX를 사용합니다.

XHR(XMLHttpRequest)나 fetch() API를 이용하면 서버에서 간단하게 데이터를 가지고 올 수 있습니다.

하지만 이제 XML로 데이터를 주고받는 것을 사용하지 않고 JSON을 주로 사용합니다.

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',
    birth: new Date(),
    jump: () => console.log("can jump")
}

json=JSON.stringify(rabbit);
console.log(json);
// 함수를 제외한 모든 Object 출력

 

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

// 콜백함수 사용하여 출력

 

JSON to Object

const obj=JSON.parse(json);
console.log(obj);
rabbit.jump(); // can jump 출력
obj.jump() // 오류

console.log(rabbit.birth.getDate()); // 정상 출력
console.log(obj.birth.getDate()); // 오류
// 오류, obj.birth는 object가 아닌 string이기 때문

obj는 string형태로 변환했다가 parse 한 거라 그대로 string 형태이기 때문에 getDate()로 불러올 수 없습니다.

반면에 rabbit에서 가져온 birth는 object 형태이기 때문에 정상적으로 출력됩니다.

때문에 obj에서 getDate()하려면 콜백 함수를 만들어줘야 합니다.

 

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

// 정상 출력

 

참고할 사이트

 

1. JSON Diff

JSON을 비교하여 문제를 찾기 좋은 사이트

 

2. JSON Beautifier

JSON을 복사해서 오면 포맷이 망가지는데 올바르게 들여 쓰기 해주는 사이트

 

3. JSON Parser

JSON으로부터 Object가 어떻게 표기되는지 확인할 수 있는 사이트

 

4. JSON Validator

JSON의 문법 오류를 찾아주는 사이트