HTTP

Hypertext Transfer Protocal

HTTPは,ブラウザ上で実行するウェブサイトやWebアプリケーションなどのクライアントがサーバとどのように通信するかを定義する.クライアントはサーバにデータを要求し、サーバはクライアントに応答を送信します.ハイパーテキストには、Webサイトのハイパーリンクだけでなく、書き込み中のすべてのリソース、ドキュメント、画像ファイルも含まれます.

AJAX

Asynchronous JavaScript And XML

AJAXは、HTTPを用いてサーバからデータを受信する方法として用いられる.
AJAXは,Webページ上で動的にデータを交換できる技術を意味する.XHR(XML Http Request)という対象の代表的な例があります.これはブラウザAPIが提供するオブジェクトの1つであり、簡単にデータを受信することができる.最近ブラウザAPIに追加されたfetch()APIを使っても簡単にデータ交換ができます.(ネットワークエクスポートはサポートされていません…!)

JSON

JavaScript Object Notation

JSONは1999年のECMAScript第3版で使用されたオブジェクトで、インスピレーションを受けて生まれたデータフォーマットです.Jsと同様、Object{ key : value }からなる.JSONデータ型を使用して、ブラウザではなくファイルシステムにオブジェクトを格納したり、移動中にサーバとデータを交換したり、サーバと通信しない場合にJSONデータ型を使用したりします.(複数のプログラミング言語またはプラットフォームを使用できます.)

🙌 Point

1. Object -> JSON

オブジェクトをシーケンス化してJSONに変換する方法

2. JSON -> Object

JSONはどのように逆シーケンス化されますか?

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>

対象タイプを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タイプ変換対象(+エラー…?)

<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に変換して文字列になりました.ただし、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の内容をまとめました:)