[TIL] Day42 #JSON.stringify

2022.06.24(Fri)

[TIL] Day42
[SEB FE] Day42

☑️ JSON.stringify

JSON(Javascript Object Notation): 데이터 교환을 위해 만들어진 객체 형태 포맷
➰ JSON은 JavaScript 객체와 다른 규칙을 가짐

✋ 객체는 타입 변환을 이용해 String으로 변환할 경우, 객체 내용 포함 ❌

• JS에서 객체 → 문자열로 변환하기 위해 메서드(message.toString())나 형변환(String(message))를 시도하면, [object object] 결과 리턴

• JSON.stringify: 객체 → JSON으로 변환 (typeof: string); 직렬화(serialize)

• JSON.parse: JSON → 객체로 변환 (typeof: object); 역직렬화(deserialize)

	JS 객체	JSON
key	“” 없이 OK {key: “property”}	반드시 “” '{”key”:”property”}'
문자열 값	‘’ 사용 OK	반드시 “”
key & value 사이 공백	사용 ⭕️ {”key”: ‘property’}	사용 ❌ '{”key”:”property”}'
key-value 쌍 사이 공백	사용 ⭕️ { “key”: ‘property’, num:1 }	사용 ❌ '{”key”:”property”,”num”:1}'

---

✍️ fe-sprint-stringify-json

JSON.stringify() 메소드를 함수 형태로 직접 구현해보기 🙌

function stringifyJSON(obj) {
  // return JSON.stringify(obj);

  // number, boolean, null type -> string type
  if (typeof obj === "number" || typeof obj === "boolean" || obj === null) {
    return `${obj}`;
  }

  // string type -> string 안의 다시 string type
  if (typeof obj === "string") {
    return `"${obj}"`;
  }

  // array type -> array 내의 string type
  if (Array.isArray(obj)) {
    // let newArr = [];
    // for (let item of obj) {
    //   newArr.push(stringifyJSON(item));
    // }
    // return `[${newArr}]`;

    // reference
    let result = "";
    for (let el of obj) {
      result += stringifyJSON(el) + ",";
    }
		// ex. '1', '2', '3',
    result = result.slice(0, -1); // 맨 끝 요소에 붙어있는 ',' 제거
    return `[${result}]`;
  }

  // object type -> obejct 내의 string type
  if (typeof obj === "object") {
    let result = "";
    for (let key in obj) {
			// 조건: function, undefined는 stringify 되지 않음
      if (typeof obj[key] === "function" || obj[key] === undefined) {
        continue;
      }
      result += `${stringifyJSON(key)}:${stringifyJSON(obj[key])},`;
    }
    result = result.slice(0, -1); // 맨 끝 요소에 붙어있는 ',' 제거
		// JSON 형식: '{"key":"property"}'
    return `{${result}}`;
  }
}

---

✍️ fe-sprint-tree-ui

재귀를 사용해서 Tree UI 구현해보기 🙌

// dummy data
const menu = [
  {
    type: "group",
    name: "음료",
    children: [
      {
        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) {
  for (let arrayItem of menu) {
    const liEl = document.createElement("li");
	// dummy data 중에서 type key에 해당하는 value가 item라는 것은 
	// 더이상의 자식요소가 없다는 것을 의미 
    if (arrayItem.type === "item") {  // 더이상 자식 요소가 없을 때
	// if (!el.children) <- 자식 요소 없음을 의미 (위 코드와 같은 내용)
	  // 그냥 name을 출력
      liEl.textContent = arrayItem.name;
      currentNode.appendChild(liEl);
    } else { // 자식 요소가 있을 때
	  // input element 요소 생성
      const inputEl = document.createElement("input");

	  // 위 inputEl element type 속성을 'checkbox'로 설정
      inputEl.setAttribute("type", "checkbox"); 
	  //inputEl.type = "checkbox"; <- (위 코드와 같은 내용)

      const spanEl = document.createElement("span");
	  // span element 내용에 name 출력
      spanEl.textContent = arrayItem.name;

      const ulEl = document.createElement("ul");

	  // li element의 자식요소로 input, span, ul element 설정
      liEl.appendChild(inputEl);
      liEl.appendChild(spanEl);
      liEl.appendChild(ulEl);
	  // liEl.append(inputEl, spanEl, ulEl); <- 한 줄로 위 3줄 코드와 같은 내용으로 처리

	  // 최상위 노드 root에 li element를 자식요소로 붙임
      currentNode.appendChild(liEl);

	  // 재귀 함수 실행
      createTreeView(arrayItem.children, ulEl);
    }
  }

createTreeView(menu, root);

---

배운지 오랜만에 다시 DOM을 다루려니까 메소드 이름이랑 어떻게 썼던건지 기억이 가물가물해서 좀 애먹었었다,, 페어님 덕분에 코드 다시 한번 써보면서 어느정도 다시 감 잡을 수 있었던..🙌