📝 gray-matter: Markdown 파일의 메타데이터를 다루는 마법 도구

📝 gray-matter: Markdown 파일의 메타데이터를 다루는 마법 도구

 

Markdown을 활용해 블로그나 정적 사이트를 만든다면, 메타데이터 관리가 중요한 부분 중 하나인데요. 여기서 등장하는 게 바로 gray-matter입니다. gray-matter는 Markdown 파일의 **프론트매터(frontmatter)**를 읽고, 이를 파싱(parse)하여 JSON 형태로 사용할 수 있게 해주는 멋진 도구예요. 이번 글에서는 gray-matter가 무엇인지, 어떻게 사용되는지, 그리고 실무에서 어떻게 활용할 수 있는지 살펴보겠습니다!

 

1. gray-matter란?

 

✨ “Markdown 파일에서 메타데이터를 추출해주는 라이브러리”

 

gray-matter는 **Markdown 파일 상단에 작성된 메타데이터(frontmatter)**를 JavaScript 객체로 변환해주는 역할을 합니다. 일반적으로 프론트매터는 YAML, JSON 또는 기타 형식으로 작성되며, 제목, 날짜, 태그와 같은 정보를 포함합니다.

 

📋 왜 필요할까?

1. 블로그나 CMS의 메타데이터 관리:

• 글 제목, 작성 날짜, 태그 등을 Markdown 파일에 추가해 관리.

2. 정적 사이트 생성기에서 콘텐츠 데이터 파싱:

• Gatsby, Next.js, Hugo와 같은 툴과 결합.

3. 유연한 데이터 구조 제공:

• YAML, JSON, TOML 등 다양한 형식 지원.

 

2. 프론트매터(Frontmatter)란?

 

프론트매터는 Markdown 파일의 상단에 추가되는 메타데이터 블록입니다. 일반적으로 YAML 형식으로 작성됩니다.

 

🖋️ YAML 기반 프론트매터 예시

 

---

title: "gray-matter란 무엇인가?"

date: "2025-01-17"

tags:

  - JavaScript

  - Markdown

summary: "gray-matter를 활용해 Markdown의 메타데이터를 관리하는 방법을 배워봅시다."

---

# gray-matter를 활용해 메타데이터 추출하기

이 글은 gray-matter를 소개합니다.

 

🖋️ JSON 기반 프론트매터 예시

 

{

  "title": "gray-matter란 무엇인가?",

  "date": "2025-01-17",

  "tags": ["JavaScript", "Markdown"],

  "summary": "gray-matter를 활용해 Markdown의 메타데이터를 관리하는 방법을 배워봅시다."

}

---

# gray-matter를 활용해 메타데이터 추출하기

이 글은 gray-matter를 소개합니다.

 

3. gray-matter 설치 및 기본 사용법

 

🛠️ 설치

 

npm install gray-matter

 

📚 사용법

 

Markdown 파일에서 메타데이터와 본문을 분리하는 기본 예제입니다.

 

Markdown 파일 (example.md)

 

---

title: "gray-matter 시작하기"

author: "최승은"

date: "2025-01-17"

tags:

  - JavaScript

  - Markdown

---

Markdown에서 메타데이터를 분리하고 싶으신가요? gray-matter가 도와드릴게요!

 

JavaScript 코드

 

const fs = require('fs');

const matter = require('gray-matter');

 

// Markdown 파일 읽기

const fileContent = fs.readFileSync('./example.md', 'utf8');

 

// gray-matter로 파싱

const parsed = matter(fileContent);

 

console.log(parsed.data); // 메타데이터

console.log(parsed.content); // Markdown 본문

 

출력 결과

 

// parsed.data

{

  title: "gray-matter 시작하기",

  author: "최승은",

  date: "2025-01-17",

  tags: ["JavaScript", "Markdown"]

}

 

// parsed.content

"Markdown에서 메타데이터를 분리하고 싶으신가요? gray-matter가 도와드릴게요!"

 

4. gray-matter의 주요 기능

 

🔍 1) 메타데이터만 추출

 

특정 상황에서는 Markdown의 본문을 무시하고 메타데이터만 필요할 때가 있습니다.

 

const { data } = matter(fileContent);

console.log(data); // 메타데이터만 출력

 

🔧 2) 다양한 프론트매터 형식 지원

 

gray-matter는 YAML뿐 아니라 JSON, TOML 형식도 지원합니다.

 

const { data } = matter(fileContent, {

  engines: {

    toml: require('toml'),

  },

});

 

🖊️ 3) 프론트매터를 동적으로 작성

 

Markdown 파일을 생성하거나 업데이트할 때 유용합니다.

 

const updatedContent = matter.stringify('본문 내용', {

  title: '새로운 글',

  author: '최승은',

  date: '2025-01-17',

});

console.log(updatedContent);

 

출력 결과:

 

---

title: "새로운 글"

author: "최승은"

date: "2025-01-17"

---

본문 내용

 

5. gray-matter 실전 활용 예제

 

🎯 Next.js에서 블로그 데이터 처리

 

gray-matter는 Next.js와 같은 정적 사이트 생성기에서 자주 사용됩니다.

 

import fs from 'fs';

import path from 'path';

import matter from 'gray-matter';

 

// Markdown 파일 읽기

export const getPosts = () => {

  const files = fs.readdirSync(path.join('posts'));

 

  return files.map((filename) => {

    const fileContent = fs.readFileSync(path.join('posts', filename), 'utf8');

    const { data, content } = matter(fileContent);

 

    return {

      metadata: data,

      content,

    };

  });

};

 

6. gray-matter와 함께 쓰이는 도구

1. Markdown-it: Markdown 파싱.

2. remark/rehype: Markdown과 HTML 처리.

3. Next.js, Gatsby: 정적 사이트 생성기.

4. Contentlayer: CMS 데이터를 타입세이프하게 관리.

 

7. gray-matter의 장단점

 

👍 장점

• 다양한 프론트매터 형식 지원.

• 간단한 API로 메타데이터 추출.

• Markdown 기반 프로젝트와 높은 호환성.

 

👎 단점

• 메타데이터와 본문이 명확히 구분되지 않으면 에러 발생 가능.

• 매우 큰 파일에서 성능 이슈 발생 가능.

 

결론

 

gray-matter는 Markdown의 메타데이터를 처리하기 위한 강력한 도구로, 블로그, 문서화, 정적 사이트 등 다양한 프로젝트에서 유용하게 활용할 수 있습니다.

Markdown 파일의 프론트매터를 효율적으로 관리하고 싶다면, gray-matter를 활용해보세요.

 

🌷전설의 개발자가 되어봅시당!🌷