[TIL] 0413

NotionClone Project 리팩토링

babel 오류

async, await를 사용하니까 regeneratorRuntime is not defined라는 오류가 났다.
babel/preset-env를 설정해놓긴 했지만 async, await은 ES8에 속해있어서 변환되지 않는 것 같다.
plugin에 plugin-transform-runtime를 추가해주었다.

  presets: ['@babel/preset-env'], // ES6 문법 트랜스파일
  plugins: [
              '@babel/plugin-proposal-object-rest-spread',
              '@babel/plugin-transform-runtime', // async-await 문법 트랜스파일
           ],

트리 구조 목록 구현

최상위 ul
       ㄴli
       ㄴli
          ㄴul
             ㄴli
             ㄴli
             ㄴli

받아온 문서 목록 데이터를 받아서 최상위 ul에 PageItem를 렌더링하면서,
문서에 자식 문서들의 데이터가 있다면 재귀적으로 하위 목록들을 렌더링시켰다.

  createChildrenPages(childrenData, parentEl) {
    const childItemContainer = createElement('ul');
    addClass(childItemContainer, ['page_list', 'visible']);

    parentEl.$node.appendChild(childItemContainer);
    this.createPageItems(childrenData, childItemContainer);
  }

  createPageItems(data, itemContainer) {
    itemContainer.innerHTML = '';

    data.length &&
      data.map(({ id, title, documents }) => {
        const pageItem = new PageItem(itemContainer, { id, title });
        const haveChildren = documents.length;
        haveChildren && this.createChildrenPages(documents, pageItem);
      });
  }

  mounted() {
    const { data } = this.state;
    const $pageList = document.getElementById('root');
    this.createPageItems(data, $pageList);
  }