JSON

프로젝트 하나를 하는데 이런 기초적인 부분을 알지 못했다니,,, 이걸 모르니까 풀리는 부분들이 없었다. 

백하면 바로 생각나는게 JSON인데, JSON이라는 명칭만 알지 아는 게 하나도 없었다.

 

그래서 대체 JSON이 무엇인가??

JSON는 JS 객체 문법을 따르는 문자 기반 데이터 포맷이다. 즉 한 마디로 JS 문법을 따르는 데이터 베이스라는 뜻이다.(아마도...) JSON은 문자열 형태로 존재한다. 그리고 개별 JSON객체를 .json 확장자를 가진 단순 텍스트 파일에 저장할 수 있다.

 

이정도면 약간이라도 JSON이 무엇인지 이해했으리라 믿는다. 

하지만 이정도로는 완전히 이해를 잘 하지 못했기에 이번에는 JSON구조로 가보겠다.

 

JSON 구조는 대체 어떻게 생긴 것인가?

위에 말했듯이 JSON는 JS 객체 리터럴 문법을 따르는 문자열이다. JS의 기본 데이터 타입인 문자열, 숫자, 배열, 불리언 그리고 다른 객체를 포함할 수 있다. 아래와 같이

{
  "squadName": "Super hero squad",
  "homeTown": "Metro City",
  "formed": 2016,
  "secretBase": "Super tower",
  "active": true,
  "members": [
    {
      "name": "Molecule Man",
      "age": 29,
      "secretIdentity": "Dan Jukes",
      "powers": ["Radiation resistance", "Turning tiny", "Radiation blast"]
    },
    {
      "name": "Madame Uppercut",
      "age": 39,
      "secretIdentity": "Jane Wilson",
      "powers": [
        "Million tonne punch",
        "Damage resistance",
        "Superhuman reflexes"
      ]
    },
    {
      "name": "Eternal Flame",
      "age": 1000000,
      "secretIdentity": "Unknown",
      "powers": [
        "Immortality",
        "Heat Immunity",
        "Inferno",
        "Teleportation",
        "Interdimensional travel"
      ]
    }
  ]
}

자 그러면 이것을 대체 어떻게 호출하고 어떻게 사용하는가? 에 대해서 알아보겠다.

이 객체를 JS프로그램에서 로드하고 superHeroes라는 이름의 변수에 파싱하면 점/브라켓 표현법을 통해 객체 내 데이터에 접근할 수 있다. 한마디로 변수.객체key값 이라는 것.

superHeroes.homeTown;
superHeroes["active"];

 

 하위 계층의 데이터에 접근하려면 아하 아래와 같이 적으면 된다.

superHeroes["members"][1]["powers"][2];

딱 보면 알 수 있듯이

1. 우선 변수 이름은 — superHeroes입니다.
2. members 프로퍼티에 접근하려면, ["members"]를 입력합니다.
3. members는 객체로 구성된 배열입니다. 두 번째 객체에 접근할 것이므로 [1]를 입력합니다.
4. 이 객체에서 powers 프로퍼티에 접근하려면 ["powers"]를 입력합니다.
5. powers 프로퍼티 안에는 위에서 선택한 hero의 superpower들이 있습니다. 세 번째 것을 선택해야 하므로 [2].

순서가 이렇게 된다.

 

이제 JSON이 무엇인지 이해했다. 하지만 보통 JSON을 사용하는 경우는 오픈 api인데, 대체? 어떻게? 가져오는 것인가?

 

JSON 가져오기

1. 일단 변수로 둘 JSON의 url을 가져와야한다.

var requestURL =
  "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json";

 

2. 요청을 만들기 위해 new키워드를 이용해 XMLHttpRequest 생성자로부터 새로운 request 인스턴스를 생성해야한다.

var request = new XMLHttpRequest();

 

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

request.open("GET", requestURL);

 

4. responseType을 JSON으로 설정, XHR로 하여금 서버가 JSON 데이터를 반환할 것이며, JavaScript 객체로서 변환될 것이라는 것을 알기 위해서이다. 그리고 send() 메서드를 이용해 요청을 보내는 것이다.

+) 이렇게 적혀있지만, 사실 무슨 말인지는 잘 모르겠고 음... responseType 을 JSON이라고 지정하면서 XHR로 JSON반환하고 send를 통해 데이터를 받아온다....?

request.responseType = "json";
request.send();

 

5. 서버의 응답을 기다리고, 그것의 처리까지 관련된 섹션이다. request를 로드하면서 함수를 실행시키고 수퍼히어로라는 변수에 요청에 대한 응답을 저장하는 것이다.

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

 

정말 자세한 건 밑에 링크를 확인하면 좋을 것 같다. 나는 단지 api를 불러오기 위해서 공식 문서를 본 것이라, 그리 정확하지가 않다.

 

[참고링크]

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/JSON