[JSON] 서버통신의 시작

우선 JSON에 대한 이야기를 하기 전에 HTTP부터 살펴보자

HTTP(Hypertext transfer protocol)

HTTP는 hyptertext transfer protocol의 약자로 웹에서 하이퍼텍스트 뿐만 아니라

리소스, 이미지 파일 등의 교환에 기초가 가 되는 통신 프로토콜(규약)이라고 할 수 있다. 

 

웹(www)은 인터넷 서비스 중 하나이다. (인터넷 서비스에는 웹이 가장 대표적이지만 FTP, E-Mail 등 여러 종류가 있다.)

HTTP는 이러한 인터넷, 혹은 그와 유사한 컴퓨터네트워크의 기초가 되는 TCP/IP 프로토콜에서

어플리케이션 계층에 해당하는 프로토콜이다. 

 

이 프로토콜이 중요한 이유는 통신을 담당하는 것이 하나가 아니라 계층화된 여러 레이어가 담당하기 때문이다.

 

사용자에게는 데이터를 브라우저에서 바로 서버로 전송하는 것처럼 보이지만 실제로는 결국 이더넷 카드(랜카드)가 물리적으로 인터넷에 데이터를 보내는 일을 하고 서버로부터 데이터를 받아오는 것도 서버로부터 직접 받아오는 게 아니라 인터넷을 통해 이더넷 카드가 물리적으로 받은 데이터를 여러 계층화된 레이터를 거쳐 브라우저에서 확인해볼 수 있는 것이다. 

 

이때 프로토콜은 시스템과 애플리케이션 프로그램에서 정보를 교환할 수 있도록 하는 메시지 형식 및 프로시저에 대한 규칙 세트로 수신 호스트가 메시지를 이해하려면 통신에 관련된 각 시스템이 이러한 규칙을 준수해야 한다. 

 

출처 https://www.joinc.co.kr/w/Site/Network_Programing/Documents/IntroTCPIP

좀 더 자세한 설명은 아래를 참고할 수 있다.

https://developer.mozilla.org/ko/docs/Web/HTTP/Overview

HTTP 개요

https://www.joinc.co.kr/w/Site/Network_Programing/Documents/IntroTCPIP

네트워크 프로그래밍 : TCP/IP 개론

https://www.ibm.com/support/knowledgecenter/ko/ssw_aix_71/network/tcpip_protocols.html

 

서버통신 방법

http 통신은 요청(request)와 응답(response)의 구조를 갖는다. 

 

데이터를 주고 받기 위해서는 공통으로 알고 있는 데이터 형식이 있어야 한다. 

대표적인 것이 XML과 JSON이라고 할 수 있다. 물론 이외에도 다양한 데이터 형식이 있다.

XML은 markup 언어로 HTML처럼 tag로 data를 표현한다. 

JSON은 json javascript object notation의 약자로 가장 간단한 파일 포맷이며 텍스트 기반이라 읽기 쉬워 XML을 대체하여 많이 쓰이고 있다. 데이터는 key-value 형식으로 구성되어 있으며 프로그래밍 언어, 플랫폼에 상관없이 쓰일 수 있는 것이 장점이다. 

 

이러한 데이터 형식을 주고 받는 방법으로 웹 api, XMLHttpRequest를 사용하는 AJAX 통신과 Fetch() api가 있다.

fetch api가 더 쉽고 간편하기 때문에 fetch api로 많이 대체되고 있지만 인터넷 익스플로어에서 아직 지원하지 않는 등의 한계가 있기 때문에 XMLHttpRequest는 여전히 많이 사용되고 있는 편이다. 

https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX

Ajax

 

JSON 공부 포인트

JSON을 공부하는  포인트는 Javascript의 Object를 string으로 변환하는 법(Serialization)과 String을 다시 javascript의 Object로 변환하는 것(Deserialization)이 포인트이다. 

 

1. Serialization

주의할 점은 json에는 js에서만 쓰이는 문법은 포함되지 않는다. 자바스크립트에서만 쓸 수 있는 Symbol이나 사용자가 정의한 함수 등은 stringify해도 json 파일에 포함되지 않는다.

stringify()는 stringify(object)로도 쓸 수 있고

stringify(object, callback) 함수를 사용하여 원하는 key만 json 파일에 추가할 수 있게 한다. 

let json1 = JSON.stringify(true);
console.log(json1); // true

let json2 = JSON.stringify(['apple', 'banana'])
console.log(json2); // ["apple", "banana"] 

//this , prototype
const rabbit = {
  name: 'tori',
  color: 'white',
  size: null,
  birthDate: new Date(),
  jump: function() {
    console.log(`${this.name} can jump`); 
  }, 
};
rabbit.jump()

let json3 = JSON.stringify(rabbit);
console.log("json3", json3);
//{"name":"tori","color":"white","size":null,"birthDate":"2020-11-22T17:37:41.700Z"} 
// json doesn't include functions
// json doesn't include symbols (js owns)

//원하는 json key만 선택
let json4 = JSON.stringify(rabbit, ['name', 'color']);
console.log("json4", json4) //{"name":"tori","color":"white"} 

//control json
let json5 = JSON.stringify(rabbit, (key, value) =>{
  console.log(`key: ${key}, value:${value}`);
  return key === 'name' ? 'ellie' : value;
});

console.log("json5", json5);
//{"name":"ellie","color":"white","size":null,"birthDate":"2020-11-22T17:40:50.719Z"} 

 

2. Deserialization

// 2. JSON to Object
// parse(json)
//console.clear()

let json6 = JSON.stringify(rabbit);
const obj = JSON.parse(json6);

// callback ->  func 
const obj1 = JSON.parse(json6, (key, value) =>{
  console.log(`key: ${key}, value: ${value}`);
  return key === 'birthDate' ? new Date(value) : value;
});

console.log("obj", obj);
console.log("obj1", obj1);

rabbit.jump()
//obj.jump() -- error

console.log(rabbit.birthDate.getDate());
console.log(obj1.birthDate)
console.log(obj1.birthDate.getDate())

앞에서 json 파일에는 javascript에서만 쓸 수 있는 사용자 정의 함수나 Symbol이 포함되지 않는다고 하였다.

따라서 JSON 파일을 다시 Object로 만든 것들도 해당 함수는 포함되어 있지 않다.