[Devlog] 포스트별 시리즈 추가

Ahnjh·2023년 1월 11일
0

Devlog

목록 보기
11/11
post-thumbnail

velog 를 작성하면서 생각보다 마음에 들었던 기능이 시리즈 별로 게시글을 볼수 있는것이였다.
처음에 특정 프로젝트나 특정 기능에 따라 시리즈로 묶을수 있는게 큰 장점같았기 때문이다.

?? 근데 생각해보니까 github.io로 블로그를 만드는 가장큰이유가 메뉴 기능이 velog 에 없어서였는데 시리즈 기능을 잘 활용하면 됐었던 문제같다... 갑자기 기운이 빠지긴하지만 돌아가기엔 좀 멀리온 감이 있다...

시리즈 목록 가져오기

/api/series.js 파일을 생성해서 최근 포스트를 가져오는 로직에서 조금만 변경해줄것이다.

const getSeries = (files = {}, dir = process.cwd() + '/posts') => {
    fs.readdirSync(dir).map((v, i) => {
        const tempDir = path.join(dir, v);

        if (isDirectory(tempDir)) {
            getSeries(files, tempDir);
        } else {
            // TODO: 해당 방법은 posts 디렉토리 아래에 있는 모든 .md 파일을 불러오기 때문에 포스트 양이 늘어날수록 오래걸려서 안좋은 방법인것 같다.
            // TODO: 새로운 포스트가 업로드 되면 태그 목록만 따로 업데이트 시키는 작업이 필요할 것 같다. (메뉴 리스트에도 같은 작업 필수)
            const fileContent = fs.readFileSync(tempDir, 'utf8');
            const frontMatter = matter(fileContent).data;
            const fileStats = fs.statSync(tempDir);

            const offset = new Date().getTimezoneOffset() * 60000;
            const createDate = new Date(fileStats.birthtime - (offset)).toISOString().replace(/T/, ' ').split(" ")[0];
            const modifyDate = new Date(fileStats.mtime - (offset)).toISOString().replace(/T/, ' ').split(" ")[0];

            // TODO: 지저분해서 로직 수정해야할듯
            if (files[frontMatter?.series] === undefined) {
                files[frontMatter?.series] = {
                    count: 1,
                    file: [{
                        name: v?.split(".md")[0].replace(/\_/g,' '),
                        path: tempDir,
                        createDate,
                        modifyDate,
                        thumb: frontMatter?.thumb,
                        summary: frontMatter?.summary
                    }]
                }
            } else {
                files[frontMatter?.series].count++;
                files[frontMatter?.series].file.push({
                    name: v.split(".md")[0].replace(/\_/g,' '),
                    path: tempDir,
                    createDate,
                    modifyDate,
                    thumb: frontMatter?.thumb,
                    summary: frontMatter?.summary
                });
            }
        }
    });

    return files;
};

시간복잡도나 효율을 전혀 고려하지않고 우선 기능만 되게끔 만들어놔서 상당히 지저분하다.

결과 :::

디자인이나 구조는 velog 를 방식을 많이 참고했다.

React 시리즈에는 1개의 포스트가
test 시리즈에는 2개의 포스트가
nonb 시리즈에는 1개의 포스트가 있는것을 볼 수 있는데, 각 시리즈를 클릭하면 해당 시리즈의 포스트들을 가져와서 리스트로 뿌려주는부분을 구현해 줘야한다.

특정 시리즈의 목록 뿌려주기

api 를 따로 만들어줄까 하다가 위의 시리즈 목록에서 추가해주면 되지 않을까 싶어서 해당 부분을 추가해준것이다.

files[frontMatter?.series].file.push({
      name: v.split(".md")[0].replace(/\_/g,' '),
      path: tempDir,
	  createDate,
	  modifyDate,
      thumb: frontMatter?.thumb,
      summary: frontMatter?.summary
});

그러다보니 로직이 상당히 지저분해진것같다

// seriesDetail.js
<div className="seriesDetailList">
  {
    seriesList?.map((v, i) => {

      return (
        <Link passHref key={i} href={{pathname: "/posts" + v?.path.split("/posts")[1]}}>
          <div className="seriesDetail">
            <div className="seriesDetailSubject">
              <span className="subjectNumbering">{i + 1}.</span>
              <span className="subjectText">{v?.name}</span>
              <span className="createDate">({v?.createDate})</span>
            </div>

            <div className="thumbSummaryContainer">
              <div className="seriesDetailThumb">
                <Image priority src={`/images/devlogThumb/${v?.thumb ?? "defaultThumb.svg"}`} layout="fill" alt="thumb nail"/>
              </div>

              <div className="seriesDetailSummary">
                {v?.summary}
              </div>
            </div>
          </div>
        </Link>
      )
    })
  }
</div>

결과 :::

만들고 깃허브 페이지에 배포를 하고보니까 문제가생겼다...
해당 문제는 다음포스트에서 다루겠다.

profile
Clean Code & Clean Architecture

0개의 댓글