JSON 에 대한 정리글

JSON 에 대한 정리글

 

---

 

MDM JSON

 

JSON 은 Javascript 객체 문법을 따르는 문자 기반의 데이터 포맷이다.

JSON 이 Javascript 객체 문법과 매우 유사하지만 딱히 Javascript 가 아니더라도 JSON 을 읽고 쓸 수 있는 기능이 다수의 프로그래밍 환경에서 제공된다.

 

JSON 은 문자열 형태로 존재한다. 네트워크를 통해 전송할 때 아주 유용하다.

데이터에 접근하기 위해서는 네이티브 JSON 객체로 변환된 필요가 있다. 별로 큰 문제는 아닌 것이 Javascript 는 JSON 전역 객체를 통해 문자열과 JSON 객체의 상호변환을 지원한다.

 

문자열에서 네이티브 객체로 변환하는 것은 파싱(Parsing) 이라고 한다.

** 네이티브 객체란 ? Object, String, Number, Function, Array, RegExp, Date, Math, Boolean, Error(+기타 에러관련 obj), Symbol(ES6), JSON, Promise, Proxy, Map, Set... 등..

네트워크를 통해 전달할 수 있게 객체를 문자열로 변환하는 과정은 문자열화(Stringification) 이라고 한다.

 

JSON 구조

 

JSON 은 Javascript 객체 리터럴 문법을 따르는 문자열이다.

JSON 안에는 마찬가지로 Javascript 의 기본 데이터 타입인 문자열, 숫자, 배열, 불리언 그리고 다른 객체를 포함할 수 있다. 이런 방식으로 데이터 계층을 구축할 수 있다.

 

{
  "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"
      ]
    }
  ]
}

 

이 객체를 Javascript 프로그램에서 로드하고, 예를 들어 superHeroes 라는 이름의 변수에 파싱하면

JavaScript object basics 문서에서 보았던 것처럼 점/브라켓 표현법을 통해 객체 내 데이터에 접근할 수 있다.

 

superHeroes.homeTown;
superHeroes["active"];

 

하위 계층의 데이터에 접근하려면, 간단하게 프로퍼티 이름과 배열 인덱스의 체인을 통해 접근하면 된다.

예를 들어 superHeroes 의 두 번째 member의 세 번째 power 에 접근하려면 아래와 같이 하면 된다.

 

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

 

1. 변수 이름은 superHeroes 이다.

2. members 프로퍼티(속성)에 접근하려면, ["members"] 를 입력한다.

3. members 는 객체로 구성된 배열이다. 두 번째 객체에 접근할 것이므로 [1] 를 입력한다.

4. 이 객체에서 powers 프로퍼티에 접근하려면 ["powers"] 를 입력한다.

5. powers 프로퍼티 안에는 위에서 선택한 hero의 superpower들이 있다. 세 번째 것을 선택해야 하므로 [2] 를 입력한다.

 

JSON 에서의 배열

 

앞서 JSON 텍스트는 기본적으로 JavaScript 의 오브젝트와 비슷하게 생겼다고 언급하였다.

그 이유는 JavaScript 의 배열 또한 JSON 에서 유효하기 때문이다.

 

[
  {
    "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"
    ]
  }
]

 

위 예제는 올바른 형태의 JSON 이다.

배열의 요소(파싱된 버전)에 접근하기 위해서는 배열의 인덱스를 사용하면 된다. ( [0]["powers"][0] )

 

• JSON 은 순수히 데이터 포맷이다. 오직 프로퍼티만 담을 수 있다. 메서드는 담을 수 없다.
• JSON 은 문자열과 프로퍼티의 이름 작성 시 큰 따옴표만을 사용해야 한다. 작은 따옴표는 사용불가하다.
• 콤마다 콜론을 잘못 배치하는 사소한 실수로 인해 JSON 파일이 잘못되어 작동하지 않을 수 있다.
• JSON 은 JSON 내부에 포함할 수 있는 모든 형태의 데이터 타입을 취할 수 있다. 즉, 배열이나 오브젝트 외에도 단일 문자열이나 숫자 또한 유효한 JSON 오브젝트가 된다.
• JS 에서 오브젝트 프로퍼티가 따옴표로 묶이지 않을 수도 있다는 것과는 달리, JSON 에서는 따옴표로 묶인 문자열만이 프로퍼티로 사용될 수 있다.

 

---

 

https://www.freecodecamp.org/korean/news/javascript-json-parse/

JavaScript를 사용해 JSON 객체 구문분석(Parse)하기

 

JSON 과 JavaScript 의 차이

 

JSON 은 일반 JS 처럼 보이지만 JSON 을 텍스트 파일과 유사한 데이터 형식으로 이해하는 것이 좋다.

JSON 이 JS 와 매우 비슷해보이는 이유는 JSON 은 JS 문법에서 영감을 받아 만들어졌기 때문이다.

 

{
  "name": "Jane Doe",
  "favorite-game": "Stardew Valley", 
  "subscriber": false
}

 

위 예제는 JSON 객체의 문법이다.

JSON 객체와 일반 JS 객체의 주요 차이점은 따옴표이다.

JSON 객체의 모든 키(key) 와 문자열 유형 값은 큰 따옴표로 ("") 감싸야 한다.

 

반면 JS 객체 리터럴은 조금 더 유연하다.

객체 리터럴을 사용하면 키와 문자열을 큰따옴표로 묶을 필요가 없다.

키에 작은따옴표('') 를 사용하거나 따옴표 자체를 생략해도 된다.

 

const profile = {
  name: 'Jane Doe',
  'favorite-game': 'Stardew Valley',
  subscriber: false
}

 

위 코드를 JS 객체 리터럴 문법으로 변환해본다면 이전과 같다.

객체 리터럴 문법에서는 대시(-) 로 구분된 키는 따옴표로 감싸야 한다.

 

따옴표를 사용하지 않으려면 키를 카멜 표기법(camel case) 인 favoriteGames 또는 언더바 표기법(underscore case) 인 favorite_game 으로 수정하면 된다.

 

JSON 은 사실 문자열

 

JSON 또한 객체와 배열이 있다면 일반 JS 객체 리터럴이나 배열처럼 프로그램에서 사용할 수 없는지 의문이 들 수도 있다.

하지 못하는 이유는 JSON 은 사실 문자열에 불과하기 때문이다.

예를 들어 jane-profile.json 또는 profiles.json 과 같은 별도의 파일에 JSON 을 작성하면 해당 파일은 JS 처럼 보이지만, 사실 JSON 객체 또는 JSON 배열 형식의 문자열이 담긴다.

 

텍스트 파일과 마찬가지로 프로젝트에서 JSON 을 사용하려면 해당 파일을 구문분석하거나 프로그래밍 언어가 이해할 수 있는 형식으로 변경해야 한다.

예를 들어 python 에서 JSON 객체를 구문 분석하면 딕셔너리(dictionary) 가 생성된다.

 

브라우저에서 JSON 구문 분석하기

 

일반적으로 API 를 통해 데이터를 수신하거나 보낼 때 브라우저에서 JSON 으로 작업하는 경우가 많다.

 

fetch 를 사용해 JSON 구문분석 하기

 

API 에서 데이터를 가져오는 가장 쉬운 방법은 .json() 메서드를 통해 JSON 응답을 JS 객체 리터럴 또는 배열로 자동 구문분석하는 fetch 를 사용하는 것이다.

 

fetch('https://api.chucknorris.io/jokes/random?category=dev')
  .then(res => res.json()) // .json() 메서드는 JSON 응답을 JavaScript 객체 리터럴로 구문분석합니다.
  .then(data => console.log(data));

 

위 예제는 fetch 를 사용하는 코드이다.

 

브라우저에 해당 코드를 실행하면 콘솔에 다음과 같은 내용이 표시된다.

 

{
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "elgv2wkvt8ioag6xywykbq",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/elgv2wkvt8ioag6xywykbq",
    "value": "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."
}

 

해당 내용은 JSON 객체처럼 보이지만 실제로는 JS 객체 리터럴이기 때문에 프로그램에서 자유롭게 사용할 수 있다.

 

JSON.stringify() 로 JSON 문자열로 변환하기

 

 API 로 데이터를 보내고 싶다면, 먼저 보내고 싶은 데이터를 JS 객체 리터럴로 작성한다.

 

const newJoke = {
  categories: ['dev'],
  value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};

 

그런 다음 API 로 데이터를 보내기 위해서는 방금 생성한 농담 객체 리터럴을 JSON 문자열로 변환해야 한다.

 

JS 에는 이런 작업을 실행하기 위한 매우 유용한 메서드가 포함되어 있다.

바로 JSON.stringify() 이다.

 

const newJoke = {
  categories: ['dev'],
  value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};

console.log(JSON.stringify(newJoke)); // {"categories":["dev"],"value":"Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."}

console.log(typeof JSON.stringify(newJoke)); // string

 

위 예제처럼 객체 리터럴을 JSON 문자열로 변환하는 것처럼 JSON.stirngify() 는 배열에서도 똑같이 작동한다.

 

마지막으로 JSON 문자열로 변환된 농담 데이터를 POST 요청과 함께 API 로 다시 보내면 된다.

 

Chuck Norris Jokes API 에는 실제로 이 기능이 없지만, 있다고 가정하면 코드는 다음과 같다.

 

const newJoke = {
  categories: ['dev'],
  value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};

fetch('https://api.chucknorris.io/jokes/submit', { // fake API endpoint
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(newJoke), // JavaScript 객체 리터럴을 JSON 문자열로 변환하기
})
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => {
    console.error(err);
  });

 

이렇게 가져온 JSON 을 fetch 로 구문분석하고 JSON.stringify() 를 사용해 JS 객체 리터럴을 JSON 문자열로 변환했다.

 

 

 

---

 

 

정리

 

JSON 의 기본적인 형태는 { key : value } 의 쌍으로 이루어져 있는 구조이다.

 

여러 데이터를 나열할 경우 { key1 : value, key2 : value2 } 쉼표(,) 를 사용한다.

 

객체는 중괄호 { } 로 묶어서 표현하고, 배열은 대괄호 [ ] 로 묶어서 표현한다.

 

데이터 값으로 다양한 타입을 사용할 수 있다. (숫자, 문자열, 불리언, 객체, 배열, 널)

 

JSON.stringify(arg) ---> 객체를 문자열로 변환한다.

var json = {"test" : "value"}
var incodingData = JSON.stringify(json);

 

JSON.parse(arg) ---> 문자열을 객체로 변환한다.

var str = '{"test" : "value"}';
var parsingData = JSON.parse(str);

 

자바스크립트에서 JSON 을 사용하기 위해 두 메소드를 사용할 수 있다.

객체와 문자열로의 변환을 위해서이다.

 

JSON.parse() 사용 시 주의할 점은 해당 문자열이 반드시 JSON 형식이어야 한다는 것이다.

 

function solution(s) {
    return JSON.parse(s.replace(/{/g, '[').replace(/}/g, ']'))
    .sort((a, b) => a.length - b.length)
    .reduce((arr, v, n) => {
        if (n) {
            return arr.concat(v.filter(f => !arr.includes(f)));
        }
        return v;
    }, []);
}

 

++ 프로그래머스 문제 튜플을 사용할 때, JSON.parse() 를 사용하신 분을 보았는데, 문자열을 객체로 변환시켜주기 위해서 사용하신 것 같다.

첫 번째 문단에서 [ ] 로 이루어진 문자열을 이차원 배열로 변경해준 것이다.

 

 

 

---