[TIL] 0413

NotionClone Project Refactoring

babelエラー

async、awaitを使用してregeneratorRuntime is not definedのエラーが発生しました.babel/preset-envが設置されていますが、async、awaitはES 8なので、変換されていないようです.
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

受信したドキュメントリストデータは、PageItemをトップレベルのulに表示します.
ドキュメントにサブドキュメントのデータがある場合は、サブリストが再帰的にレンダリングされます.

  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);
  }