Vite import.meta.glob 으로 마크다운 콘텐츠 로더 만들기

이 사이트의 블로그와 기술메모는 gray-matter 같은 Node 전용 frontmatter 파서를 쓰지 않습니다. 그런 라이브러리는 내부적으로 Node의 Buffer를 참조하는 경우가 많아서, 브라우저 번들에 그대로 포함되면 하이드레이션 시점에 Buffer is not defined 류의 오류로 이어지기 쉽기 때문입니다. 대신 Vite의 import.meta.glob으로 마크다운 파일들을 빌드 시점에 문자열로 수집하고, 정규식 몇 줄로 만든 최소 파서로 frontmatter만 뽑아냅니다.

const rawFilesByLocale = {
  ko: import.meta.glob<string>('/markdown/ko/*.md', {
    query: '?raw',
    import: 'default',
    eager: true,
  }),
  en: import.meta.glob<string>('/markdown/en/*.md', {
    query: '?raw',
    import: 'default',
    eager: true,
  }),
}

eager: true를 주면 별도의 동적 import 없이 빌드 시점에 모든 파일 내용이 즉시 객체로 채워지므로, 정적 사이트처럼 런타임에 파일 시스템 접근이 불가능한 환경에서도 문제없이 동작합니다.

콘텐츠 로더는 특정 콘텐츠 종류를 몰라야 재사용할 수 있다.

이 로더를 블로그 전용으로 하드코딩해두면, 성격이 다른 콘텐츠(예: 기술메모)를 추가할 때마다 같은 파싱·병합 로직을 통째로 복제하게 됩니다. 그래서 실제로는 글롭 경로와 구조화 글 배열만 인자로 받는 createContentSource() 팩토리로 분리해두고, 블로그와 기술메모 각각에서 자신만의 마크다운 폴더 경로로 한 번씩 호출하는 방식을 택했습니다. import.meta.glob의 글롭 패턴은 호출부에서 정적 문자열이어야 한다는 제약이 있어서, 글롭 호출 자체는 각 콘텐츠 소스 파일에 남겨두고 그 결과만 공용 팩토리로 넘기는 구조가 됩니다.