01.16.월(JSON)

JavaScript Object Notation (JSON)

---

1) 개념
-Js 객체 문법으로
구조화된 데이터를 표현하기 위한
문자 기반의 표준 포맷

---

2) 사용
-웹에서 데이터를 전송할 때 일반적으로 상요
-서버에서 클라이언트로 데이터를 전송하여 표현하려거나 반대의 경우

---

3) 추가 설명
-데이터 포맷
즉, 배열이나 오브젝트 외에도
단일 문자열이나 숫자 또한 유효한 JSON 오브젝트가 됨
-오직 프로퍼티만 담을 수 있음, 메서드는 담을 수 없음
-큰 따음표만 사용 가능
-콤마나 콜론을 잘못 배치하는 사소한 실수로
json 형식이 잘못되어서 작동되지 않을 수 있음,
JSONLint를 통해 유효성 검사 가능
-JS에서는
오브젝트 프로퍼티가 따옴표로 묶이지 않을 수도 있는 것과 달리,
JSON에서는
따옴표로 묶인 문자열만이 프로퍼티로 사용될 수 있음

---

4) JSON 가져오기
JSON을 가져오기 위해서는,
XMLHttpRequest (때론 XHR)로 불리는 API를 사용

JS 오브젝트로 JS (e.g. images, text, JSON, even HTML snippets)를 통해
우리가 서버로부터 다양한 리소스를 가져오는 요청을 만듦
즉, 전체 페이지를 불러오지 않고 필요한 부분만 업데이트 할 수 있음

---

5) JSON 사용 코드

1. 일단, 변수로 JSON의 URL을 가져와야 합니다.

var requestURL = 'https:// ~~'

2. 요청을 만들기 위해,
   우리는 new 키워드를 이용하여 XMLHttpRequest 생성자로부터
   새로운 request 인스턴스를 생성해야 합니다.

var request = new XMLHttpRequest()

3. open() 메소드를 사용해 새로운 요청을 만듦

request.open('GET', requestURL)

4. responseType 을 JSON으로 설정.
   XHR로 하여금 서버가 JSON 데이터를 반환할 것이며,
   자바스크립트 객체로서 변환될 것이라는 걸 알게 하기 위해서죠.
   이제 send() 메서드를 이용해 요청을 보냅시다.

request.responseType = 'json'
request.send()

5. 서버의 응답을 기다리고, 처리까지 연관된 섹션

request.onload = function() {
  var superHeroes = request.response;
  populateHeader(superHeroes);
  showHeroes(superHeroes);
}

//response 프로퍼티로 가능

---

0. 참고사항
https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/JSON