JSON.stringify() // JSON.parse() // Tree UI

💡 JSON은 JavaScript Object Notation의 줄임말로, 데이터 교환을 위해 만들어진 객체 형태의 포맷

 

JSON.stringify

JSON.stringify : 객체를 JSON으로 변환한다.

JSON으로 변환된 객체의 타입은 문자열이다.

→

JSON.stringify하는 이 과정을 **직렬화(serialize)**한다고 합니다.

 

JSON.parse

JSON.parse : JSON을 객체로 변환한다.

→

JSON.parse를 적용하는 이 과정을 **역직렬화(deserialize)**한다고 합니다.

 

 

JSON의 기본 규칙

JSON은 얼핏 보기에 자바스크립트의 객체와 별반 다를 바가 없어 보이지만, 자바스크립트의 객체와는 미묘하게 다른 규칙이 있습니다.

 

                                                                자바스크립트 객체                                                                    JSON

키	키는 따옴표 없이 쓸 수 있음{ key : "property" }	반드시 쌍따옴표를 붙여야 함'{"key":"property"}'
문자열 값	작은따옴표도 사용 가능{ "key" : 'property' }	반드시 큰따옴표로 감싸야 함'{"key":"property"}'
키와 값 사이 공백	사용 가능{"key" : 'property'}	사용 불가능'{"key":"property"}'
키-값 쌍 사이 공백	사용 가능{ "key":'property', num:1 }	사용 불가능'{"key":"property","num":1}'

 

 

---

 

과제1 - JSON.stringify

 

테스트 케이스를 3가지로 나눠볼 수 있다

1. 객체나 배열이 아닌 경우1) number, null, boolean 문자열로 리턴, string 일때는 앞뒤로 "" 추가로 넣어줘야 한다
2. 배열인 경우Array.isArray로 배열인지 확인한 뒤 stringifyJSON(재귀함수)을 사용해서 새 배열에 넣어준 뒤 리턴
3. 객체인 경우 객체의 key가 undefined || value 에 function, undefined 가 들어왔을 경우 {}리턴,,
4. 나머지 경우에 속성 : 값 형태의 문자열로 저장한 뒤 리턴

/**
 * 1. Browser에 존재하는 JSON.stringfy 함수를 직접 구현해 봅니다.
 * JSON.stringfy 함수는 input 값을 JSON 형식으로 변환합니다.
 * 단, undefined와 function은 JSON으로 생략되거나 null로 변환됩니다.
 *
 * 2. stringfyJSON은 아래와 같이 작동합니다.
 * - Boolean이 input으로 주어졌을 경우
 * stringifyJSON(true);                // 'true'
 * - String이 input으로 주어졌을 경우
 * stringifyJSON('foo');               // '"foo"'
 * - Array가 input으로 주어졌을 경우
 * stringifyJSON([1, 'false', false]); // '[1,"false",false]'
 * - Object가 input으로 주어졌을 경우
 * stringifyJSON({ x: 5 });            // '{"x":5}'
 * - undefined, function이 주어졌을 경우
 * stringifyJSON(undefined)            // undefined
 * stringifyJSON(function(){})         // undefined
 * stringifyJSON({ x: undefined, y: function(){} })   // '{}'
 *
 * 3. spec/stringifyJSONSpec.js의 stringifiableObjects 배열을 참고해서 테스트에서 어떤 input 값들이
 * 주어지고, 어떻게 stringify해 주어야 할지 생각해 보세요.
 *
 * 4. 그냥 테스트 통과를 하고 싶으시다면, 다음과 같이 구현하면 될 거예요.
 *  const stringifyJSON = JSON.stringify;
 *
 * 하지만 이 과제의 목적은 재귀를 공부하는 것이니, 처음부터 구현해봐야겠지요?:
 */

 

 

 

주석과 테스트 케이스를 참고하여 작성!!

 

function stringifyJSON(obj) {
  // boolean, number, null 일때
  if (typeof obj === "boolean" || typeof obj === "number" || obj === null) {
    return String(obj);
  }
  // string 일 때
  if (typeof obj === "string") {
    return `"${obj}"`;
  } 
  //함수와 undefined는 stringify되지 않습니다.
  if (typeof obj === "undefined" || typeof obj === "function") {
    return "undefined";
  }
  // 배열
  if(Array.isArray(obj)) {
    let result = []
    for(let item of obj) {
      result.push(stringifyJSON(item))
    }
    return `[${result}]`
  }
  // 객체
  if(typeof obj === 'object' && obj !== null){
    let str = ''
    for (let i in obj) {
      if(typeof obj[i] === 'function' || obj[i] === undefined) {
        return "{}"
      }
      let newkey = stringifyJSON(i)
      let newValue = stringifyJSON(obj[i])
      str = str + newkey + ":" + newValue + ','
    }
    str = str.slice(0,-1)
    return `{${str}}`
  }
}

 

 

---

 

과제2 - Tree UI

자식 노드가 있는 경우, 재귀함수로 반복되는 <ul> 호출해야한다. 만약 자식 노드가 없는 경우 <li>에 이름을 넣으면 된다.

 

result.html

예시인 tree ui 이다,,

주어진 menu 배열을 활용하여 반복문과 재귀를 활용하여 작성!!!

 

fix_me.js

menu의 type이 "group" 이면, children이 있으며, children의 type이 "item"이면 끝난다.

이것으로 menu 배열을 반복돌며,

조건을 type === "group" 일 때와 아닐 때 로 나눠서

필요한 element를 생성하여 append 한다.

그리고 children 속 children을 똑같이 랜더링을 위해

재귀 사용! 하여 코드를 짠다👍🏻

 

const menu = [
  {
    type: "group",
    name: "음료",
    children: [
      {
        type: "group",
        name: "콜드 브루",
        children: [
          { type: "item", name: "나이트로 콜드 브루" },
          { type: "item", name: "돌체 콜드 브루" },
          { type: "item", name: "제주 비자림 콜드 브루" },
          { type: "item", name: "콜드 브루" },
        ],
      },
      {
        type: "group",
        name: "프라푸치노",
        children: [
          { type: "item", name: "애플 쿠키 크림 프라푸치노" },
          { type: "item", name: "더블 에스프레소 칩 프라푸치노" },
          { type: "item", name: "모카 프라푸치노" },
          { type: "item", name: "피스타치오 크림 프라푸치노" },
        ],
      },
			...나머지 생략
]

const root = document.getElementById("root");

function createTreeView(menu, currentNode) {
  // TODO: createTreeView 함수를 작성하세요.
  for (let i of menu) {
    if (i.type === 'group') {

      // li
      let li = document.createElement("li");
      currentNode.append(li);

      // 종류 이름은 span
      let span = document.createElement("span");
      span.textContent = i.name;

      // checkbox 설정
      let input = document.createElement("input");
      // input.type = "checkbox";
      input.setAttribute("type","checkbox")

      // ul
      let ul = document.createElement("ul");

      // li 안에 input, span, ul 을 담아서 현재 노드에다가 붙임
      li.append(input, span, ul);

      //? 재귀를 돌린다
      createTreeView(i.children, ul);

    } else {
      //! children 없을 때
      let li = document.createElement('li')
      li.textContent = i.name;
      currentNode.append(li);
    }
  }
}

createTreeView(menu, root);