2023-02-03 금요일

산·2023년 2월 3일

TIL

Today I Learned

목록 보기

66/114

📅 오늘 한 일

1. next.js 공식 튜토리얼 진행

✏️ 무엇을 배웠나

1. next.js으로 정적 페이지 생성하기

next.js 공식 문서에서 제공하는 튜토리얼을 진행했다. 앱을 만들어서 배포하는 과정을 따라했고 가비아에서 도메인을 구매해 연결해뒀다.

산의 블로그

기존에 작성했던 TIL을 모두 옮겨놨다. 튜토리얼을 하면서 next.js에 대한 일반적인 패턴과 전반적인 감을 익힐 수 있었다. 이제 코드를 다시 뜯어보면서 내용들을 다시 한 번 소화해봐야겠다.

2. node.js 모듈 fs로 마크다운 파일 조작하기

오늘 만든 블로그는 마크다운 파일을 읽어서 페이지로 만들어주는데, 기존의 작성해둔 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 파일 제목을 날짜를 붙여서 해놨기 때문에 일단 나한테 필요한 건

파일 제목 가져오기
파일 제목에서 title로 쓸 제목과 date로 쓸 날짜 추출해오기
이것을 메타데이터 형태로 만들고
원본 파일 안에 넣어주기

이 정도였기 때문에 키워드를 잡고 하나씩 구글링해서 뭘 써야 하는지 찾아봤다. 생각보다 오래 걸려서, 이럴 거면 그냥 하나하나 수정할 걸 그랬나 싶었다. 여튼 좋은 공부가 되었다!

참고

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');
});