브라우저 위에서 동작하고 있는 웹 사이트나 웹 어플리케이션과 같은 클라이언트들이 어떻게 서버 와 통신할 수 있는지를 정의 한 것이 HTTP이다.
http는 어떻게 Hyper Text들을 서로 주고 받을 수 있는지를 규약한 프로토콜의 하나이다.
http는 클라이언트가 서버에게 데이터를 리퀘스트 요청할 수가 있고
서버는 클라이언트가 요청한 것에 따라서 그에 맞는 리스펀스 응답을 클라이언트에게 보내주는 방식으로 진행이 된다.
여기서 하이퍼텍스트는 웹사이트에 이용되고 있는 하이퍼링크들만 이야기하고 있는게 아닌 전반적으로 쓰이는 리소스들, 문서나 이미지 파일들을 다 포함하는 것을 말한다.
이렇게http 를 이용해서 서버에게 데이터를 요청해서 받아올 수 있는 방법으로 AJAX를 썼다
AJAX를는 웹페이지에서 동적으로 서버에게 데이터를 주고받을 수 있는 기술이다.
대표적인 예로 XMRHttpRequest라는 오브젝트가 있다.
XMRHttpRequest라는 오브젝트는 브라우저의 api 에서 제공하는 오브젝트 중에 하나로 이 오브젝트를 이용해 서버에게 데이터를 요청하고 받아올 수 있다.
최근 브라우저에 추가된 fetch() api를 이용하여 데이터를 주고 받을 수 도 있다
AJAX를는 XMRHttpRequest에 반복해서 등장하는 xml은 html과 같은 마크업 언어 중에 하나로 html과 마찬가지로 데이터를 표현할 수 있는 한 가지 방법이다.
서버와 데이터를 주고 받을 땐 xml 뿐만 아니라 다양한 파일 포맷을 전달받을 수 있고 JSON도 많이 쓰인다.
데이터를 주고 받을 때는 엑셈 일 뿐만 아니라 다양한 타입의 데이터를 주고 받을 수 있다,
브라우저에서 서버와 통신을 할 때는 새로 추가된 fecth, api 를 사용할 수도 있고 아니면
XMRHttpRequest에라는 오브젝트를 이용해서 서버와 통신을 할 수도 있습니다
그러나 이 XMRHttpRequest을 사용하면 불필요한 태그들이 너무 많이 들어가서 파일을
사이즈도 커질 뿐만 아니라 가독성도 좋지 않기 때문에 이제 xml은 많이 사용되지 않고
xml 대신에 요즘에는 JSON을 많이 사용한다.
JSON은 자바스크립트 오브젝트 노테이션의 약자로 이크마스크립 세번째버전에 씌어지는 오브젝트에서 큰 영감을 받아서 만들어진 데이터 포맷이다.
자바스크립트에서 오브젝트가 키와 벨류로 이루어져 있듯이 JSON도 똑같이 키와 벨리 로 이루어져 있다
JSON은 브라우저 뿐만 아니라 모바일에서 서버와 데이터를 주고 받을 때 또 때 또는 서버와 통신을 하지 않아도 오브젝트를 파일 시스템에 저장할 때도 JSON 데이터 타입을 많이 이용하고 있다.
- 데이터를 주고 받을 때 쓸 수 있는 가장 간단한 파일 포맷으로
- 텍스트를 기반으로 하며
- 읽기도 편한
- 키와 밸리 로 이루어져 있는 파일 포맷이며
- 데이터를 보통은 서버와 주고받을 시 직렬화하고 데이터를 전송할 때 쓰며
- **중요한 포인트는 프로그래밍 랭기지나 플랫폼에 상관없이 쓸 수 있다는 점이다
우리의 웹 어플리케이션의 토끼라는 오브젝트가 있다면 이 토끼 오브젝트의 서버에 전송할 때토끼라는 오브젝트를 키와 밸류의 스트링 타입으로 변환해서 서버에 전송하게 된다.
서버에서 다시 토끼를 받아 올 때도 키와 밸류 스트링 타입으로 토끼를 전송받아 와서 다시 토끼라는 오브젝트로 변환해서 브라우저의 표기하게 된다.
JSON의 핵심
-첫 번째는 오브젝트를 어떻게 직렬화하여 JSON으로 변환할지
-다른 하나는 바로 직렬화 된 제이슨을 어떻게 역직렬화(Deserialization)하여 object로 다시 변환할건지
json은 크게 parse와 stringfy이 있고 stringfy같은 경우 동일한 함수가 2개가 있는데
이런 경우를 overloading라고 하여 함수의 이름은 동일하지만 어떤 파라미터를 전달하느냐에 따라서 몇개의 파라미터를 전달하느냐에 따라서 다른 방식으로 호출이 가능하다.
- Object to JSON
stringfy(obj)
어떤 타입의 오브젝트를 받아와서 바로 스트링으로 이렇게 변환해 주고 콜백 함수를 전달하면 우리가 조금 더 통제하면서 스트링으로 만들수도 있다.
-토끼라는 오브젝트를 JSON으로 변환시에 함수는 오브젝트 위에 있는 데이터가 아니기 때문에 함수는 제외되고 그리고 자바스크립트에서 자체로 들어있는 이런 심볼 같은 자바스크립트에만 있는 특별한 데이터도 JSON에 포함되지 않는다.
-JSON으로 변환되는 것을 조금 통제하고 싶다면 두번 째 인자로 원하는 ['프로퍼티']를 넣어주면된다. 여기선 토끼 오브젝트에서 name만 JSON으로 변환하고 싶기에 배열에 프로퍼티 이름만 전달하게 되면 이름만 포함이 되어서 나온다.
-혹은 콜백 함수를 이용해서 조금 더 세밀하게 통제를 할 수가 있는데 만약 키와 밸류를 전달하고 return value;값을 주면 모든 키와 밸류가 전달되며 독특한 건 제일 처음으로 전달되는 것은 토끼의 오브젝트를싸고 있는 제일 최상위 것이 전달이 되고 그 뒤부터 키와 벨류가 전달된다.
만약 리턴값을 return key === '프로퍼티' ? '참일때value' : value;로한다면 변경할 수 도 있다.
- JSON to Object
// parse(json)
json에 스트링데이터를 넣으면 어떤 타입의 오브젝트로 변환이 되고 전달 해도되고 안 해도 되는 옵셔널 타입의 reviver은 콜백함수로 결과값을 변형 하는 함수이다.
스트링을 오브젝트로 변환할 때 오브젝트가 만들어지는 과정을 더 세밀하게 조정하고 싶을 땐
reviver 함수를 이용한다.
json을 JSON.stringfy(obj) 이라는API 를 이용해서 스트링으로 변환한고
반대로 JSON에 있는 parse() api 를 이용해서 우리가 변환하고자하는 json을 전달해주기만 하면 된다.
한가지 포인트는 기존의 오브젝트에 있는 점프라는 함수가 있었지만 변환된 오브제트는, 직렬화가 된, 즉 스트링으로 만들어진 오브젝트에는 함수가 포함되지 않았다. 마찬가지로 json으로부터 오브젝트를 만들게 되면 점프라는 api가 없다는 것이다.
한가지 더 중요한 포인트는 토끼에 있는
우리가 rabbit라는 오브젝트를 제이슨으로 만들었을 때는가 birthDate 역시 스트링 형태로 만들어 졌기 때문에 이 제이슨을 다시 오브젝트로 가져올 때도 스트링으로 할당이 되어진다.
실제 rabbit안에 있는 birthDate는 new Date라는 오브젝트 자체이기에 그래서 이러한 것들을 조금 더 세밀한 데이터로 변환하고 싶을 때 콜백함수를 이용하여 key와 value값을 전달해주고 이를 return으로 받아와 key에 담겨있는 birthDate를 new Date(value)안에 할당해주면 정상적으로 작동한다.
유용한 사이트:
JSON Diff checker: http://www.jsondiff.com/
JSON Beautifier/editor: https://jsonbeautifier.org/
JSON Parser: https://jsonparser.org/
JSON Validator: https://tools.learningcontainer.com/j...
