DevLogSEO JingInsight

MDX DOM 트리 파싱하기

2026년 3월 14일5분 읽기

전체 흐름

content/*.mdx → [gray-matter로 파싱] → [fs로 스캔] → content-tree.json → [페이지에서 import] → FileExplorer

gray-matter

packages/utils에 설치했고, MDX 파일 상단의 frontmatter(YAML 메타데이터)를 파싱하는 데 사용한다.

yaml

---
title: React 시작하기
date: "2025-03-05"
tags: [react, frontend]
description: React의 기본...
---

const raw = fs.readFileSync(fullPath, "utf-8"); // MDX 파일 전체 읽기
const { data } = matter(raw); // frontmatter → JS 객체
// data = { title: "React 시작하기", date: "2025-03-05", tags: [...], ... }

targetPath = "/frontend/hooks"
  → segments = ["frontend", "hooks"]
  → tree에서 name === "frontend"인 폴더 찾기 → 그 children으로 이동
  → children에서 name === "hooks"인 폴더 찾기 → 그 children 반환

tsx

import contentTree from "../../generated/content-tree.json"; // 정적 import

// 쿼리스트링에서 현재 경로 추출
const currentPath =
  new URLSearchParams(window.location.search).get("path") || "/";

// 해당 경로의 아이템 가져오기
const nodes = getItemsForPath(contentTree, currentPath);

// ContentNode[] → ExplorerItem[] 변환 후 FileExplorer에 전달
const items = toExplorerItems(nodes);

구성 요소	위치	역할
`gray-matter`	`packages/utils` 의존성	MDX frontmatter → JS 객체 파싱
`scanContentDir()`	content.ts	fs로 디렉토리 재귀 스캔 + frontmatter 파싱 → 트리 생성
`getItemsForPath()`	content.ts	트리에서 특정 경로의 아이템만 추출
`generate-content-tree.ts`	scripts/	빌드 타임에 JSON 생성

MDX DOM 트리 파싱하기

전체 흐름

gray-matter

MDX DOM 트리 파싱하기

전체 흐름

gray-matter

scanContentDir()

getItemsForPath()

빌드 스크립트

페이지에서 사용

요약

포스트 목록