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>
결과 :::
만들고 깃허브 페이지에 배포를 하고보니까 문제가생겼다...
해당 문제는 다음포스트에서 다루겠다.