JSON

데이터 형식 중 하나인 json에 대해 학습해봅시다😁

프론트엔드로 서버(백엔드)와 통신을 하게 되면, 무조건 보게 되는 개념이 JSON입니다. 간단히 말하자면 HTML과 같이 데이터를 표현하는 형식이라 볼 수 있는데, JSON 이외에도 많은 데이터를 표현하는 방법들이 존재합니다(예를 들어, xml이 대표적이겠네요!). 이처럼 필수로 알아야하고, 가장 많이 사용되고 있는 JSON에 대해 궁금증이 생겨 서칭하며 좀 더 많은 내용을 공부하고자 포스팅 합니다.

---

이 포스팅은 이분의 블로그와 MDN을 참고했습니다

---

JSON

• Douglas Crockford라는 분이 퍼뜨린 Javascript 객체 문법을 따르는 문자 기반의 데이터 포맷.

🍕 아니 이분 더글라스 크락포드님은 자바스크립트는 왜 그 모양일까라는 책을 읽었을 때, 저자였던거 같은데 자바스크립트에서 엄청난 네임드 분이신가 봄

• 자바스크립트 객체 문법과 매우 유사하지만, 다른 프로그래밍 환경에서 제공 되어짐.

• 문자형 형태로 존재. 그래서 네트워크를 통해 전송할 때 아주 유용.

• 데이터에 엑세스하기 위해서는 원래의 데이터로 변환되어야 함(MDN에서 말하길 javascript에서 json 전역 객체를 통해 문자열과 JSON 객체의 상호변환을 지원함으로 별로 큰 문제 아니라고하네요! 제 경험상에도 그러합니다!)

🍕 문자열에서 네이티브 객체로 변환하는 것은 파싱(Parsing)이라고 합니다. 네트워크를 통해 전달할 수 있게 객체를 문자열로 변환하는 과정은 문자열화(Stringification)이라고 합니다.

---

JSON 구조

• Javascript 객체 리터럴 문법을 따르는 문자열.
• javascript의 기본 데이터 타입인 문자열, 숫자, 배열, 불리언, 그리고 다른 객체를 포함할 수 있음.

{
  "squadName": "Super hero squad",
  "homeTown": "KKachiul City",
  "formed": 2021,
  "secretBase": "Super tower",
  "active": true,
  "members": [
    {
      "name": "Kim ye chan",
      "age": 29,
      "secretIdentity": "javascript gosu",
      "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"
      ]
    }
  ]
}

위처럼 여러 데이터 계층을 구축할 수 있습니다!

---

JSON에서의 배열

• 배열 또한, 자바스크립트의 오브젝트 중 하나이기 때문에 JSON이 될 수 있음.
• 이는 서버에서 데이터를 받아올 때 배열로 받아 옴으로써, 비슷한 데이터를 여러개 받을 수 있어서 편리함

[
  {
  	name: "바나나",
    area: "아프리카",
  },
  {
    name: "사과",
    area: "유럽",
  },
    {
    name: "딸기",
    area: "한국",
  } // 이처럼 배열로 JSON 형태를 표현할 수 있습니다.
]

알아둘 점

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