Web | HTTP

Http

Hyper Transfer Protocol

• Http 는 web-based application들이 상호 간에 data를 상호 교환할 수 있도록 해주는 application layer protocol 이다.
• TCP/IP based protocol 이다.
• Http 는 이미지, 비디오, 오디오, 문서와 같은 content를 전송하는데 사용된다.
• Http의 3가지 중요한 특징
  • connectionless
    request 를 만들고 난 후 client는 server와 연결을 끊고, response가 준비되면 server는 다시 client 와 연결을 만들고 다시 response를 전달한다.
  • Http는 컴퓨터들이 읽을 수 있는 것이라면 어떤 data라도 전송이 가능하다.
  • stateless
    client와 server는 connection이 유지되어있는 동안에만 서로에 대해 알고 있다. 만약 request와 response를 전달하기 위해 connection이 새로 생성되면 서로 새롭게 정보를 전달해야 한다.

Http Message

Http Message는 위와 같이 start line, header, body로 구성되어 있다.

request http message와 response http message는 start line과 body에 차이가 있다.

request http message

Method 는 server에게 무엇을 해야할지 알려주는 command이다. E.g GET/POST
URI는 resource의 locate를 알려주는 읽을 수 있는 문자열이다.

response http message

Status code는 client에게 request가 succeded 되었는지 failed 되었는지 알려주는 코드다. E.g 200: OK, 404: file not found

요약

• TCP/IP 기반의 application layer protocol이며, web-application들이 data를 상호교환할 수 있도록 한다.
• http 는 stateless, connectionless 특성을 가지고 있으며 어떤 data라도 전달이 가능하다.
• request response cycle은 web에서 http message들을 통해 작동한다.
• http message는 start line, header, body 3가지 section으로 구성되어 있다.

Ajax

Asynchronous Javascript and XML
웹페이지에서 동적으로 서버에게 데이터를 주고 받을 수 있는 기술

E.g
XHR(XMLHttpRequest) Object 브라우저 API에서 제공하는 Object 중의 하나로, 간단하게 서버에게 data를 요청하고 받아올 수 있습니다. (최근에는 동일한 기능의 fetch() API가 추가 되었습니다.)

XML은 HTML과 같은 Markup language 중 하나다.
서버와 data를 주고 받을 때는 XML을 비롯한 다양한 file format을 전달받을 수 있다. Ajax, XHR 등 이름에 XML이 들어간 이유는 이것들이 활발히 개발될 당시에 MS사의 Outlook을 만드는 개발팀이 활발히 참여해서 만들게 되었는데, 이때 outlook은 server와 client data를 전달할때 XML을 사용했다.
XML은 불필요한 태그들이 많아 file size가 커지고 가독성도 떨어져 많이 사용되지 않는다.

JSON

Javascript Object Notaion
ECMAScript 3rd 1999, 해당 버전에서 쓰여지는 Object에서 영감을 받아 만들어진 data format입니다. => object 와 마찬가지로 json도 {key: value} 형태의 data format을 가지고 있다.
브라우저 뿐만 아니라 모바일에서 server와 data를 주고 받을 때, 혹은 server와 통신을 하지 않아도 object를 file system에 저장할 때 사용된다.

platform이나 langauage에 상관없이 사용할 수 있는 data format이다.

How to use the JSON

object를 json file로 저장하기 위한 serialize
json file을 object로 변환하기 위한 deserialize

1. Object to JSON

stringfy(obj)

1. array를 json으로 변환
let json = JSON.stringify(true);
json = JSON.stringify(['apple', 'banna']);            //["apple","banana"]
//single quote가 아닌 json의 규격사항에 맞는 double quote로 바뀌었다. 

2. object를 json으로 변환
const rabbit = {
    name: 'tori',
    color: 'white',
    size: null,
    birthDate: new Date(),
    jump: () => {
        console.log(`${name} can jump!`);
    },
};
json = JSON.stringify(rabbit);
// 이 때 jump() function은 object에 있는 data가 아니기 때문에 json에 포함되지 않는다.
// javascript 에만 존재하는 symbol 같은 data type도 json에 포함되지 않는다.

json = JSON.stringify(rabbit, ["name"]);
// rabbit object에서 원하는 property만 골라서 json을 만들 수도 있다. 

json = JSON.stringify(rabbit, (key, value) => {
    console.log(`key: ${key}, value: ${value}`);
    return key === 'name' ? 'ellie' : value;
});
//  callback function을 사용하여 더 세밀하게 통제할 수 도 있다.

Overloading

JSON은 2가지 API가 존재한다.
parse()
stringify()
그 중 stringify를 살펴보면 동일한 함수가 2개가 있고 전달되는 매개변수에 차이가 있다.
함수의 이름은 동의하지만 어떤 parameter를 전달 하느냐, 몇개의 parameter를 전달하느냐에 따라 각각 다른 방식으로 호출이 가능한 것

2. JSON to Object

parse(json)

json = JSON.stringify(rabbit);
const obj = JSON.parse(json);

console.log(rabbit.birthDate.getDate());    //24(오늘 날짜)
console.log(obj.birthDate.getDate());        //error , obj.birthDate 는 string 이기 때문

stringify 를 사용해 json 파일로 변환하면서 rabbit의 birthDate 가 new Date() 함수가 아닌 string으로 전달되었기 때문에 발생한다.
이런 오류를 해결하기 위해 아래와 같은 코드를 추가할 수 있다.

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