JSON(JavaScript)

클라이언트가 서버와 통신할 수 있는 방법, 규격, 프로토콜 ; HTTP

 

Hypertext Transfer Protocal 

 

AJAX ; http를 이용해 서버에게 데이터를 요청해서 받아올 수 있는 방법

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

 

대표적으로 XHR 오브젝트가 있음

브라우저 api에서 제공하는 오브젝트중 하나, 서버에게 데이터를 요청하고 받아올 수 있음

 

최근 브라우저에 추가된 fetch() api 를 이용하면 간편하게 데이터 주고받기 가능

하지만 인터넷 익스플로러에서 지원되지 않음

 

xml 은 html과 같은 마크업 언어 , 테그드를 이용해 데이터를 나타냄

서버와 데이터 주고받을때 xml 뿐 아니라 다양한 파일 형식(포맷) 이 가능함

그 중 하나가 json (xhr이 xml형식의 데이터만 주고 받을 수 있는것 아님, 이름만 그런거)

 

xml은 불필요한 태그드가 많아서 파일 사이즈 커지고 가독성도 좋지 않아서 잘 사용안함

대신에 json많이 사용

javascript object notation ; json

 

자바스크립트에서 오브젝트가 키와 벨류로 이루어져 있는 것과 같이

json도 똑같은 형식을 가짐

 

json은 브라우저 뿐 아니라 모바일에서 서버와 데이터 주고받을 때나

서버와 통신을 하지않아도 오브젝트를 파일 시스템에 저장할때 이용

 

데이터를 주고 받을때 쓰는 가장 간단한

텍스트 기반

사람눈으로 읽기편함

키와 벨류로

데이터를 직렬화, 전송할때 쓴다 

프로그래밍 언어나 플랫폼에 상관없이 쓴다.

 

토키 오브젝트를 서버에 전송할때는 {key : value}로 스트링타입으로

받아올때도 스트링타입으로 전송받아서 토끼 오브젝트로 변환해서 브라우저에 표기

 

json study point 

1. 오브젝트를 어떻게 직렬화(serialized)해서 json으로 변환?  ; sringfy api

2. 직렬화된 json을 어떻게 다시 비 직렬화 시켜 오브젝트로 변환할지? parse api

parse ; 분석하다

 

json object에 있는 2가지 api

 

1. JSON.stringfy()

오브젝트를 json 으로 변환

true 가 출력

 

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

각각 다른 방식으로 호출 가능 함

 

옵션 콜백함수 reviver, replace 가 있음

콜백함수인데 결과값을 변경하는,

오브젝트, json가 만들어지는 과정을 세밀하게 조절

 

json 형식에서는 ' ' 이 아닌 " " 가 표기됨

json 화 했을 때 결과 특징

json화 했을때 함수는 들어가지 않음

new Date() , Date 오브젝트가 string으로 변환되어 만들어짐

jump 함수는 포함되지 않음, 함수는 오브젝트에 있는 데이터 아니니

자바스크랩트에만 있는 symbol 같은 특별한 데이터도 포함되지 않음 유념

 

json 변환 좀더 디테일하게 통제 하고 싶으면 

함수형태나 배열을 인자로 전달해서 가능함 

예를들어

name 만 json 으로 변환된 모습을 보고 싶을때

 

위와 같이 원하는 property만 골라서 json으로 변환 

 

또는 콜백함수를 사용해 세밀하게 통제하기

(콜백함수는 key, value를 인자로 전달받음)

key 와 value 에 따라 json 을 다양하게 조절 가능 

 

 독특한건 제일 처음으로 전달되는게 토끼를 둘러싸고 있는애

 

key 가 name이면 ellie로 변환하고 아니면 그냥 오리지날 쓰기

 

 

 

2.JSON.parse

 

point

1. rabbit에는 jump 함수가 있었지만

obj 에는 json 화 시킬때 없어졌기에 함수는 없어짐

 

2. rabbit 에는 birthDate 오브젝트가 있어서 getDate 를 쓸 수 있음

29 출력됨

 

그런데 obj로 date를 얻을때 오류가 발생하게 됨

birthDate가 string 이기 때문 !! json으로 만들때 문자열로 전환됨 

 

 

이렇게 json 으로 변환했다가 object 로 전환했을때 

스트링화 되기때문에 나타나는 문제를 해결하기위해

parse api 를 사용할 때 revival 콜백함수를 작성해 통제 가능

 

유용한 사이트

1. json diff ; 서버에 요청했을때 데이터 뭐가 다른지 비교할때 사용 문제 디버깅시

2. json beautifer ; 데이터 포맷 망가진 경우 보기좋게 변환

3. json parser ; json 타입을 오브젝트 형태로 보고 싶을때 

4. json vaildator ; json 이상할때 점검 등