$$config title: [gatsby] MDX를 사용하도록 데이터 변환 keywords: - IT - gatsby $$ ## Gatsby의 GraphQL 데이터 계층 자세히 살펴보기 - 데이터 계층 내부에서 정보는 노드 라는 객체에 저장 됩니다 . 노드는 데이터 계층에서 가장 작은 형태의 데이터 단위입니다. 서로 다른 소스 플러그인은 각각 고유한 속성이 있는 서로 다른 유형의 노드를 생성 - 변환기 플러그인 은 노드를 한 유형에서 다른 유형으로 변환합니다. 예를 들어, gatsby-plugin-mdx플러그인은 확장자가 있는 File 노드 .mdx를 GraphQL을 사용하여 쿼리할 수 있는 다른 필드 세트가 있는 MDX 노드로 변환합니다. 모나리자

# 블로그 게시물에 일부 MDX 콘텐츠 추가 ```js 1. 블로그/my-first-post.mdx --- title: "My First Post" date: "2021-07-23" --- This is my first blog post! Isn't it *great*? Some of my **favorite** things are: * Petting dogs * Singing * Eating potato-based foods 2. 블로그/another-post.mdx --- title: "Another Post" date: "2021-07-24" --- Here's another post! It's even better than the first one! 3. 블로그/아직어나더-포스트.mdx --- title: "Yet Another Post" date: "2021-07-25" --- Wow look at all this content. How do they do it? ``` # MDX 변환기 플러그인(및 종속성) 설치 및 구성 - npm install gatsby-plugin-mdx @mdx-js/mdx@v1 @mdx-js/react@v1 ```js 개츠비-config.js module.exports = { siteMetadata: { title: "My Super Cool Blog", }, plugins: [ "gatsby-plugin-image", "gatsby-plugin-sharp", { resolve: `gatsby-source-filesystem`, options: { name: `blog`, path: `${__dirname}/blog/`, }, }, "gatsby-plugin-mdx", ], }; ``` # MDXRenderer구성 요소를 사용하여 블로그 페이지에서 게시물 콘텐츠 렌더링 ```js src/pages/blog.js import * as React from 'react' import { graphql } from 'gatsby' import Layout from '../components/layout' const BlogPage = ({ data }) => { return ( // ... ) } export const query = graphql` query { allMdx(sort: {fields: frontmatter___date, order: DESC}) { nodes { frontmatter { date(formatString: "MMMM D, YYYY") title } id body } } } ` ``` ```js src/pages/blog.js const BlogPage = ({ data }) => { return ( { data.allMdx.nodes.map((node) => (

{node.frontmatter.title}

Posted: {node.frontmatter.date}

)) } ) } export const query = graphql` query { allMdx(sort: {fields: frontmatter___date, order: DESC}) { nodes { frontmatter { title date(formatString: "MMMM DD, YYYY") } id body } } } ` export default BlogPage ``` # localhost:8000/blog웹 브라우저에서 로 이동 합니다. 각 게시물의 제목과 날짜를 볼 수 있어야 합니다. 모나리자

# 블로그용 JSX 페이지에서 구성 요소를 사용하여 각 노드 MDXRenderer에 대한 필드 내용을 래핑 ```js src/pages/blog.js import * as React from 'react' import { graphql } from 'gatsby' import { MDXRenderer } from 'gatsby-plugin-mdx' import Layout from '../components/layout' const BlogPage = ({ data }) => { return ( { data.allMdx.nodes.map((node) => (

{node.frontmatter.title}

Posted: {node.frontmatter.date}

{node.body}