MDX 읽기 시간을 추출하기 위한 remark 플러그인 생성

Remark는 마크다운 콘텐츠를 변환하기 위해 사용자 지정 플러그인을 만들 수 있는 강력한 마크다운 프로세서입니다. remark로 마크다운 파일을 파싱할 때 콘텐츠는 플러그인을 사용하여 조작할 수 있는 추상 구문 트리(AST)로 변환됩니다.

더 나은 사용자 경험을 위해 일반적으로 기사에 예상 읽기 시간을 표시합니다. 이 가이드에서는 MDX 파일에서 읽기 시간 데이터를 추출하고 MDX 파일을 ES 모듈로 가져올 때 사용할 수 있도록 하는 remark 플러그인을 생성합니다.

시작하기#

MDX 파일을 만들어 봅시다:

Vite를 번들러로 사용하고 있다고 가정하면, 공식 @mdx-js/rollup 플러그인을 사용하여 MDX 파일을 변환할 수 있으며, 이로 인해 MDX 파일을 ES 모듈로 가져올 수 있습니다. Vite 구성은 다음과 같습니다:

MDX 파일을 ES 모듈로 가져오면, 콘텐츠는 컴파일된 JSX가 포함된 default 속성을 가진 객체가 됩니다. 예를 들어:

다음과 같이 표시됩니다:

위와 같은 출력을 얻었다면, remark 플러그인 생성을 위한 준비가 완료되었습니다.

remark 플러그인 생성#

목표를 달성하기 위해 할 일을 확인해 봅시다:

1. 읽기 시간 계산을 위해 MDX 콘텐츠를 텍스트로 추출합니다.
2. 읽기 시간을 계산합니다.
3. 읽기 시간 데이터를 MDX 콘텐츠에 첨부하여, MDX 파일을 ES 모듈로 가져올 때 사용할 수 있도록 합니다.

다행히도, 읽기 시간 계산과 기본 AST 작업에 도움이 되는 라이브러리들이 이미 존재합니다:

• reading-time은 읽기 시간을 계산합니다.
• mdast-util-to-string은 MDX AST를 텍스트로 변환합니다.
• estree-util-value-to-estree는 읽기 시간 데이터를 ESTree 노드로 변환합니다.

TypeScript를 사용하는 경우, 타입 정의를 위해 다음 패키지를 설치할 수도 있습니다:

• @types/mdast는 MDX 루트 노드 타입 정의를 제공합니다.
• unified는 플러그인 타입 정의를 제공합니다.

패키지를 설치한 후, 플러그인을 생성할 수 있습니다:

플러그인은 단순히 MDX 콘텐츠를 텍스트로 추출하고 읽기 시간을 계산합니다. 이제 읽기 시간 데이터를 MDX 콘텐츠에 첨부해야 합니다. 이것은 간단하지 않지만, 다른 훌륭한 라이브러리인 remark-mdx-frontmatter를 살펴보면 이를 수행할 수 있는 방법을 찾을 수 있습니다:

위의 코드에서 type: 'mdxjsEsm'에 주목하세요. 이는 MDX ESM을 직렬화하기 위해 사용되는 노드 타입입니다. 위 코드는 readingTime이라는 이름으로 MDX 콘텐츠에 읽기 시간 데이터를 첨부하며, MDX 파일을 ES 모듈로 가져올 때 다음과 같은 출력이 생성됩니다:

읽기 시간 데이터의 이름을 변경해야 하는 경우, Identifier 노드의 name 속성을 업데이트하면 됩니다.

TypeScript 지원#

플러그인을 더 개발자 친화적으로 만들기 위해 마지막으로 MDX 타입 정의를 증가시킬 수 있습니다:

이제 MDX 파일을 가져올 때 TypeScript는 readingTime 속성을 인식합니다:

결론#

이 가이드가 MDX 파일을 다루는 데 있어 더 나은 경험을 제공하길 바랍니다. 이 remark 플러그인을 사용하여 읽기 시간 데이터를 직접 사용할 수 있고, 더 나아가 ESM 트리 셰이킹을 활용하여 성능을 향상시킬 수 있습니다.