[문제풀이] stringifyJSON, Tree UI

stringifyJSON

function stringifyJSON(obj) { // 문자열로 바꿔주는 로직 
  if(typeof obj === "number" || typeof obj === "boolean" || obj === null) {
  return `${obj}`
  }
  if(typeof obj === "string") return `"${obj}"` 
  
  // 배열인지 확인하고 배열이라면 '[' ws ']' 이런 형태로 
  if(Array.isArray(obj)) {
    // [1,2,3,4,5]
  let result = ""
  for(let el of obj) {
    result += stringifyJSON(el) + ','
  }
    result = result.slice(0,-1) 
    return `[${result}]`
  } 
  
  // 객체 반복문 for in 문 
  if(typeof obj === 'object') {
    // { a : "a", b : 123} // 123은 숫자로 들어오고 있어서 따옴표 필요 없음
    // '{"a":"a","b":123}' // 키도, 벨류도 바꿔주면서 중간에 콜론과 쉼표를 넣어줘야함
    let result = ""
    for(let key in obj) {
      if(typeof obj[key] === 'function' || obj[key] === undefined) {
        continue
      }
      result += `${stringifyJSON(key)}:${stringifyJSON(obj[key]},`
}
      result = result.slice(0,-1) // 끝에 있는 쉼표를 빼주기 // ""a":"a","b":123"형태가 됨 이제 
	  result `{${result}}` // 중괄호 추가 
}
};

---

Tree UI

DOM의 트리구조 - 재귀 활용

문제분석

• 자식엘리먼트가 있으면 span, input을 넣어놨고 없다면 list 안에 넣어놨다
• 4개의 객체가 하나의 배열 안에 들어있다.
• 음료의 자식 children 안에 또 배열 안에 객체들이 들어있음.

// root는 다큐먼트에서 루트라고 쓰고 있는 아이를 가져온것. currentNode 요소 안에 우리가 만든 걸 넣어주겠다. 우리가 만든 요소를 어디에 붙일건지 currentNode가 의미하고 있음 
const root = document.getElementById('root');
function createTreeView(menu, currentNode) {
  // TODO: createTreeView 함수를 작성하세요.
  // 1) ul#root 엘리먼트 안에 카테고리(음료, 음식, 굿즈, 카드)를 렌더링할 4개의 li 엘리먼트가 있어야 합니다
  for (let el of menu) {
    let listElement = document.createElement('li') // 리스트 생성 
    // 리스트 안에 1)이름이 들어가는 경우(자식없을때) 
    // 2) 인풋과 스판을 사용하는경우(자식있을때)를 나눠 작성 
    let (!el.children) {
      listElement.textContent = el.name
    } else { 
      let inputElement = document.createElement('input') 
      // 인풋 타입은 체크박스여야함.
      inputElement.type = "checkbox"
      
      let spanElement = document.createElement('span') 
      // 스판은 텍스트컨텐트 
      spanElement.textContent = el.name
      
      let ulElement = document.createElement('ul')
      
      // 여기까지 하면 만들기만 하고 화면에 뜨진 않음 
      // append를 하자. append: 인자를 여러개 전달해서 한번에 줌 
      
      listElement.appendChild(inputElement, spanElement, ulElement) 
      
      createTreeView(el.children, ulElement)
    }
    currentNode.append(listElement)
  }
}
createTreeView(menu, root);

---

+) 또...

fibonacci

아래와 같이 정의된 피보나치 수열 중 n번째 항의 수를 리턴.
0번째 피보나치 수는 0이고, 1번째 피보나치 수는 1. 2번째 피보나치 수부터는 바로 직전의 두 피보나치 수의 합
0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, ...

입출력 예시

let output = fibonacci(0);
console.log(output); // --> 0

output = fibonacci(1);
console.log(output); // --> 1

output = fibonacci(5);
console.log(output); // --> 5

output = fibonacci(9);
console.log(output); // --> 34

주의사항

재귀함수를 이용해 구현
반복문(for, while) 사용금지
함수 fibonacci가 반드시 재귀함수일 필요없다.

let fibonacci = function (n) { // 피보나치에 n이라는 인자를 전달하면 
  const memo = [0, 1];
  const aux = (n) => { // 옥스에서 메모란 배열 안에 n번째 인덱스 값이 있는지 확인한다. 만약 없다면--> 결과는 undefined다. 

    if (memo[n] !== undefined) return memo[n]; // 메모에 찾고자 하는 게 있으면 리턴. 
    
    // 찾고자 하는 게 없으면 이 코드를 실행. 
    memo[n] = aux(n - 1) + aux(n - 2);
    return memo[n];
  };
  return aux(n);
};
}

다른 풀이

function fibonacci(n) {
  let fibo = [0, 1];
  
  const fibFunction = (n) => {
    if(fibo[n] !== undefined) return fibo[n]
    fibo[n] = fibFunction(n - 2) + fibFunction(n - 1) 
    return fibo[n] // 배열에서 갖고 나감 
  }
  return fibFuction(n)
}