이번 포스팅에선 JSON이 뭔지 간단하게 알아보려고 합니다🕶


JSON이란?

  • JavaScript Object Notation의 줄임말
  • 자바스크립트에서 객체를 만들 때 사용하는 표현식을 의미
  • 프로그래밍 언어가 아닌 데이터 교환 포맷

JSON의 특징

  • 사람과 기계 전부 이해하기 쉬움
  • 특정 프로그래밍 언어, 운영체제에 구애 받지 않음
  • XML 보다 가볍고 빠름

JSON의 기본 자료형

  • String - "로 묶여야 함
  • Number
  • Object - {로 시작하고 }로 끝내어 표현함, name뒤에 :를 붙이고 ,로 구분
  • Array - [로 시작하고 ]로 끝냄, ,로 값을 구분
  • Boolean
  • Null

JSON의 구조

{
    "characters" : [
      {
        "name": "archer",
        "level": 1,
        "inventory": null,
        "hardcore": false
      },
      {
        "name": "knight",
        "level": 8,
        "inventory": ["sword", "shield"],
        "hardcore": true
      }
    ]
}

위와 같은 형식을 사용하는데 크게 두 개의 구조를 기본으로 두고 있다.

  1. name/value 쌍의 집합이며 비 순서화 되어있음
{
  "name": "archer",
  "level": 1,
  "inventory": null,
  "hardcore": false
}
  1. 값들의 리스트 형식이며 순서화 되어있음
[{"name": "archer", "level": 5}, 10, "bag"]

Javascript JSON 메서드

Javascript에서 사용할 수 있는 JSON 메서드 두 가지에 대해서 간단히 알아보려고 한다👨🏼‍🎓

JSON.stringfy

ObjectJSON으로 변환해 주는 메서드

JSON.stringify(value[, replacer[, space]])

각 매개변수의 기능은 여기🐱

const archer = {
  name: 'kyle',
  class: 'archer',
  level: 5,
  shot: () => {
    console.log(`${archer.name} shot the enemy!`);
  },
}

let json = JSON.stringify(archer);
console.log(json);

/* JSON으로 변환된 Object: 
{
  "name":"kyle",
  "class":"archer",
  "level":5
}
*/

ObjectJSON으로 변환하면 '는 자동으로 "로 변환됨
JSON.stringify를 사용하여 변환할 때 undefined, function 그리고 symbol
변환 될 때 생략(object안에 있을 경우) 되거나 null(array안에 있을 경우)로 변환됨

JSON.parse

JSONObject로 변환해 주는 메서드

JSON.parse(text[, reviver])

각 매개변수의 기능은 여기🐶

const json = '{"name":"kyle","class":"archer","level":5}';
let jsonToJs = JSON.parse(json);
console.log(jsonToJs);

/* Object로 변환된 JSON:
{name: "kyle", class: "archer", level: 5}
*/

JSON을 변환시킬 때는 앞, 뒤에 따옴표를 붙여줘야 오류가 나지 않음
메소드에서 String으로 받아야 변환이 가능하기 때문


공부하면 공부할수록 너무 어려워지고 간단하게 정리하는데도 힘들다....😭
힘내자..............!














Ref.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON
http://json.org/json-ko.html
https://ko.javascript.info/json
https://youtu.be/FN_D4Ihs3LE

profile
🎹재즈를 사랑하는 백엔드 개발자 이준영입니다🎷

0개의 댓글

Powered by GraphCDN, the GraphQL CDN