Javascript JSON.parse(), JSON.stringify() 사용하는법

HTTP 

웹사이트에서 사용되느 링크, 문서, 이미지

client -서버 

서버에서 데이터를 request (요청), response (응답)하는 통신 규약 

AJAX (Asynchronous JS and XML)

웹페이지에서 데이터를 동적으로 서버에게 데이터를 주고받을 수 있는 기술

XHR (XML HTTP Request)

: 브라우저에서 제공하는 object

 

- XML

markup 언어중 하나로 html과 마찬가지로 데이터를 표현할 수 있는 방법 

-> 불필요한 태그들 많이 들어가 가독성이 떨어짐 

- fetch() API

JSON (JS object Notation)

Object{ key:value} 

 :  브라우저, 모바일에서 서버와 통신할 때 , (통신 아니어도)object를 파일시스템에 저장할 때

- 데이터를 주고받을 수 있는 아주 간단한  data format

- 프로그래밍 언어와 플랫폼에 상관없이 사용가능 

 

 

 

---

상호 변환 하며 데이터 전달 

Object ->json

JSON.stringify

jump라는 함수는 변환 안됨 

const rabbit = {
	name: 'tori'
    date: new Date()
    jump: () =>{
    	console.log(`${name} can jump`);
    }
    
json =JSON.stringify(rabbit);
//{'name: 'tori'}


//key 가 name이면  'tami'라는 value로 설정하고 아니면 원래 value
json= JSON.stringfy(rabbit, (key,value)=>{
	console.log(`key: ${key}, value:${value}`);
    return key==='name'? 'tami':value;
});
    

JSON -> Object

JSON>parse

json = JSON.stringfy(rabbit);

const obj = JSON.parse(json);

rabbit.junp() //가능
obj.jump() // 없음 

rabbit.birthDate.getDate() // 가능
obj.birthDate // 불가능 -> json object로 바뀐것은 string 형태이기 떄문

const obj = JSON.parse(json, (key,value)=>{
	return key==='birthDate'? new Date(value): value;
});

 

 

---

Json diff : http://www.jsondiff.com/​ J

서버에게 요청햇을때 1쨰,2째 받아온 데이터 비교 가능 

json Beautifier: https://jsonbeautifier.org/

복붙한 json format  다시 복구

json Parser : https://jsonparser.org/​  

json  파일 object 형태로 확인

Json validator :  https://tools.learningcontainer.com/j...

유효한 json 데이터인지 확인 

 

 

참고한 영상 : www.youtube.com/watch?v=FN_D4Ihs3LE