[Next.js] 마트다운 프론트매터. gray-matter

서론

이전 내용

[마크다운 불려오기 fetch]
[마크다운 파싱 markdown-to-jsx]
[마크다운 디자인 typography]
[마크다운 코드 강조 prism.js]

이번 내용

현재는 blogTemp의 임시 변수에
일기에 대한 임시 데이터을 저장했다.

Database에 테이블이 있고, 서버를 만들어서 md파일을 전달하는 것이 일반적인 방식일 것 같았다.

하지만 코드를 만들다 보니..
일기 정보 데이터를 출력하기 위해서
CardList에서 읽었던 데이터를
Post에서 한번 더 읽어야 한다.

그래서 markdown에 일기 정보를 저장할 방법을 모색했다.

Front-matter

Markdown에 front matter 작성

영어의 뜻은 책의 전문이다.
마크다운에서는
시작부분에 --- 으로 사용할 수 있다.

public폴더에 있는 md파일을 수정했다.

---
title: "제목 test 1"
slug: "test1"
date: 2024-01-01 23:59:59
---

# h1 타이틀
This is a test blog texture.....

## h2 타이틀

```js
const num = 1;
```

gray-matter

front-matter를 파싱하는 라이브러리는 많다.
나는 gray-matter를 사용했다.

이유는 단순하게...
다른 사람들의 소개문을 보고
편리해 보여서이다.
[npm gray-matter 설명문]

gray-matter 설치

npm install gray-matter

gray-matter 사용

gray-matter 불려오고.. 파싱할 데이터를 전달하면된다.

// .\app\blog\[slug]\page.js - matter파싱 부분

import matter from "gray-matter";
// ...
const postRes = await fetch(`http://localhost:3000/${slug}.md`);
const data = await test.text();
const parsedData = matter(data);
const frontMatter = parsedData.data;
const content = parsedData.content;

Markdown 파일 불려오고,
matter함수로 데이터 전달.
결과는 객체을 받을 수 있다.
front-matter의 key는 data.
글의 key는 content이다.

데이터 적용

페이지 컴포넌트에서
수정이 필요한 부분을 수정하고
제목 <h1>을 추가했다.

// .\app\blog\[slug]\page.js

import Markdown from "markdown-to-jsx";
import matter from "gray-matter";

import PrismLoader from "../../../components/PrismLoader";

export default async function Post(props) {
  const slug = props.params.slug;
  const postRes = await fetch(`http://localhost:3000/${slug}.md`);
  const data = await test.text();
  const parsedData = matter(data);
  const frontMatter = parsedData.data;
  const content = parsedData.content;
  const options = {};
  const mdClass = "prose prose-stone";

  return (
    <>
      <PrismLoader />
      <h1>{frontMatter.title}</h1>
      <p>{frontMatter.date}</p>
      <Markdown className={mdClass} options={options}>
        {content}
      </Markdown>;
    </>
  );
}

<Markdown>컴포넌트에 원래 data를 content로 수정했다.
<h1> 제목과 날짜를 추가했다.

결과

마크다운에 프론트매타 추가

• ---으로 감싼 데이터를 md파일에 추가한다

마크다운 프론트매타 읽기

• gray-matter를 사용
• npm으로 설치
• gray-matter에서 matter함수 가져오기
• matter함수 호출, 읽은 md 내용 인자로 전달
• matter의 반환 값은 객체
• 반환 객체 key data는 front-matter
• 반환 객체 key content는 body(글)
• 반환된 내용을 페이지 return 값에 적절히 사용

잘 출력된다.

처음에는 사용 이유가 데이터를 중복해서 호출하지 않기 위해서 이었지만, 잘 사용하면 아주 유용하게 응용이 가능할 것 같다.

( boolean 값을 추가해서 공개/비공개를 만들거나.. 댓글기능이 있으면 댓글 가능 여부 등도 추가할 수 있을 것 같다 )