[드림코딩]자바스크립트 기초 정리 ⑧ JSON 개념정리와 활용방법

앞전에 JSON에 대한 포스팅을 작성했지만 한번 더 정리하는 마음으로 JSON 포스팅을 작성하게 됐다

 

HTTP란?

 

우선 HTTP가 무엇인지 이해하고 넘어가자

 

브라우저 위에서 동작하고 있는 웹사이트나 애플리케이션과 같은 클라이언트들이

어떻게 서버와 통신할 수 있는지 정의한 것이다

여기서 Hypertext는 링크뿐만 아닌 전반적인 문서와 이미지 등 모두 포함한다

 

AJAX란?

 

웹페이지에서 동적으로 서버에게 데이터를 주고받을 수 있는 기술을 의미하며 대표적인 오브젝트로는 XHR이 있다

 

XHR은 서버에게 데이터를 요청하고 쉽게 받아올 수 있으며 비교적 최근에 생긴 fetch API를 사용하면

쉽게 받아올 수 있지만 인터넷 익스플로러에선 지원을 해주지 않는다 (사용불가)

 

XML은 마크업 언어 중 하나인데 요즘은 XML 대신 JSON을 많이 사용한다

 

JSON이란?

 

데이터를 주고받을 때 사용하는 가장 간단한 데이터 포맷으로

자바스크립트의 오브젝트 {key : value}를 보고 영감을 받아서 JSON도 이와 마찬가지로 {key : value}로 이루어져 있다

 

브라우저뿐 아니라 모바일에서 서버를 주고받거나, 오브젝트를 파일 시스템에 저장할 때에도 사용하며

대부분의 프로그래밍 및 플랫폼에 상관없이 사용이 가능하다

 

브라우저에 통신 서버 할 땐 fetch 또는 XMLHttpRequest를 사용하면 되지만, 앞에서 말한 것처럼

fetch는 인터넷 익스플로러에서지원이 안된다는 걸 명심해두자

 

 

stringify 함수의 이름은 동일하지만 어떤, 몇 개의 parameter를 전달하느냐에 따라 각각 다른 방식으로 호출이 가능하다

(이를 오버 로딩 Overroding이라 한다)

parse는 string을 object로 변환하고, stringify는 object를 string으로 변환한다.

 

JSON에는 2개의 APIs가 존재한다

 

 

출력 값이 ""로 들어가 있는데 이것이 바로 JSON의 규격사항이다

이는 어느 정도 배열처럼 보인다

 

 

함수 jump는 오브젝트에 있는 데이터가 아니라 JSON에 포함되지 않는다

그리고 심벌 같은 자바스크립트에만 있는 특별한 데이터도 함수와 마찬가지로 JSON에 포함되지 않는다

 

 

rabbit에서 name, color처럼 원하는 프로퍼티만 따로 골라서 JSON으로 변환이 가능하다

 

 

이번엔 JSON을 오브젝트로 변환하는. parse

이 방법은 Json 형태로 만든 값을 json.parse()의 인자로 전달해주면 된다

 

 

rabbit의 birthDate는 new Date()의 Date 오브젝트였다

여기서 date안에 존재하는 오브젝트(getDate())를 사용할 수 있음. 그럼 오늘의 날짜가 나오지만,

바로 밑의 obj라는 JSON으로부터 만든 birthDate.getDate()에 오브젝트를 넣으면 에러가 난다

 

왜? JSON에서 가져와서 여기 안의 date는 String 타입이기 때문이다

그래서 이를 String 타입에서 Date 오브젝트로 변환시키고 싶을 때 콜백 함수를 사용하면 된다

 

 

JSON에서 return에 조건을 주어 key가 birthDate라면 new Date(value)를 호출해준다

그래서 JSON의 birthDate은 이제 String타입이 아닌 date 타입으로 변환이 되고

밑의 obj.birthDate.getDate()를 출력해도 에러 없이 날짜 29가 출력이 된다.

 

 

Ref

https://www.youtube.com/watch?v=FN_D4Ihs3LE&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=10