JavaScript(ES6)|JSON 개념 정리와 활용방법

HTTP(Hypertext Transfer Protocal)- 클라이언트와 서버를 연결해주는 것.

AJAX- 웹페이지에서 동적으로 서버에게 데이터를 주고받을 수 있는 기술.

XHR- 브라우저 API에서 제공하는 오브젝트중에 하나. 이것을 이용하면 간단하게 서버에게 데이터를 요청하고 받아올 수 있다.

fetch()API- 최근 브라우저 API에 추가된 간편하게 데이터를 주고받을 수 있는 것. (ex에서 사용할 수 없음)

 

XML- 마크업 언어중에 하나. (요즘에는 많이 사용하지 않음)

 

JSON(JavaScript Object Notation)- 요즘에 많이 쓰는 브라우저 API.

-Object {key: value}로 이뤄져 있음.

-텍스트를 기반으로 한 가벼운 언어.

-프로그램 언어와 상관없이 대부분의 언어들이 지원가능.

 

JSON 공부 포인트.

-object를 어떻게 직렬화해서 JSON으로 변환할지.

-JSON을 어떻게 object로 다시 변환할건지.

 

 

오버로딩-함수의 이름은 동일하지만 어떤, 몇개의 파라미터를 전달하느냐에 따라

각각 다른 방식으로 호출이 가능한 것.

 

1. Object to Notation

 

stringfy(obj)

배열을 JSON으로 변환하면 " "로 바뀜.(이게 JSON의 규격사항)

 

 

rabbit의 오브젝트를 JSON으로 변환하면 스트링으로 변환되어서 만들어짐.

여기서 jump의 함수는 오브젝트의 있는 데이터가 아니기때문에 제외됨.

 

심볼처럼 자바스크립트에만 있는 특별한 데이터도 JSON에 포함되지 않는다.

 

원하는 값만 출력해서 JSON으로 받아볼 수 있음.

 

 

세밀하게 통제하고 싶을때는 콜백함수를 이용하면 된다.

 

 

 

2. JSON to Object

 

parse(json)

parse라는 api로 변환하고자하는 json을 전달해주면 된다.

 

 

rabbit에 있는 jump라는 함수를 출력하면 출력이 된다.

하지만 변환한 오브젝트는 안에는 함수가 포함되어 있지 않기때문에

jump함수를 출력하면 에러가 뜬다.

 

또 Date값을 출력할 수 있는데 rabbit에서는 출력이 되지만

obj에서는 에러가 뜬다.

이유는 obj는 스트링이기때문이다.

json을 만들때 스트링으로 만들었기때문에 이것을 오브젝트로 가져올때도

스트링으로 가져왔기때문!

rabbit안에 있는 date는 오브젝트 자체였기때문에 출력이 가능.

오브젝트 데이트를 변환하고 싶을때 콜백함수를 사용할 수 있다.

 

return 내용을 해석해보자면 value 대신에 키가 만약 birthDate면,

나는 birthDate를 새로운 오브젝트인 데이트를 만들것이고, 만약 키가 birthDate가 아니면

원래 있던 value 그대로를 사용한다.

 

 

 

유용한 사이트:

-첫번째, 두번째 데이터를 비교할 수 있는 사이트 (문제 디버깅에 유용)

JSON Diff checker: http://www.jsondiff.com/​

JSON Diff - The semantic JSON compare tool

-포맷을 정리해주는 사이트

JSON Beautifier/editor: https://jsonbeautifier.org/​

Json Beautifier - Json Formatter | Json Viewer | Json Editor

-제이슨 타입을 오브젝트로 확인할 수 있는 사이트

JSON Parser: https://jsonparser.org/

JSON Parser - Best JSON Formatter | JSON Editor

-제이슨의 문제를 확인할 수 있는 사이트

JSON Validator:tools.learningcontainer.com/json-validator/

Best free online JSON Validator