UOM:RE

# TIL-20210323

# vuepress의 sidebar 자동화

다른 사람들은 vuepress로 github pages를 어떻게 운영하나 구경을 다녔다.
그 과정에서 누군가 sidebar를 자동화 해서 사용하는걸 봤다.

그 분은 다른 라이브러리에서 dirTree를 만들어 적용하는 방식을 이용했다.
나는 nodejs에서 fs를 통해 directory구조를 읽어와서 트리를 만들어 보기로 했다.

# 기존 방식

vuepress에서 sidebar를 설정하는 방식은 config.js를 통해서 진행한다.

// docs/.vuepress/config.js
sidebar: [
      {
        title: 'TIL',   // required
        path: '/TIL/',      // optional, link of the title, which should be an absolute path and must exist
        sidebarDepth: 1,    // optional, defaults to 1
        children: [
          // ...
          'TIL-20210320',
          'TIL-20210321',
          'TIL-20210322',
          // ...
        ]
      },
    ],

내가 생각하는 블로그의 파일 구조는

  1. title은 항상 메인 디렉토리 이름
  2. path도 그래서 항상 일정함
  3. children은 그 하위에 작성된 *.md 파일들

# 적용 방식

다음과 같은 순서로 구현해 보기로 했다.

  1. 먼저 파일 구조를 title을 기반으로 읽어 온다.
  2. 파일 구조 안에서 README.md는 제외하고 리스트를 생성한다.
  3. 파일이 아니라면 추가하지 않는다. (src같은걸 나중에 넣을지도 모른다고 생각했다.)
  • 구현 코드
// docs/.vuepress/dirTree.js
const fs = require('fs');
const defaultPath = './docs'

const dirTree =  (dirname) => {
  let path = defaultPath + `/${dirname}` 
  let list = fs.readdirSync(path)
  let result = [];  
  for (let fileName of list) {
    let stat = fs.statSync(path + `/${fileName}`)
    if (stat.isFile() && !/^README/.test(fileName)) {
      result.push(`/${dirname}/${fileName}`)
    }
  }
  return result
}

module.exports = dirTree

// config.js
{
  // ... 
  children: dirTree('TIL')
}

# 구현하면서 충돌한 문제

  1. fs모듈의 비동기 처리 result라는 결과는 항상 파일의 구조를 읽고나서,
    해당 파일이 내가 필요한 파일인지 아닌지 확인해야지만 가능하다.

때문에 fs모듈이 비동기로 처리되면서 정확한 결과가 나오지 않는 경우가 있었다.

async / await을 통해 비동기처리를 변경하려고 fs.promises를 설정하여 fs모듈을 promise로 변환해 사용도 했었다. 그렇게 되니까 dirTree자체가 비동기 함수가 되면서 config에서 매번 설정값을 만들어 내는게 어려웠다.

그래서 모든 메소드를 동기적으로 실행하도록 sync메소드를 사용해서 처리했다.

# 결론

비동기 처리는 생각보다 더 복잡하다.

← TIL-20210324 →