[JavaScript] 서버 통신의 시작 JSON

muz·2022년 1월 10일
2
post-thumbnail

브라우저와 서버와의 통신

HTTP(Hypertext transfer protocol)

HTTP는 Client와 Server가 통신하는 방법에 대해 정의한, 어떻게 Hypertext를 서로 주고받을 수 있는지를 규약한 프로토콜이다.

Client가 Server에게 데이터를 요청할 수 있고, Server는 Client가 요청한 것에 따라서 그에 맞는 응답을 보내준다.

🙄 Hypertext?
: Hypertext란 웹 사이트에서 이용되는 하이퍼링크, 리소스들, 문서, 이미지 등을 의미한다.

AJAX(Asynchronous Javascript and XML)

웹페이지에서 동적으로 Server에게 데이터를 요청해서 받아올 수 있는 방법이다.

XHR(XMLHttpRequest)

이 Object는 브라우저 API에서 제공하는 Object 중 하나로, 이를 이용하면 서버에게 간단한 방법으로 데이터를 요청하고 받을 수 있다.
특히 fetch() API를 이용하면 간편하게 데이터를 주고받을 수 있지만, 이는 Internet Explorer에서는 지원되지 않기 때문에 잘 알아보고 사용해야 한다.

XML

HTML과 같은 마크업 언어 중 하나로, 데이터를 표현할 수 있는 또다른 방법이다.
그러나 XML을 이용하면 불필요한 태그들이 너무 많이 들어가서 파일의 용량도 커지고, 가독성도 좋지 않아 많이 사용하지 않는 추세이다.

서버와 데이터 교환 시 이용하는 또다른 방법, JSON 📄

JSON(JavaScript Object Noation)

JSON은 JavaScript 객체 리터럴이나 배열 리터럴의 문법과 매우 유사하다.

브라우저 뿐만아니라 모바일에서 서버와 데이터를 주고받을 때, 서버와 통신하지 않아도 Object를 파일 시스템에 저장할 때에도 사용한다.

  1. 데이터를 주고받을 때 쓸 수 있는 가장 간단한 파일 포맷
  2. 텍스트를 기반으로 제작되어 용량이 작고, 읽기 편한 파일 포맷
  3. Key와 Value의 쌍으로 이루어져 있음
  4. 데이터를 서버와 주고받을 때 직렬화하기 위해, 전송할 때 씀
  5. 프로그램 언어나 플랫폼에 상관없이 쓸 수 있음

📚 객체 직렬화(serialize)?
: 객체 직렬화란 객체의 상태문자열로 변환하는 과정을 의미한다.
아래에서 자세히 알아보자.

객체 직렬화하기 🙄⁉

객체의 상태를 문자열로 변환하는 과정을 객체 직렬화라고 한다. 이때 생성된 문자열은 나중에 객체 복원에 사용할 수 있다. ES5는 JSON Object를 이용하여 JavaScript 객체를 직렬하고, 객체를 복원하는 메서드를 지원한다.

JSON에서 지원하는 2가지 메서드

  • 객체를 직렬화하는 메서드 JSON.stringify()
    • 객체가 가진 열거 가능한 고유 프로퍼티만 직렬화 한다.
    • 만약 어떤 프로퍼티 값을 직렬화할 수 없다면, 해당 프로퍼티 값은 직렬화 결과에 포함되지 않는다.
  • 문자열을 객체로 복원하는 메서드 JSON.parse()

JSON.stringify()JSON.parse()는 두 번째 선택 인자를 갖는다. 이 인자를 사용해 직렬화 또는 복원할 프로퍼티 목록을 지정할 수 있다.

JSON 문법은 JavaScript 문법의 부분 집합 🔳

JSON 문법은 JavaScript 문법의 부분 집합이기에 JavaScript의 모든 값을 표현할 수는 없다.

  • 직렬화와 복원이 가능한 값들

    • 객체
    • 배열
    • 문자열
    • 유한한 수
    • boolean (true, false)
    • null
  • 직렬화는 되는데 복원이 안되는 값들?

    • NaN(Not a Number), Infinity, -Infinity는 null로 직렬화 된다.
    • Date 객체는 문자열로 직렬화 된다.
  • 직렬화와 복원이 아예 안되는 값들

    • Function
    • RegExp
    • Error
    • undefined

😱 이상한 Date객체
: Date.toJSON()으로 Date 객체를 문자열로 직렬화할 수 있지만, JSON.parse()함수는 문자열을 Date 객체로 복원할 수 없다.

JSON object 이용해보기

1. object를 JSON으로 변환하기 - JSON.stringfy(obj)

// 1. 불리언타입
let jsonBool = JSON.stringify(true);
console.log(jsonBool); // true

// 2. 배열타입
jsonArr = JSON.stringify(['apple', 'banana']);
console.log(jsonArr); // ["apple", "banana"]

// 3.객체 타입
// 단, 함수나 JavaScript만의 Symbol은 JSON으로 변환되지 않는다. 
const cat = {
	name: 'kitty',
  	color: 'white',
  	size: null,
  	birthDate: new Date(),
  	symbol: Symbol("id"),
  	grooming: function() { 
    	console.log(`${this.name} is grooming!`);
    },  
}

jsonObj = JSON.stringify(cat);
console.log(jsonObj); // {"name":"kitty","color":"white","size":null,"birthDate":"2022-01-10T13:53:24.756Z"}

jsonChoose = JSON.stringify(cat, (key, value) => {
  console.log(`key: ${key}, value: ${value}`);
  return key === 'name' ? 'cutiy' : value;  
});
/* key: , value: [object Object]
key: name, value: kitty
key: color, value: white
key: size, value: null
key: birthDate, value: 2022-01-10T13:53:24.756Z */

console.log(jsonChoose);

2. JSON을 Object로 바꾸기 - JSON.parse(json)

const cat = {
	name: 'kitty',
  	color: 'white',
  	size: null,
  	birthDate: new Date(),
  	symbol: Symbol("id"),
  	grooming: function() { 
    	console.log(`${this.name} is grooming!`);
    },  
}

json = JSON.stringify(cat);
console.log(json); // {"name":"kitty","color":"white","size":null,"birthDate":"2022-01-10T14:13:45.244Z"}

const obj = JSON.parse(json, (key, value) => {
 	console.log(`key: ${key}, value: ${value}`);
  	return key === 'birthDate' ? new Date(value) : value;
});
/* key: name, value: kitty
key: color, value: white
key: size, value: null
key: birthDate, value: 2022-01-10T14:15:55.973Z
key: , value: [object Object] */

console.log(obj); // {name: 'kitty', color: 'white', size: null, birthDate: Mon Jan 10 2022 23:15:55 GMT+0900 (한국 표준시)}

cat.grooming(); // kitty is grooming!

console.log(cat.birthDate.getDate()); // 10
console.log(obj.birthDate.getDate());
profile
Life is what i make up it 💨

0개의 댓글