JSON

👩‍💻 배운것

JSON

• Javascript Object Notation
• 데이터 교환을 위해 만들어진 객체형태의 포맷

JSON.stringify //object type => JSON
JSON.parse // JSON type => object

• 직렬화: stringify 하는 과정 (serialize)
• 역직렬화: parse하는 과정 (deserialize) <<오늘의 발음 어려운 단어.. 역! 직! 렬! 화!

👫 페어프로그래밍

• 어제와 같은 페어분과 연습한 재귀로 오늘 JSON 연습을 했다.

function stringifyJSON(obj) {
  // your code goes here
  if (typeof obj === 'boolean' || typeof obj === 'number' || obj=== null) return String(obj)
  else if (typeof obj === 'string') return `"${obj}"`
  else if (Array.isArray(obj)){
    if (obj.length===0){
      return "[]";
    }else {
      let output = [];
      for (let i of obj){
        output.push(stringifyJSON(i))
      }
      return `[${output}]`
    }
  }
  else if(typeof obj === 'object'){
    let output=""
    if (Object.keys(obj).length===0){
      return "{}"
    } else{
      for(let i in obj){
        if (obj[i]===undefined){
          return '{}';
        }
        output+=`${stringifyJSON(i)}:${stringifyJSON(obj[i])},`
      }
    }
    return `{${output.slice(0,-1)}}`
  }
  else{
    return ""
  }
};

• 두번째 과제는 tree UI

function createTreeView(menu, currentNode) {
  // TODO: createTreeView 함수를 작성하세요.
  if ('children' in menu[0] === false){
    //children이 없을때 이름 리스트만 만들기
    for (let item of menu){
      const li = document.createElement("li")
      li.textContent=item.name
      currentNode.append(li)
    } 
  } else if ('children' in menu[0]){
    //children이 있을때 리스트, 스팬, ul 만들기
     for (let item of menu){
      const li = document.createElement("li")
      const span = document.createElement("span")
      const input = document.createElement("input")
      const ul = document.createElement("ul")
      input.setAttribute('type', 'checkbox')
      span.textContent=item.name
      currentNode.append(li)
      li.append(input)
      li.append(span)
      li.append(ul)
      
      createTreeView(item.children, ul)
    }
  }
}

• 감이 안잡혔는데 페어님이 리스트, 스팬 등을 선언하는거부터 시작해서 약간 감을 잡고 재귀함수의 base case부터 작성했다 . js문법이 아직 낯설어서 에러가 많이 떴다. 마지막까지 괴롭힌건 for loop의 "in"과 "of".... let 을 선언하는건 다 of라고 했다.

👍 후기

• 재밌었당 내일도 하루종일 코플릿이던데 기대된다 나는 코플릿이 더 좋아