HTTP

브라우져에서 동작하는 웹 어플리케이션/웹 사이트(client)는 서버(server)와 어떻게 통신할까!?

• HTTP(HyperText Transfer Protocol)
• 어떻게 하이퍼텍스트를 주고받을 수 있을까?에 대한 하나의 규약!
• 여기서 하이퍼텍스트란 링크,이미지,문서 모두 포함!
• client -> server에 request를 보냄
• server -> client에 request에 대한 response를 보냄!

AJAX

이렇게 HTTP를 이용해 서버에서 데이터를 요청(request)해 받아올 수 있는 방법중 하나!

• AJAX(asyncrounous Javascript And XML)
• 웹사이트에서 동적으로 정보를 주고 받을 수 있는 기술을 의미!
• XHR 대표적인 Object

XML

HTML과 마찬가지로 데이터를 표현할 수 있는 방식

JSON

XML이 서버와 클라이언트 간의 데이터 전송에 사용될 수 있는 유일한 방식은 아니다!

• 브라우저와 서버가 데이터를 주고받을 때에는
• XMLHttpRequest, fetch() api를 사용
• XML을 사용하면 불필요한 태그가 많이 사용되어 용량이 커지고, 가독성도 좋지 않다.
• json을 사용하쟈!!

장점

• 브라우저 뿐만 아니라, 모바일에서 서버와 데이터를 주고받을 때에서 사용 가능.
• 서버와의 통신뿐만 아니라, Object를 파일 시스템에 저장할 때도 사용 가능!
• text를 기반으로해 xml를 사용할 때 보다 가볍다.
• 가독성 good! key : value 방식
• 프로그래밍 언어나 플랫폼에 상관없이 사용 가능!

작동 방식

• client -> server (string 형식으로 전달)
• server -> client (string 형식으로 전달)
• string으로 받아온 데이터를 다시 Object로 변환하여 브라우저에 표기!

---

• object -> string 으로 변환하는 방식을 serialize 라고 한다!
• string -> object로 다시 변환하는 방식을 deserialize라고 함!

json 예제

//serialize

let json = JSON.stringify(true);
console.log(json);

json = JSON.stringify(["apple", "orange"]);

console.log(json);

const gyong = {
    name: "gyong",
    height: 180,
    birthday: new Date(),
    Symbol: Symbol(),
    speak: () => {
        console.log(`쏴리질러어~`);
    },
};

console.log(gyong);

json = JSON.stringify(gyong);
console.log(json);

• gyong이라는 객체를 출력해보면 Object가 string형태로 변환된 것을 확인할 수 있다.
• 여기서 유의할 점 = symbol과 같은 js만의 데이터타입이라던가, speak와 같은 함수는 출력되지 않는다는 점이다!
• 콜백함수를 사용하여 좀 더 세부적으로 데이터를 가공할 수도 있다!

json = JSON.stringify(gyong, (key, value) => {
    return key === "name" ? "tofu" : value;
});

console.log(json);

• 만약 key 값이 name이라면 tofu로 value값을 변경!

변환된 string값을 다시 object로 변환하고싶다면?!

let obj = JSON.parse(json);
console.log(obj);

간단하게 parse를 사용해주면 된다!!

하지만 stringify된 데이터를 다시 object로 변환할 때, 유의해야할 부분들이 있다!!

• 처음에 object를 선언할때 넣어줬던 speak()라는 함수가 호출되지 않는다.
  - 당연히 string으로 변환된 값을 그대로 object화 해주기 때문이지!
• 두 번째는, new Date()로 불러온 데이터 또한 string으로 변환되었다가 object화 된 것이기 때문에 birthday.getDate()와 같은 호출이 불가능하다!

let obj = JSON.parse(json);
console.log(gyong.birthday.getDate());
console.log(obj.birthday.getDate()); //error 발생!!

• 이를 해결해주기 위해서 reviver 콜백함수를 사용해주면 된다!

let obj = JSON.parse(json, (key, value) => {
    return key === "birthday" ? new Date() : value;
});
console.log(gyong.birthday.getDate());
console.log(obj.birthday.getDate()); // error 해결!