[tool] config sidebar 로직 수정

[Kyounghwan01]

요약

매번 config sidebar에서 conflict이 나는 것이 비효율적인것 같아서 하드코딩 제거하고 로직으로 바꿔보았습니다.

1. 파일은 있지만 아직 배포전인 파일은 뒤에 waiting을 붙이면 build에 포함되지 않습니다 (ex. class-waiting.md)

• 게시글의 metaData에 isDeploy를 true로 넣으면 게시들이 등록됩니다.

2. 원래는 아래와 같이 variable -> string -> object 순서였는데, 하드코딩된 게시글의 순서를 로직으로 바꾸다보니 폴더의 순서대로 빌드가 되어 아래와 같은 순서로 게시글의 순서가 정해졌습니다. 게시글의 순서가 상관이 없다면 무시하고 진행되어도 되겠지만, 게시글의 순서가 중요하다면 어떻게 수정진행해야할지 의견주시면 감사하겠습니다. (fs로 md파일의 내부에 접근하는 것은 불가능한 것 같아서 md파일을 array-1.md , function-2.md 이렇게 네이밍을 하면 원하는 순서대로 게시글을 나열 할 수 있을 것 같은데 이것도 파일 이름이 너무 지저분해지는 것 같고 고민이되네요..)

• 기존 게시글과 동일한 순서로 나오도록 수정하였습니다.

테스트로 빌드된 환경 링크 남겨드리겠습니다.

https://kyounghwan01.github.io/vue-camp/

[padosum]

.md 파일의 frontmatter에 순번을 추가해서 정렬하는 것은 어떨까요?? yaml-front-matter 라이브러리로 frontmatter 데이터를 가져올 수 있어요

---
title: Array
order: 1
---

[Kyounghwan01]

.md 파일의 frontmatter에 순번을 추가해서 정렬하는 것은 어떨까요?? yaml-front-matter 라이브러리로 frontmatter 데이터를 가져올 수 있어요

---
title: Array
order: 1
---

감사합니다!! 알려주신것 바탕으로 다시 작업해볼께요

[jm-chong]

코드한번 다듬어 봤습니다.

getBuild.js

const fs = require('fs');
const yamlFront = require('yaml-front-matter');

function getChildrenFiles(dir) {
  const children = fs.readdirSync(dir)
    .filter(file => file.includes(".md"))
    .reduce((acc,cur) => {
      const fileData = fs.readFileSync(`${dir}/${file}`);
      const {isDeploy, order} = yamlFront.loadFront(fileData);

      if(isDeploy) {
        acc.push({ file: file.split('.')[0], order })
      }
      return acc;
    }, [])
    .sort((prev, next) => (prev.order > next.order ? 1 : -1))
    .map(({ file }) => `/${data.dirName}/${file}`);

  return children;
}

function getBuild(data) {
  const {title, collapsable, dirName} = data;

  return {
    title,
    collapsable,
    children: getChildrenFiles(`./docs/${data.dirName}`)
  }
}

module.exports = getBuild;

[Kyounghwan01]

@jm-chong 좋은 코드인 것 같네요! 에러나는 부분 수정하고 푸시했습니다~

[Kyounghwan01]

1. 재배치에 관한 방법론
2. 필수값 없을 때 빌드 테스트
3. 문서작성 가이드에 필수값 추가 가이드

[Seungwoo321]

이번 회고 이후 해당 pr에 관심 생겨서 고민 + 구글링 해봤으나 좋은 사례를 찾기가 어렵네요.

1번 사항에 대해 생각나는 의견을 적어보자면 확실한 해결 방법은 아니지만 순서에 대한 정보를 모든문서에 각각 기록 하지말고 디렉토리 단위로 묶어서 문서의 각 디렉토리 아래에 README.md 나 config.js (?) sideBar.js (?) 같은 파일을 두고 getBuild.js 는 해당 파일을 참조하면 어떨까합니다. :smile:

[Kyounghwan01]

이번 회고 이후 해당 pr에 관심 생겨서 고민 + 구글링 해봤으나 좋은 사례를 찾기가 어렵네요.

1번 사항에 대해 생각나는 의견을 적어보자면 확실한 해결 방법은 아니지만 순서에 대한 정보를 모든문서에 각각 기록 하지말고 디렉토리 단위로 묶어서 문서의 각 디렉토리 아래에 README.md 나 config.js (?) sideBar.js (?) 같은 파일을 두고 getBuild.js 는 해당 파일을 참조하면 어떨까합니다. 😄

~의견감사합니다! 디렉토리단위의 파일의 순서를 알아보는 것이 최우선이니 말씀하신 방향이 맞는것 같네요. 의견 주신 것 참조해서 개선해보겠습니다 👍~

제가 잘못 생각했네요. 승우님께서 말씀하신대로 디렉토리(예를들면 es6)를 만들고 그 안에 README.md파일을 만들면 es6 디렉토리에 있는 문서(const-let, arrow-function ...)들의 순서가 들어갈 것이고, 이 디렉토리에 문서를 추가하는 사람은 README.md에 순서를 넣어야하기 때문에 필연적으로 수정 작업이 들어갈 것일텐데 만약 동시에 다른 사람도 es6 디렉토리에 문서를 추가하면 README.md에도 동일하게 수정작업을 하고 결론적으로 confilct이 나기 때문에 현재 우리 프로젝트에 config.js에서 conflict이 나는 상황과 다르지 않게 됩니다.

파일이 추가되었을 때, 다른 곳에 수정을 하지 않도록 만드는것이 관건인거 같아요

[Seungwoo321]

이번 회고 이후 해당 pr에 관심 생겨서 고민 + 구글링 해봤으나 좋은 사례를 찾기가 어렵네요. 1번 사항에 대해 생각나는 의견을 적어보자면 확실한 해결 방법은 아니지만 순서에 대한 정보를 모든문서에 각각 기록 하지말고 디렉토리 단위로 묶어서 문서의 각 디렉토리 아래에 README.md 나 config.js (?) sideBar.js (?) 같은 파일을 두고 getBuild.js 는 해당 파일을 참조하면 어떨까합니다. 😄

~의견감사합니다! 디렉토리단위의 파일의 순서를 알아보는 것이 최우선이니 말씀하신 방향이 맞는것 같네요. 의견 주신 것 참조해서 개선해보겠습니다 👍~

제가 잘못 생각했네요. 승우님께서 말씀하신대로 디렉토리(예를들면 es6)를 만들고 그 안에 README.md파일을 만들면 es6 디렉토리에 있는 문서(const-let, arrow-function ...)들의 순서가 들어갈 것이고, 이 디렉토리에 문서를 추가하는 사람은 README.md에 순서를 넣어야하기 때문에 필연적으로 수정 작업이 들어갈 것일텐데 만약 동시에 다른 사람도 es6 디렉토리에 문서를 추가하면 README.md에도 동일하게 수정작업을 하고 결론적으로 confilct이 나기 때문에 현재 우리 프로젝트에 config.js에서 conflict이 나는 상황과 다르지 않게 됩니다.

파일이 추가되었을 때, 다른 곳에 수정을 하지 않도록 만드는것이 관건인거 같아요

저도 동의합니다 ㅎㅎ

일단 저의 생각은 어떤 방법이든 동시에 수정하게되면 필연적으로 conflict는 발생하기 때문에 이를 배포단계에서 최소화 하기 위한 방법으로는 자동화보다는 pr 에서 config.js 를 포함해 conflict이 난 파일이 있는지를 잘 확인해서 merge를 해야되고

master 가 업데이트 된 경우 기존 반영되지 않은 pr에 conflict 난 파일이 생기면 pr 요청하신분이 이 부분까지 수정 반영 해주거나 혹은 conflict 난 파일이 있는 pr을 merge 하는 경우는 이를 작업하시는 분이 해결을 (직접 하든 도움을 요청하든) 해야 된다고 봅니다.

요약하면 “conflict 는 피할 수 없을 것이다”

그룹단위로 순서에 대한 정보를 묶어두는것에 대한 의견은 모든 문서에 순서가 있을 경우 새로운 문서가 끝이 아니라 중간에 투입되거나 기존 문서가 중간에서 재배치 될 경우 기존 번호를 하나씩 뒤로 미뤄야 되서 여러 파일에 수정이 생기기 때문에 이 부분에 대해서만 해결방안이 될까 싶어서 쓴 의견이었습니다. 😄

경환님 말씀대로 자동화 관점까지 포함해서 조금 더 고민 해보겠습니다 👍

[padosum]

승우님 의견처럼 디렉토리 단위로 순서를 묶고 order 값에 대해서는 1씩 증가 말고 10이나 100 정도로 차이 나게 해두는 것은 어떨까요??

const-let      // order: 1 
새로 추가될 문서 1   // order: 50
arrow-function   // order: 100 

const-let      // order: 1 
새로 추가될 문서 1   // order: 50
새로 추가될 문서 2   // order: 60
arrow-function   // order: 100 

중간에 추가되더라도 뒤 번호가 밀리지 않도록... 그런데 조금 지저분할 수도 있을 것 같아요...🤔

[Kyounghwan01]

아래 이유로 해당 pr을 종료합니다

• 개선 후가 개선 전보다 컨트리뷰터분들에게 혼동을 줄 여지가 많음
  • 현재는 config.js만 고치면 되지만 개선 후에는 작업한 md에 순서를 알기 위해 다른 md도 파악 해야함
  • 컨트리뷰션을 쉽게 하여 여러 사람들이 유입 되게 해야 하는 프로젝트 특성상 기여를 위해 추가 작업이 있으면 오히려 불편함
• 휴먼에러를 불러 올 요소가 많음 (순서 잘못 기입하여 글 목록 혼란 예상)