[Devlog] 태그 리스트 추가!!!

Ahnjh·2023년 1월 7일
0

Devlog

목록 보기
9/11
post-thumbnail

태그 리스트 추가

저번에 찾았던 gray-matter 를 사용해 태그리스트도 만들어줄 예정이다.

// TODO: 해당 방법은 posts 디렉토리 아래에 있는 모든 .md 파일을 불러오기 때문에 포스트 양이 늘어날수록 오래걸려서 안좋은 방법인것 같다
const fileContent = fs.readFileSync(tempDir, 'utf8');
const frontMatter = matter(fileContent).data;

frontMatter?.tags?.map(v => {
    if (files[v] === undefined) {
      files[v] = 1;
    } else {
      files[v]++;
    }
});

저번 포스트와 마찬가지로 모든 파일의 메타데이터에 접근해서 태그를 읽어오는식으로 작성했다. 하지만 TODO 에도 써놨듯이 안좋은 방법인것 같아 새로운 포스트가 업로드 되면 태그 목록만 따로 업데이트 시키는 작업이 필요할 것 같다. 물론 먼 훗날 얘기겠지만 (메뉴 리스트에도 적용 필수)

// LayoutDevlog.js
const keys = Object.keys(value);

    return (
        <div>
            {
                keys.map((v, i) => {
                    return (
                        <div key={i}>
                            {v}
                            <a>{value[v]}</a>
                        </div>
                    )
                })
            }
        </div>
    );

위와같이 프론트단에서 뿌려주게되면 아래와 같이 나오게 된다.
결과 :::

태그 이름과 갯수가 붙어있어서 알아보긴 힘들다, 다음 작업은 다시 디자인 작업이 될것같다.

profile
Clean Code & Clean Architecture

0개의 댓글