Achievement Goals

• JSON 구조가 재귀 함수를 사용할 수 있는 Tree 구조임을 이해할 수 있다. (stringifyJSON)
  - JSON.stringify 와 JSON.parse 가 seriealize, deserialize라는 것을 이해할 수 있다.
  - JSON.stringify 와 JSON.parse 를 사용하여 자바스크립트 값과 JSON을 넘나들 수 있다.
  - JSON에 재귀 호출을 사용할 때, 어디에 사용해야 할지 이해할 수 있다.

StringifyJSON 구현

function stringifyJSON(obj) {
  //base
  if(typeof obj==='number'|| obj=== null || typeof obj==='boolean'){
    return `${obj}`
  }
  if(typeof obj === 'string'){
    return `"${obj}"`
  }
//재귀 case
  if(Array.isArray(obj)){ ///배열일 때
    if(obj.length===0){
      return '[]'
    }else{
      const arr=[]
      for(let i of obj){
        arr.push(stringifyJSON(i))
    }
    return `[${arr}]`
    }
  }
  if(Object.keys(obj).length===0){ //객체일 때
    return '{}'
  }else{
    const objarr=[] //객체는 ``로 string화 할 수 없으니 []에 담는다.
    for(let i in obj){
      if(typeof obj[i]==='function' ||typeof obj[i]==='undefined') {
        continue //함수와 undefined는 stringify하지않고 지나간다.
      }
      objarr.push(stringifyJSON(i)+':'+stringifyJSON(obj[i]))
    }
    return `{${objarr}}`
  }
};

Tree UI 구현

function createTreeView(menu, currentNode) {
  //base : key값으로 children이없는 경우 check,span,ul 없이 li생성 name값 만 넣어라
  if(!('children' in menu[0])){
    for(let i of menu){
      const li =  document.createElement('li')
      li.textContent=i.name
      currentNode.append(li)
    }
  //재귀 부분
  }else if('children' in menu[0]){
    for(let i 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=i.name
      currentNode.append(li)
      li.append(input,span,ul)
      createTreeView(i.children,ul)
    }
  }
}