[C/F TIL] 42일차 - JSON.stringify

Code States
Front-end boost camp
Today
I
Learned

🐬 42일차, 월요일!

🐬 JSON

• JavaScript Object Notation : 데이터 교환을 위해 만들어진 객체 형태의 포맷
• JSON.stringify : 객체를 JSON으로 변환한다. -> 직렬화
• JSON.parse : JSON을 객체로 변환한다. -> 역직렬화
• JavaScript 를 포함한 많은 언어에서 범용적으로 사용하는 포맷

🐬 JSON 기본 규칙

• JavaScript 객체와 비슷해 보이지만 미묘하게 다른 규칙 존재
  

🐬 페어 과제 1 - JSON.stringify

• JSON.stringify가 어떤식으로 구동되는지 노가다로 함수 하나씩 찍어 확인해보라는 의미... 아주 어렵진 않았지만 쉽지 않았다.

const { type } = require("express/lib/response");

/**
 * 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) {
  // your code goes here
  if (typeof obj === 'number' || typeof obj === 'boolean' || obj === null) {
    return `${obj}`;
  }
  if (typeof obj === 'string') {
    return `"${obj}"`;
  }
  if (Array.isArray(obj)) {
    let result = "";
    for (element of obj) {
      result += stringifyJSON(element) + ',';
    }
    result = result.slice(0, result.length - 1);
    return `[${result}]`;
  }

  if (typeof obj === 'object') {
    let result = "";
    for (key in obj) {
      if (typeof obj[key] === 'function' || obj[key] === undefined) {
        continue;
      }
      result += stringifyJSON(key) + ":" + stringifyJSON(obj[key]) + ",";
    }

    result = result.slice(0, result.length - 1);
    return `{${result}}`
  }
};

// 다음 코드는 결과 제출을 위한 코드입니다. 신경 쓰지 않아도 좋습니다.
if (typeof window === "undefined") {
  module.exports = stringifyJSON;
}

🐬 페어 과제 2 - Tree UI

• 요건... DOM으로 html안에 있는 요소들을 가지고 와서 자식요소 안에 자식요소가 또 있을 경우 체크박스 형식의 리스트로 계속계속 보여주는 형식이라는 것 까진 이해가 가는데, 왜 li에 append를 하는건지? currenNode가 정확히 뭘 의미하는지? 잘 이해가 안된다. 내일 아침 실시간 세션을 좀 봐야할 듯!

const root = document.getElementById('root');
function createTreeView(menu, currentNode) {
  
  for (let i = 0; i < menu.length; i++) {
    const li = document.createElement('li');
    if (menu[i].children) {
      const input = document.createElement('input');
      input.type = 'checkbox';
      const span = document.createElement('span');
      span.textContent = menu[i].name;

      const ul = document.createElement('ul');
      li.append(input, span, ul);
      currentNode.append(li);

      createTreeView(menu[i].children, ul);
    } else {
      li.textContent = menu[i].name;
      currentNode.append(li);
    }
  }
}
createTreeView(menu, root);

🐬 종합퀴즈 및 개념정리

• 재귀함수 : 자기 자신을 호출하는 함수
• 재귀의 탈출 조건? : base case
• 재귀를 사용하기 적합한 상황은?
  -- 주어진 문제를 비슷한 구조의 더 작은 문제로 나눌 수 있는 경우
  -- 중첩된 반복문이 많거나 반복문의 중첩 횟수를 예측하기 어려운 경우
  -- 반복문으로 작성된 코드를 더욱 간결하고 이해하기 쉽게 작성하고 싶은 경우
• 정답 : (1)arr.length === 0, (2) arr.shift(), (3)arr
  -- shift는 원본 배열에서 첫 번째 요소를 삭제하고 그 요소를 반환, 원본 배열을 수정함

const arr = [1, 2, 3, 4, 5];

function arrSum(arr) {
  if ( (1)__________ ) {
    return 0;
  }

  return (2)__________ + arrSum( (3)__________ );
}

🐬 42일차 수업을 마치며...

재귀.. 60퍼센트 정도 이해는 잘 되는데... 어떤 위치에 어떻게 적재적소에 넣어야 하는지 판단이 조금 어렵다.