[TIL] HTTP와 JSON

테크야끼·2021년 5월 10일
0

TIL

목록 보기
8/11
post-thumbnail

드림코딩 자바스크립트 프론트엔드 개발자 입문편 (JavaScript ES5+)을 공부하며 정리한 학습노트 입니다.

HTTP란?

HTTP(Hypertext Transfer Protocol)는 HTML과 같은 하이퍼미디어 문서를 전송하기위한 애플리케이션 레이어 프로토콜이다. 쉽게말해 브라우저 위에서 동작하는 브라우저나 웹어플리케이션같은 클라이언트들은 서버와 통신할 때 방법을 정의한 것이 HTTP이다.

HTTP는 기본적으로 두가지 과정으로 이루어진다.
클라이언트가 서버에게 데이터를 요청(request)하고
서버는 클라이언트에 따라 그에맞는 응답(response)한다.

이처럼 동적으로 서버와 데이터를 주고받는 기술을 AJAX (Asynchronous JavaScript + XML라고 하는데 이 때 fetch() API 혹은 XMLHttpRequest 라는 객체를 사용할 수 있다. 그러나 XML을 사용하면 불필요한 태그들이 많이 들어가 파일 사이즈가 커지고 가독성이 낮아지는 문제가 있기 때문에 JSON이라는 데이터포맷을 사용하는 경우가 많다.

XLM이란?

Extensible Markup Language
HTML과 같은 마크업언어로 태그들을 이용해 데이터를 나타낸다.
엄격하게 직렬화 된 DOM(돔 오브젝트 모델)로서 JSON도 그 중 하나이다.

JSON이란?

JSON(JavaScript Object Notation)은 Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷이다.

JSON의 특징

  1. 데이터를 주고 받는 가장 간단한 방법이다.
  2. 텍스트를 기반으로해 데이터가 가볍다.
  3. 가독성이 높다.
  4. key, value로 이루어져 있다.
  5. 데이터를 직렬화(serialize)한다.
  6. 프로그래밍 언어나 플랫폼과 상관없이 사용할 수 있다.

1. Object to JSON / stringify(obj)

JSON.stringify()
JavaScript 값이나 객체를 JSON 문자열로 변환한다. 선택적으로, replacer를 함수로 전달할 경우 변환 전 값을 변형할 수 있고, 배열로 전달할 경우 지정한 속성만 결과에 포함한다.

stringify()에는 매개변수만 다른 동일한 이름의 함수가 두 개 존재하는데 이러한 함수를 오버로딩(Overloading)이라고 한다. 오버로딩 함수는 이름은 동일하지만 매개변수에 따라 다른방식으로 호출된다.

let json = JSON.stringify(['apple', 'banana']);
console.log(json); //["apple","banana"] 더블쿼트가 JSON의 규격사항

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

json = JSON.stringify(rabbit);
console.log(json); //{"name":"tori","color":"white","size":null,"birthDAte":"2021-05-10T12:07:26.959Z"}

위 코드에서 알 수 있듯이 JSON.stringify를 이용해 전달받은 객체는
jump라는 함수가 포함되지 않는다. 함수는 객체의 데이터가 아니기 때문이다. 또한 Symbol같은 JavaSript 자체에 들어있는 데이터도 포함되지않는다.

⚫️ 객체에서 특정 key와 value만 받아와 JSON으로 만들고싶다면?

아래처럼 배열의 property를 이용해 key를 받아올 수 있다.

json = JSON.stringify(rabbit, ['name', 'color']);
console.log(json); //{"name":"tori","color":"white"}

⚫️ 데이터를 더 세밀하게 전달받고 싶을 때?

callback 함수를 이용해 제어할 수 있다.

json = JSON.stringify(rabbit, (key, value) => {
  console.log(`key: ${key}, value: ${value}`);
  return value;
});
console.log(json);

아래와 같이 출력된다.

제일 처음에 전달받는 것은 토끼 obj를 싸고있는 최상위 객체이다.

아래 코드는 key에 name이 들어오게 되면 hiko 라는 값으로 성정하고 key가 name이 아닌 경우 원래 값으로 설정한다.

json = JSON.stringify(rabbit, (key, value) => {
  return key === 'name' ? 'hiko' : value;
});
// {"name":"hiko","color":"white","size":null,"birthDAte":"2021-05-10T12:19:29.606Z"}

2. JSON to Object/ parse(JSON)

JSON.parse()
JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성한다. 선택적으로, reviver 함수를 인수로 전달할 경우, 결과를 반환하기 전에 변형할 수 있다.

json = JSON.stringify(rabbit);

//변환하고 싶은 JSON을 인자로 전달한다.
const obj = JSON.parse(json);
console.log(obj); //{name: "tori", color: "white", size: null, birthDAte: "2021-05-10T12:22:18.592Z"}

그러나 직렬화된 (JSON으로 다시 변환된) 객체에는 함수를 전달 받지못한다.
object 자체 였던 birthDate 역시 string으로 변환되었기 때문에 출력되지 않는다.

rabbit.jump();
obj.jump(); //json.js:69 Uncaught TypeError: obj.jump is not a function
console.log(obj.birthDate.getDate()); //Uncaught TypeError: obj.birthDate.getDate is not a function

⚫️ 직렬화된 데이터를 콜백함수를 이용해 생성하기

const obj = JSON.parse(json, (key, value) => {
console.log(`key: ${key}, value: ${value}`);
return key === 'birthDate' ? new Date(value) : value;
});

console.log(obj.birthDate.getDate()); //10

👩‍💻 후기

스크립트를 다루다보면 데이터를 뿌려주기 위해 필연적으로 만나게되는 JSON과 두리뭉술하게 잡혀있던 HTTP의 개념을 이번 기회에 정리해봤다. 웹개발을 하기 위해서 기본적으로 숙제해야되는 개념이기 때문에 앞으로 공부하면서 데이터 통신의 원리를 구조적으로 공부하고싶다!

0개의 댓글