HTTP란?

• Hypertext Trnasfer Protocal의 약자이다.
• 브라우저 위에서 동작하고 있는 웹사이트, 웹 어플리케이션 같은 Client들이 Server와 데이터를 주고받기 위한 프로토콜 중 하나이다.

프로토콜(Protocal)이란?

• 컴퓨터나 통신 장비 사이에서 메시지를 주고 받기 위해 설계된 일련의 규칙 체계이다.

HTTP의 동작

클라이언트에서 서버에 원하는 바를 request(요청)을 하게되면,
서버는 요청사항에 맞는 결과를 response(응답)하는 형태로 동작하게 된다.

HTTP를 이용해서 서버에게 데이터를 요청해서 받아올 수 있는 방법으로는

1. AJAX ( Asynchronous Javascript And XML)
   웹페이지에서 동적으로 서버에게 데이터를 주고 받을 수 있는 기술을 의미한다.
   대표적인 예로는 XHR (XMLHttpRequest)라는 오브젝트.

2. Axios or fetch API

이 부분에 대해서는 아직 나의 내공이 부족하므로 나중에 꼭 공부해서 포스팅 하도록 하자.

XML과 JSON.

1. XML

• XML(EXtensible Markup Language)은 HTML과 같은 markup language 중 하나이다.
• XML은 HTML처럼 데이터를 보여주는 목적이 아닌, 데이터를 저장하고 전달할 목적으로 만들어졌다.

2. JSON

• JSON(JavaScript Object Notation)
• JSON은 XML의 대안으로서 좀 더 쉽게 데이터를 교환하고 저장하기 위하여 고안되었다.

JSON의 특징

• simplest data interchange format
  데이터를 주고 받을때 가장 간단한 파일 포맷
• lightweight text-based structure
  텍스트를 기반으로해서 가볍다
• easy to read
  가독성도 좋고
• key - value pairs
  키와 벨류로 이루어져있는 파일 포맷이다.
• used for serialization and transmission of data between th network th network connection
  서버와 데이터를 주고 받을때 serialization을 위해 쓰인다.
• independent programming language and platform
  프로그래밍 언어나 플랫폼에 상관없이 쓰일 수 있다.

JSON과 XML의 차이점.

• JSON의 구문이 XML의 구문보다 더 짧다.
  XML을 사용하면 불필요한 태그들이 많이 포함된다.때문에 파일의 사이즈도 커짐.
  XML이 JSON 보다 가독성이 떨어진다.
• JSON 데이터가 XML 데이터보다 더 빨리 읽고 쓸 수 있다.
• XML은 배열을 사용할 수 없지만, JSON은 배열을 사용할 수 있다.

이러한 이유들로 최근에는 JSON을 많이 사용하고 있다.

JSON Method

JSON.stringify (value, replacer)

• JSON.stringify 메소드는 객체를 JSON 형식의 문자열로 변환한다.
• JSON.stringify 호출 시 무시되는 property.

1. Function property
2. Symbol property
3. value가 undefined인 property

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

let json = JSON.stringify(rabbit);

console.log(json)
// {"name":"tori","color":"white","size":null,"birthDate":"2021-08-09T06:32:24.336Z"}

• replacer에 배열 및 콜백함수를 넣어 원하는 property만 인코딩 할 수 있다.

let json1 = JSON.stringify(rabbit, ['name', 'color', 'size']);

console.log(json1)
//"{\"name\":\"tori\",\"color\":\"white\",\"size\":null}"

let json2 = JSON.stringify(rabbit, (key, value) => {
  return key === 'name' ? 'DK' : value;
});

console.log(json2)
//"{\"name\":\"ellie\",\"color\":\"white\",\"size\":null,\"birthDate\":\"2021-08-09T06:32:24.336Z\"}"

JSON.parse ( string, revive )

• JSON.parse 메소드는 JSON 데이터를 가진 문자열을 객체로 변환한다.

let json = JSON.stringify(rabbit);
let obj1 = JSON.parse(json)

console.log(obj1)
/*{ name: "tori",
    color: "white",
    size: null,
    birthDate: "2021-08-09T06:32:24.336Z"
    }*/

• 이때 birthDate property의 경우, Date객체에서 얻어온 값이 아니다.
  JSON형식의 문자열을 그대로 파싱해온 string이다.

• 때문에 rabbit.birthDate.getDate()는 가능하나, obj1.birthDate.getDate()는 Error가 발생.

• 이럴때 revive에 함수를 넣어 Date객체를 반환하도록 할 수 있다.

const obj2 = JSON.parse(json, (key, value) => {
  return key === 'birthDate' ? new Date(value) : value;
});

console.log(obj2)
/*{ name: "tori",
    color: "white",
    size: null,
    birthDate: Mon Aug 09 2021 15:32:24 GMT+0900 (한국 표준시)
    }*/

요약정리

• JSON은 일반 객체, 배열, 문자열, 숫자, 불린값, null을 지원합니다.
• JSON.stringify를 사용하면 원하는 값을 JSON으로 serialize 할 수 있다.
• JSON.parse를 사용하면 JSON을 본래 값으로 deserialize 할 수 있습니다.
• 위 두 메서드에 함수를 인수로 넘겨주면 원하는 값만 읽거나 쓰는 게 가능하다

마무리

나는 JSON을 서버에 데이터를 보내기 위해 써본적은 없다.
다만 todo list 만들기를 할 때 todo를 localstorage에 Array형태의 string으로 저장하고,
저장한 데이터를 JS에서 사용할 수 있는 Array로 파싱하기 위해 사용하였다.

JSON의 개념을 아예 모르고 사용했기에, JSON에 대해 알아보고자 공부해보았다.

JSON에 대해 알았으니 AJAX, fetch, Axios들도 공부해 봐야 할텐데...
아마 날씨나 지역 같은것을 얻어올 때 사용해 볼 수 있을거 같다.

아직은 내 실력이 부족하므로 사용하게 될 때 공부해서 포스팅 하도록 하겠다.