Section3 Unit1 [자료구조/알고리즘] 재귀 - 과제 JSON.stringify, Tree UI

---

Section3 Unit1 [자료구조/알고리즘] 재귀 - 과제 JSON.stringify, Tree UI

 

⭐️ 과제 1. JSON.stringify

✏️ 이번 과제는 재귀를 이용해 메서드 JSON.stringify를 함수의 형태로 직접 구현하는 과제였다.

 

재귀함수를 구현하는것에 어려움을 느껴서 그런지 이번 과제는 쉽지 않았다.

테스트에 그냥 통화하고 싶다면 const stringifyJSON = JSON.stringify; 이렇게 구현하면 된다. (너무나 손쉽게 해결~)

하지만 이 과제는 재귀를 공부하기 위한 것이니, 하나씩 구현해보자.

 

✨ 구현과정 & 코드

 1. 처음에는 감이 잡히지 않아서 한참을 헤매고, 시작을 못하고 있었다... 😭

 2. 배열과 객체를 제외하고는, 단순히 "" 이렇게 따옴표가 추가되는 것을 알아차리고는 조건문으로 number, string, boolean, null 일 경우 분기처리를 해주었다.

 3. 함수와 undefined인 경우는 stringify 되지 않는다. 

 4. 배열과 객체를 변환시키는 것은 낑낑거리다 레퍼런스를 참고해서 작성을 완료하였다. (그래도 접근은 비슷하게 하고 있었어...🥲)

 

function stringifyJSON(obj) {

  // Number 또는 Boolean일 경우
  if (typeof obj === "number" || typeof obj === "boolean" || obj === null) {
    return `${obj}`
  }

  // String일 경우
  if (typeof obj === "string") {
    return `"${obj}"`
  }

  // Array일 경우
  if (Array.isArray(obj)) {
    const result = [];

    // Reference 에서는 forEach로 작성
    for (let el of obj) {
      result.push(stringifyJSON(el))
    }
    return `[${result}]`
  }

  // Object일 경우
  if (typeof obj === "object") {
    let result = "";

    for (let key in obj) {
      // console.log(el, obj[el])
      let objKey = stringifyJSON(key);
      let objValue = stringifyJSON(obj[key])

      // 함수와 undefined는 stringify되지 않는다.
      if (typeof objValue === "function" || objValue === undefined) {
        continue;
      } else {
        result += `${objKey}:${objValue},`
      }
    }
    return `{${result.slice(0, result.length - 1)}}`
  }
};

 

⭐️ 과제 2. Tree UI

✏️ Tree UI 과제는 화면을 구성할 때 재귀를 사용하는 과제이다.

 

Tree UI를 구현하는데 재귀를 사용할 생각은 해본 적이 없지만(재귀함수 사용을 잘 못하니..), Tree UI를 재귀로 구현할 수 있다는 신기하고 재밌는 사실을 알게 된 과제였다. 개인적으로 위 과제보다 재밌었다.

아래와 같은 결과물이 나오면 되고, menu 배열도 아래와 같이 구성되어 있다. 

const menu = [
  {
    type: 'group',
    name: '음료',
    children: [
      {
        type: 'group',
        name: '콜드 브루',
        children: [
          { type: 'item', name: '나이트로 콜드 브루' },
          { type: 'item', name: '돌체 콜드 브루' },
          { type: 'item', name: '제주 비자림 콜드 브루' },
          { type: 'item', name: '콜드 브루' },
        ],
      },
      {
        type: 'group',
        name: '프라푸치노',
        children: [
          { type: 'item', name: '애플 쿠키 크림 프라푸치노' },
          { type: 'item', name: '더블 에스프레소 칩 프라푸치노' },
          { type: 'item', name: '모카 프라푸치노' },
          { type: 'item', name: '피스타치오 크림 프라푸치노' },
        ],
      },
      { ... } // 위와 같은 children이 여러 개 더 있는 구조
     ]
   }
   // 위와 같은 group이 여러 개 더 있는 구조
 ]

 

✨ 구현과정 & 코드

 구현과정은 주석으로 정리해두었다.

 아래 코드는 명령형(imperitive) 방식으로 구현하였고, 레퍼런스 코드를 보니 선언형 방식으로 구현한 코드도 있었다! 선언형 코드보다는 명령형으로 작성된 코드가 나는 보기에 더 편했다.

 

function createTreeView(menu, currentNode) {
  
  // menu의 객체 검사
  menu.map((el) => {
    console.log(el)
    /*
      {type: 'group', name: '음료', children: Array(5)}
      {type: 'group', name: '음식', children: Array(6)}
      {type: 'group', name: '굿즈', children: Array(3)}
      {type: 'group', name: '카드', children: Array(4)}
    */

    /** result 형태 : ul#root > li > input, span, ul > li > input, span, ul > li ...
     * ul#root 는 이미 생성되어 있음
     * li 생성
     */
    const li = document.createElement("li");
    
    /** 객체 안에 children이 있을 경우 input, span, ul 생성
     * input type="checkbox" 
     * span textContent : name (ex.음료)
     */
    // 아래 if 문이 반복되어야 함. (children이 없을 때까지)
    if (el.hasOwnProperty("children")) {
      const input = document.createElement("input");
      const span = document.createElement("span");
      const ul = document.createElement("ul");

      input.setAttribute("type", "checkbox");
      // input.type = "checkbox"
      span.textContent = el.name;

      li.append(input, span, ul);
      
      currentNode.append(li);
      /* 최초 렌더링
        <ul id="root">
          <li>
            <input type="checkbox" />
            <span>${el.name}</span>
            <ul></ul>
          </li>
        </ul>
      */

      // 재귀함수 호출
      // createTreeView(menu, currentNode)
      // menu는 추가할 것, currentNode는 추가할 곳 
      createTreeView(el.children, ul);
      
    } else {
      // console.log(`${el.name}에는 더이상 children 없음`);

      // 객체 안에 children이 없는 경우 li만 append
      currentNode.append(li);
      li.textContent = el.name;
    }
  })
}

 

---

🌙  오늘의 회고

 오늘 정규 수업시간에는 조금 널널하게 공부한게 아닐까, 라는 생각이 들어서 왠지 아쉬움이 좀 남았다. 재귀함수, 너무 어려웠지만 어제 과제를 미리 조금 풀어봤더니(다 푼건 아니고, 일부만 풀었지만...) 오늘 수업시간에 여유가 생겼다. 수업시간에 조금 여유로우려고, 과제를 미리 풀어본건 아닌데 🥲 좀 더 이해도를 높이기 위해 미리 공부를 했던 건데 어제 미리 한 과제가 오늘의 학습 집중도와 나의 플랜을 조금 방해한 것 같다는 생각도 들었다. 공부 계획과 방향을 다시 생각해보면 좋을 것 같다는 생각이 들었다.

 정규 수업 후에 스터디닭 이벤트(?)의 마지막 스터디로 “나만의 보일러 플레이트 만들기”가 진행되었는데, 리액트 프로젝트를 처음 구축하며 알아야 할 내용들에 대한 수업이 진행되어서 꽤 유익하고, 재미있었다. npm으로 배포를 하는 것도 너무 신기하고 신선했다. 내가 자주 사용하는 일종의 템플릿을 배포해서, npm으로 받아서 사용할 수 있다니?! 너무 재밌을 것 같다는 생각이 들었다. 수업을 듣다가 궁금한 점이 더 생겼는데, 그것도 좀 더 찾아보며 공부해야 겠다는 생각이 들었다. 궁금한 게 생긴다는 건 즐거운 일이다.

 최근들어 거의 쉬는날 없이 공부를 하다보니 피로가 확 쌓여감이 몸으로 느껴진다. 회복의 휴식이든, 맑은 리프레시든 뭔가 필요할 것 같다… 그러니 오늘은 열두시 전에 잠자리에 들어야겠다.

 내일은 좀 더 효율적이고, 열심히 공부해야지.