JS-JSON

춤추는 병따개·2023년 2월 11일
0

HTTP
Hypertext Transfer Protocal
클라이언트와 서버간의 통신이 가능하게 해주는 역할!
*브라우저 위에서 동작
[client(웹사이트 / 웹어플리케이션)]요청 =>[🔛통신]<= 응답[Server]

AJAX
Asynchronous JavaScript And XML (XML는 html과 같은 마크업 언어 중 하나)
웹페이지에서 동적으로 서버에게 데이터*를 주고 받을 수 있는 기술!

* 데이터
서버와 데이터를 주고 받을땐 XML외에도 다른 파일 포멧 이용할 수 있다! 
(ex, JSON..)
XHR 오브젝트 (XMLHttpRequest)
-브라우저 API에서 제공하는 오브젝트 중 하나
-서버에 간단한 데이터 요청/응답 받을 수 있음
-데이터 용량이 커서 현재는 거의 JSON으로 대체됨
JSON (JavaScript 'Object' Notation)
-ECMAScript 3rd 1999에서 영감을 받아 만들어진 포맷
-네트워크 간의 교류 시 데이터를 serialization(직렬화)하고 전송할 때 사용
-데이터를 주고받을 때 사용할 수 있는 가장 간단한 포맷
-프로그래밍 언어/플랫폼에 상관없이(거의 대부분에 언어에도)쓸 수 있음
-object{key:value}의 구성  
-눈으로 읽기 쉽고 가벼운 텍스트를 기반으로 한 구조

JSON 사용

🔥stringify & parse🔥공부 더 필요함
  • stringify : 오브젝트를 JSON(string)으로 직렬화(serialize)변환하는 방법
  • parse : 직렬화된 JSON(string)을 deserialize변환하는 방법
  • 각각의 변환 방법에선 콜백 함수를 통해 디테일한 데이터 조정이 가능하다

1. Object to JSON // 🔥stringify

문법)
interface JSON {
  stringify(value: any, replacer?: (this: any, key: string, value: any) => any, space?: string | number): string;  
  stringify(value: any, replacer?: (number | string)[] | null, space?: string | number): string;
}
  * ?은 옵셔널, 따라서 stringify(value: any) : string;이렇게 작성 가능
예문)
let json = JSON.stringify(true)
//true

json = JSON.stringify(['apple'],['bananan']);
//["apple","banana"] 배열화되면서 JSON의 규격화="쌍따옴표로 변경

const rabbit = {
    name: 'tori',
    color: 'white',
    size: null,
    birthDate: new Date(),
    symbol: Symbol('id');		
    //symbol처럼 JS에만 있는 데이터도 출력되지 않음
    jump: () => {
        console.log('${name} can jump!');
    //jump()함수는 object에 포함된 데이터가 아니기에 출력이 되지 않음
    },
};


json = JSON.stringify(rabbit);
console.log(json);
//{"name":"tori","color":"white","size":null,"birthDate":"2023-02-13T07:09:58.618Z"}
//🔥
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 value;
});
console.log(json);
//key: , value: [object Object]
//json.js:32 key: name, value: tori
//json.js:32 key: color, value: white
//json.js:32 key: size, value: null
//json.js:32 key: birthDate, value: 2023-02-13T07:43:02.020Z

2. JSON to Object // 🔥parse

interface JSON {
  parse(text: string, reviver?: (this: any, key: string, value: any) => any): any;
}
  * ?은 옵셔널, 따라서 parse(text: string) : any;이렇게 작성 가능
const rabbit = {
    name: 'tori',
    color: 'white',
    size: null,
    birthDate: new Date(),
    symbol: Symbol('id'),  // 출력 X, JS 자체 데이터인 symbol은 적용안됨
    jump(){
        console.log(`${this.name} can jump!`); 
    },   //출력 X, 함수는 오브젝트에 포함된 데이터가 아니여서 적용 안됨
};
//🔥
json = JSON.stringify(rabbit);  // object to JSON
const obj = JSON.parse(json);   // JSON to object
console.log(obj); 
// {name: 'tori', color: 'white', size: null, birthDate: '2023-02-13T08:11:03.644Z'}

rabbit.jump();
// tori can jump!
obj.jump();
// error: rabbit오브젝트를 stringify할 때 함수는 포함되지 못함! 
// = 함수가 없는 JSON을 prase하면 당연히 함수는 없는것임! 

유용한 사이트:
JSON Diff checker | http://www.jsondiff.com/
서버에서 받아온 첫번째, 두번째 데이터의 차이 비교 가능 (디버깅에 유용)
JSON Beautifier/editor| https://jsonbeautifier.org/
서버에서 받아온 JSON을 보기좋게 포맷 다듬어줌
JSON Parser| https://jsonparser.org/
JSON 타입을 오브젝트 형태로 보고싶을때
JSON Validator| https://tools.learningcontainer.com/j...
JSON 작성시 디버깅 확인(오탈자 등)

profile
FE 개발 공부 중

0개의 댓글