게시글(.mdx) 파싱하기

Next.js 블로그 제작기

코드 전체 흐름

1. getPostList 함수는 getPostPaths 함수를 호출하여 MDX 파일들의 경로를 가져옵니다.
2. getPostPaths 함수는 주어진 카테고리별로 또는 전체적으로 MDX 파일 경로를 조회합니다.
3. 조회된 경로를 기반으로 각 파일을 읽어들이고 파싱하여 Post 객체로 변환합니다.

사용된 라이브러리 및 메서드 설명

1. fs (파일 시스템)

Node.js의 fs 모듈은 파일 시스템과 상호작용하는 기능을 제공합니다. 주로 파일을 읽거나 쓰고, 디렉토리 내용을 나열하는 등의 작업에 사용됩니다.

• fs.promises.readdir: 디렉토리의 내용을 비동기적으로 읽어들입니다.
• fs.promises.readFile: 파일을 비동기적으로 읽어들입니다.

2. path

Node.js의 path 모듈은 파일 및 디렉토리 경로 작업을 쉽게 할 수 있도록 도와줍니다.

• path.join: 여러 경로 조각을 하나의 경로로 결합합니다.
• path.resolve: 절대 경로를 생성합니다.
• path.basename: 파일 이름을 가져옵니다.
• path.dirname: 디렉토리 이름을 가져옵니다.

3. gray-matter

gray-matter는 Markdown 파일의 메타데이터(Front Matter)를 파싱하는 라이브러리입니다.

• matter: 파일 내용을 파싱하여 메타데이터와 콘텐츠를 분리합니다.

함수별 상세 설명

getAllPostPaths

주어진 폴더 내의 모든 MDX 파일 경로를 재귀적으로 찾습니다.

const getAllPostPaths = async (folder: string): Promise<string[]> => {
  const entries = await fs.promises.readdir(folder, { withFileTypes: true });
  const paths = entries.map(async (entry) => {
    const res = path.resolve(folder, entry.name);
    if (entry.isDirectory()) {
      return getAllPostPaths(res);
    } else if (entry.isFile() && entry.name.endsWith('.mdx')) {
      return [res];
    }
    return [];
  });

  const results = await Promise.all(paths);
  return results.flat();
};

• fs.promises.readdir로 폴더의 내용을 읽어옵니다.
• withFileTypes: true 옵션을 통해 파일 유형 정보도 함께 가져옵니다.
• 각 항목에 대해 디렉토리인 경우 재귀적으로 getAllPostPaths를 호출하여 하위 디렉토리의 MDX 파일들을 찾습니다.
• 파일인 경우 MDX 확장자를 확인하여 경로를 배열에 추가합니다.
• Promise.all로 모든 경로를 비동기적으로 처리하고 결과를 평탄화하여 반환합니다.

getCategoryPostPaths

특정 카테고리 폴더 내의 MDX 파일 경로를 찾습니다.

const getCategoryPostPaths = async (category: string): Promise<string[]> => {
  const folder = path.join(BASE_PATH, category);
  const entries = await fs.promises.readdir(folder, { withFileTypes: true });
  const paths = entries
    .filter((entry) => entry.isFile() && entry.name.endsWith('.mdx'))
    .map((entry) => path.join(folder, entry.name));

  return paths;
};

• path.join(BASE_PATH, category)로 카테고리 폴더 경로를 생성합니다.
• fs.promises.readdir로 폴더의 내용을 읽어옵니다.
• MDX 파일만 필터링하여 경로를 배열에 추가합니다.

getPostPaths

카테고리가 주어지면 해당 카테고리의 MDX 파일 경로를, 그렇지 않으면 전체 MDX 파일 경로를 반환합니다.

export const getPostPaths = async (category?: string): Promise<string[]> => {
  if (category) return getCategoryPostPaths(category);
  return getAllPostPaths(BASE_PATH);
};

• 카테고리가 주어지면 getCategoryPostPaths를 호출합니다.
• 카테고리가 없으면 getAllPostPaths를 호출합니다.

getPostList

MDX 파일 경로를 가져와 각 파일을 파싱하여 Post 객체로 변환합니다.

export const getPostList = async (category?: string): Promise<Post[]> => {
  const postPaths = await getPostPaths(category);
  const posts = await Promise.all(postPaths.map((postPath) => parsePost(postPath)));
  return posts;
};

• getPostPaths를 호출하여 파일 경로를 가져옵니다.
• 각 파일 경로에 대해 parsePost를 호출하여 파일을 파싱하고 Post 객체로 변환합니다.

parsePost

MDX 파일을 읽어 메타데이터와 콘텐츠를 파싱합니다.

const parsePost = async (postPath: string): Promise<Post> => {
  const fileContents = await fs.promises.readFile(postPath, 'utf8');
  const { data, content } = matter(fileContents);
  const category = path.basename(path.dirname(postPath));
  const slug = path.basename(postPath, '.mdx');
  const url = `/blog/${category}/${slug}`;

  return {
    url,
    category,
    slug,
    title: data.title,
    date: data.date,
    desc: data.desc,
    thumbnail: data.thumbnail,
    content,
  };
};

• fs.promises.readFile로 파일 내용을 읽어옵니다.
• matter로 메타데이터와 콘텐츠를 파싱합니다.
• 파일 경로에서 카테고리와 슬러그를 추출합니다.
• Post 객체를 생성하여 반환합니다.

이 과정을 통해 getPostList 함수가 특정 카테고리의 포스트 경로를 반환하고, 각 포스트를 파싱하여 리스트를 반환하는 것을 알 수 있습니다.