HTTP

• Hypertext Transfer Protocal

브라우저 위에서 동작하고 있는 웹사이트 및 웹어플리케이션과 같은 Client들이 어떻게 Server와 통신할 수 있는지를 정의한 것이 바로 HTTP 이다. Client가 Server에 데이터를 요청(request)하고, Server는 Client의 요청에 맞는 응답(response)을 보내주는 방식이다. Hypertext는 웹사이트의 하이퍼링크 뿐만 아니라, 전반적으로 쓰여지고 있는 리소스, 문서, 이미지 파일들을 모두 포함한다.

AJAX

• Asynchronous JavaScript And XML

HTTP를 이용해서 서버에서 데이터를 받아올 수 있는 방법으로 AJAX가 쓰인다.
AJAX는 웹페이지에서 데이터를 동적으로 주고 받을 수 있는 기술을 의미한다. 대표적인 예로, XHR(XML Http Request)이라는 오브젝트가 있다. 이것은 브라우저 API에서 제공하는 오브젝트 중에 하나로 간단하게 데이터를 받아올 수 있다. 최근 브라우저 API에 추가된 fetch() API도 이용하면 간편하게 데이터를 주고받을 수 있다. (인터넷익스플로어에서 지원하지 않으니 유의할것..!)

JSON

• JavaScript Object Notation

JSON은 1999년 ECMAScript 3번째 버전에 쓰여지는 오브젝트에서 큰 영감을 받아 만들어진 데이터 포맷이다. Js와 같이 Object{ key : value } 로 이루어져 있다. 브라우저 뿐만 아니라 모바일에서 서버와 데이터를 주고 받을 때, 또는 서버와 통신하지 않아도 오브젝트를 파일 시스템에 저장할때도 JSON 데이터 타입을 사용한다. (다양한 프로그래밍 언어나 플랫폼에 상관없이 쓸 수 있다.)

🙌 Point

1. Object -> JSON

• Object를 어떻게 serialize(시리즈화)해서 JSON으로(string) 변환할 것인가?

2. JSON -> Object

• JSON을 어떻게 deserialize해서 Object로 변환할 것인가?

---

1. Object -> JSON = JSON.stringify()

• boolean / array 타입을 JSON으로 변환

<script>
	let json = JSON.stringify(true);  // boolean 타입 
    console.log(json); //true 
    
    json = JSON.stringify(['apple','banana']);  // array 타입 
    console.log(json); 
</script>

• Object 타입을 JSON으로 변환

<script>

	// Object 
    const rabbit = {
        name: 'tori',
        color: 'white',
        size: null, 
        birthDate: new Date(),  // Date 오브젝트도 스트링으로 변환됨
        symbol: Symbol("id"),   // Js 내장 데이터는 제외
        jump: () => {           // 함수도 제외됨
            console.log(`${name} can jump!`);
        },
    };
    
    // Object -> JSON
    json = JSON.stringify(rabbit);
    console.log(json);
    	// {"name":"tori","color":"white","size":null,"birthDate":"2022-03-22T12:11:33.405Z"}
    	// symbol, jump는 제외됨 
    
    // 배열 형태로 원하는 것만 전달받기 
    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;   
        // key가 name이면 ellie로, 아니면 원래 값 출력 
    });
    console.loe(json);   // name만 ellie로 변경, 나머지는 동일
    
</script>

2. JSON -> Object = JSON.parse()

• JSON(string) 타입을 Object로 변환 (+ 에러..?)

<script>
	const obj = JSON.parse(json); 
    console.log(obj); 
    	//{name: 'tori', color: 'white', size: null, birthDate: '2022-03-22T12:22:39.416Z'}
        
    console.log( rabbit.birthDate.getDate() ); // 오늘날짜 출력 
    console.log( obj.birthDate.getDate() );    // birthDate가 아직 string이기 때문에 에러
</script>

• birthDate 는 원래 new Date() 라는 오브젝트 였는데 JSON으로 변환되며 string이 되었다. 하지만 다시 Object로 변환되는 과정에서, birthDate의 값은 여전히 string으로 남아있게 된다. 이것을 다시 오브젝트로 바꾸기 위해서는 콜백함수를 이용해야 한다.

<script>
    const obj = JSON.parse(json, (key, value) => {
        console.log(`key: ${key}, value: ${value}`);
        return key === 'birthDate' ? new Date(value) : value;
        // key가 만약 birthDate이면 새로운 오브젝트 new Date로 만들고, 아니면 원래 값 리턴 
    });

    console.log(obj.birthDate.getDate());
</script>

🌱 Dream Coding의 내용을 정리하였습니다. :)