[JS] 📜JSON에 대해서 알아보자 #2

< 이전 글: JSON 개념 정리

3. JSON의 구조

요약

• JSON은 문자열 형태로 존재하기 때문에 실제 사용을 위해선 객체로 변환해주어야 합니다.

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

• JSON은 Javascript 객체 리터럴 문법을 따르는 문자열로 데이터 계층을 구축할 수 있습니다. 식별자 규칙, 할당할 수 있는 값의 타입 등이 제한되며 메서드를 넣을 수 없습니다!

• 점/브라켓 표현법을 통해 객체 내 데이터에 접근할 수 있습니다. 프로퍼티 이름과 배열 인덱스의 체인을 통해 하위 계층의 데이터에 접근할 수 있습니다.

코드로 알아보기

이해를 돕기 위해 JS에서 사용하는 객체 표현과 JSON의 표현 방식을 비교하였습니다.

1.먼저 JavaScript의 객체 표현을 알아봅시다.

//JS에서 객체를 값으로 가지고 있는 배열 표현
const array = [{}, {}, {}];

//JS에서 객체의 표현
const object = {
 
 /*프로퍼티 키를 변수명처럼 입력 가능(문자열로 변환)*/
 key1: `value1`, //문자열
 key2: { name: 'man',  genter: "female" }, //객체
 key_2: [1, 3, 4, 5], //배열
 
 /*프로퍼티 키는 기본적으로 문자열*/
 "key2": 2, //숫자
 "key-2": true, //변수명 규칙에 어긋난다면 무조건 문자열로!!
 
 /*프로퍼티 키에 숫자 가능(문자열로 변환)*/
 3: true, //불린
 
 /*프로퍼티 키로 함수 호출 가능*/
 sayHello: function () {
   console.log('Hi! My name is ' + this.name);
   //this로 해당 객체의 프로퍼티 사용 가능
 } //함수 ~ 메서드
};

프로퍼티 키는 문자열이므로 따옴표(‘’ 또는 ““)를 사용한다. 하지만 자바스크립트에서 사용 가능한 유효한 이름인 경우, 따옴표를 생략할 수 있다. 반대로 말하면 자바스크립트에서 사용 가능한 유효한 이름이 아닌 경우, 반드시 따옴표를 사용하여야 한다.

프로퍼티 키는 암묵적으로 문자열로 변환되기 때문에 key2와 "key2"는 같은 프로퍼티 키가 됩니다. 따라서 마지막에 쓰여진 "key2"로 불러와집니다.

2.이제 JSON의 형태를 알아봅시다.

JSON내부에서는 주석을 사용할 수 없습니다! 직접적인 설명을 위해 주석형태를 빌렸습니다. 다음 내용은 MDN에서 가져왔습니다.

[ //배열 내부에 객체를 담는다. ~ 올바른 JSON 형식
  
  //배열의 0번째 인덱스처럼 사용 가능
  {
    //프로퍼티는 항상 문자열로 표현
    "name": "Molecule Man", //문자열 ~ 항상 큰따옴표를 사용
    "age": 29, //숫자
    "secretIdentity": "Dan Jukes",
    "powers": [
      "Radiation resistance", 
      "Turning tiny", 
      "Radiation blast"
    ] //배열
    
  },//콤마로 구분!!!!!!!!
  
  //배열의 1번째 인덱스처럼 사용 가능
  {
    "name": "Madame Uppercut",
    "age": 39,
    "secretIdentity": "Jane Wilson",
    "powers": {
      "Million tonne punch": 1,
      "Damage resistance": 2,
      "Superhuman reflexes": 3
    } //객체
  }
]

3.JSON 사용하기

문자열로 된 JSON파일을 파싱하여 객체로 변환 후 사용 가능합니다.

//json 파일
const myJson = [
 {name: "Chris", age: "38"},
 {name: "Egg", age: "17"}
];

//json 파일로 내보낼 때 문자열로 변환하기 ~ 문자열화
const mySTRING = JSON.stringify(myJson);

//json 파일을 사용할 때 객체로 변환하기 ~ 파싱
const parsedJson = JSON.parse(mySTRING);

변수에 저장된 값을 출력해본다면

myJson
/*(2) [{…}, {…}]
0: {name: 'Chris', age: '38'}
1: {name: 'Egg', age: '17'}
length: 2
[[Prototype]]: Array(0)*/


myString
//'{"name":"Chris","age":"38"}'

프로퍼티 키에 접근하여 사용해본다면

//JSON객체변수명[배열인덱스].프로퍼티키 => 프로퍼키 값

//프로퍼티 키로 바로 접근하기 ~ 점 사용
parsedJson[0].name //'Chris'

//문자열로 접근하기 ~ 브라켓 사용
parsedJson[1]["name"] //'Egg'

결론

처음 JSON을 접할 때 사용방법 등에 대해서 많이 두려웠습니다. 피그마 디자인 토큰을 다루다보니 어쩔 수 없이 JSON을 사용해야 했고, 그 결과 JSON이 가장 쉽다는 걸 깨달았습니다. 몇가지 규칙만 숙지하고 VScode에는 JSON을 쉽게 볼 수 있도록 도와주는 확장팩도 활용하니 JSON을 읽고 사용하는데 큰 지장이 없었습니다. 그래서 요즘은 JSON에서 가장 어려운 점이 JSON으로 데이터의 계층 구조를 짤 때입니다. 쓸데없이 깊이가 깊어져 접근하려면 키만 4개를 거쳐야 될 때도 있었고, 확실하게 나누지 않아서 쓸모없는 데이터도 같이 불러와지는 경우도 생겨서 생각을 많이 해서 파일을 작성하게 되었습니다. 확실한 건, 지지고 볶고 해야 익숙해지고 다루기도 편해진다는 것이네요! 다음에 피그마 디자인 토큰 사용한 것을 토대로 JSON을 어떻게 활용했는지 적어보도록 하겠습니다!