next.js 공식 문서에서 제공하는 튜토리얼을 진행했다. 앱을 만들어서 배포하는 과정을 따라했고 가비아에서 도메인을 구매해 연결해뒀다.
기존에 작성했던 TIL을 모두 옮겨놨다. 튜토리얼을 하면서 next.js에 대한 일반적인 패턴과 전반적인 감을 익힐 수 있었다. 이제 코드를 다시 뜯어보면서 내용들을 다시 한 번 소화해봐야겠다.
오늘 만든 블로그는 마크다운 파일을 읽어서 페이지로 만들어주는데, 기존의 작성해둔 TIL을 이 로직에 만족하게끔 다시 가공을 해줘야 했다.
export function getSortedPostsData() {
// Get file names under /posts
const fileNames = fs.readdirSync(postsDirectory);
const allPostsData = fileNames.map((fileName) => {
// Remove ".md" from file name to get id
const id = fileName.replace(/\.md$/, '');
// Read markdown file as string
const fullPath = path.join(postsDirectory, fileName);
const fileContents = fs.readFileSync(fullPath, 'utf8');
// Use gray-matter to parse the post metadata section
const matterResult = matter(fileContents);
아래 YAML이라고 부르는 메타데이터를 TIL md 파일마다 전부 넣어줘야 했는데, 100개에 육박하는 파일을 하나하나 열어서 넣어주고 저장하는 게 고역이었다.
---
title: '001 개발공부 2022-10-31 월요일'
date: '2022-10-31'
---
10개 정도 했을 때, 현타를 느끼고 방법이 없나 생각해보니 블로그 만들 때 사용했던 node.js의 fs 모듈을 사용하면 가능할 것 같아 구글링을 시작했다.
node.js 문서 처음 열어봤는데 너무 무섭게 생겨서 껐다.
TIL 파일 제목을 날짜를 붙여서 해놨기 때문에 일단 나한테 필요한 건
이 정도였기 때문에 키워드를 잡고 하나씩 구글링해서 뭘 써야 하는지 찾아봤다. 생각보다 오래 걸려서, 이럴 거면 그냥 하나하나 수정할 걸 그랬나 싶었다. 여튼 좋은 공부가 되었다!
참고
const fs = require('fs');
const path = require('path');
// 마크다운 파일이 있는 디렉토리 경로 저장
const targetPath = '/Users/jinsan/Desktop/10.99 TIL&WIL/mymd';
// 디렉토리에 있는 파일 목록 가져오기
const myFiles = fs.readdirSync(targetPath);
// 각 파일을 반복해서 로직 적용하기
myFiles.forEach((fileName) => {
// 파일 경로
const filePath = path.join(targetPath, fileName);
// 마크다운 파일 내용을 읽는다
const content = fs.readFileSync(filePath, 'utf-8');
// 날짜 추출
const targetName = `${fileName}`;
const regex = /\d{4}-\d{2}-\d{2}/;
const date = targetName.match(regex);
// YAML 메타데이터
const yaml = `
---
title: '${fileName.replace('.md', '')}'
date: '${date}'
---
`;
// YAML 메타데이터와 마크다운 내용을 합친다
// \n은 줄바꿈을 뜻하는 이스케이프 문자임
const newContent = `${yaml}\n` + content;
// 파일에 내용을 덮어쓰기
fs.writeFileSync(filePath, newContent, 'utf-8');
});
정규표현식도 구글링 하면서 찾았고 regexr.com 에서 시각적으로 테스트해볼 수 있었다.
원본 파일들을 가져와서 node.js 환경에서 해당 코드를 실행시켜주니까 모든 파일들에 아래 이미지처럼 전부 메타데이터가 들어갔다!
너무 신기하고 대견했다. 잘했음! 가공이 끝난 파일들을 적용한 블로그는 이렇게 생겼다.
기본에 넣은 이미지가 안 보이고 코드 블락도 안 들어가서 여러가지로 고칠 부분이 많다. 이거 하나 만들어놓으니까 공부 더 해서 얼른 블로그 완성도를 높이고 싶어진다. 너무 재밌어!!
후후
진산님 찐 개발자가 되셨군요!!!! 파일 입출력 작업도 마스터 하시다니 👏 대단합니다