[JavaScript] { JSON } -서버 통신의 시작

HTTP (Hypertext Transfer Protocal): 브라우저위에서 동작하고있는 웹사이트나 웹어플리케이션 같은 Client들이 Server와 통신하는 방법을 정의한 것. 하이퍼텍스트를 어떻게 서로 주고 받을 수 있는지를 규약한 프로토콜 중 하나.

 

Client가 Server로 데이터를 Requst(요청)하면 서버는 그에 맞는 Response(응답)을 클라이언트로 보내주는 방식으로 진행됨.

 

Hypertext는 하이퍼링크, 전반적으로 쓰이는 리소스들(문서, 이미지파일 등등)을 전부 포함.

 

Http를 이용해서 서버에 데이터를 요청해 받아오는 방법으로 AJAX(Asynchronous JavaScript And XML)를 사용.

 

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

 

대표적인 예로 XHR(XML Http Request)라는 오브젝트. XHR은 브라우저 API에서 제공하는 오브젝트 중 하나로 이 오브젝트를 이용하면 간단하게 서버에 데이터를 요청하고 받아올 수 있다. 최근 브라우저API에 추가된 fetch() API를 이용하면 간편하게 데이터를 주고 받을 수 있다.(단, 신규기술이므로 인터넷익스플로러에서는 지원되지 않음)

 

XML은 Mark-up 언어 중 하나. 태그를 이용해서 데이터를 표현하는 방식.

<recipe>

    <title>Penau-butter</title>    

    <ingredientlist>

       <ingredient>Peanut</ingredient>

    </ingredientlist>

</recipe>

 

서버와 데이터를 주고 받을 때는 XML뿐만 아니라 다양한 타입의 데이터를 주고 받을 수 있다.

 

브라우저에서 서버와 통신을 할 때에는 fetch()라는 API를 사용하거나, XMLHttpRequest라는 오브젝트를 이용해 서버와 통신할 수 도있다. XML이 들어가면 태그가 많아 불필요하게 크고 가독성이 떨어져 요즘에는 XML대신 JSON을 사용한다.

 

JSON (JavaScript Object Notation): object가 { key : value }로 이루어져 있다.

- simplest data interchange format 

- lightweight text-based structure

- easy to read

- key-value pairs

- used for serialization(직렬화하다) and transmission(전송) of data vetween the network the network connection

- independent programming language and platform: C, C#, JAVA, Python, PHP, Kotlin, Go 모든 언어에서 사용가능(지원 or 외부 라이브러리 이용)

 

1. Object to JSON

stringify(obj)

let json = JSON.stringify(true);

// boolean타입도 json으로 변환 가능.

console.log(json)    -> true

 

json = JSON.stringify(['apple', 'banan']);

console.log(json)    ->["apple", "banana"] 쌍따옴표로 변환됨. 제이슨의 규격사항

 

const rabbit = {

    name: 'tori',

    color: 'white',

    size: null,

    birthDate: new Date(),

    jump: () => {

      consol.log(`${name} can jump!`);

    },

};

2. JSON to Object

parse(json)