Gatsby Blog 만들기 - 2

winteri·2021년 8월 6일
1

1편에 이어서 다음 과정을 기록하려 한다.
앞서 만들었던 blog/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

다음으로 gatsby-plugin-mdx를 설치한다.
npm install gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react

gatsby-config.js에 다음을 추가한다.

"gatsby-plugin-mdx",

query에 allFile을 사용했던 것을 allMDX를 사용하여 게시물을 렌더링하도록 blog.js를 다음과 같이 변경한다.

import * as React from 'react'
import Layout from '../components/layout'
import { graphql } from 'gatsby'
import { MDXRenderer } from 'gatsby-plugin-mdx'

const BlogPage = ({ data }) => {
    return (
        <Layout pageTitle="최근 게시글">
            <ul>
            {
                data.allMdx.nodes.map((node) => (
                <article key={node.id}>
                    <h2>{node.frontmatter.title}</h2>
                    <p>Posted: {node.frontmatter.date}</p>
                    <MDXRenderer>
                        {node.body}
                    </MDXRenderer>
                </article>
                ))
            }
            </ul>
        </Layout>
    )
}

export const query = graphql`
    query {
        allMdx(sort: {fields: frontmatter___date, order: DESC}) {
        nodes {
            frontmatter {
            date(formatString: "MMMM D, YYYY")
            title
            }
            id
            body
        }
        }
    }
`

export default BlogPage

적용하면 다음과 같이 게시글 날짜, 제목, 게시글 내용을 불러온다.

클릭했을 때 게시글이 보여져야하므로 쿼리에 변수를 추가하여 동적으로 페이지를 이동할 수 있게합니다.

/src/pages/아래 {mdx.slug}.js파일을 생성하고 다음의 내용을 추가합니다.

import * as React from 'react'
import Layout from '../components/layout'
const BlogPost = () => {
  return (
    <Layout pageTitle="Super Cool Blog Posts">
      <p>My blog post contents will go here (eventually).</p>
    </Layout>
  )
}
export default BlogPost

localhost:8000/my-first-post로 이동하면 다음과 같이 게시글 페이지가 생성된 것을 볼 수 있다.

기존에 localhost:8000/blog에서 게시글 제목, 게시 날짜, 게시글 내용을 볼 수 있었으므로 제목을 클릭했을 때 localhost:8000/pages/blog/my-first-post로 주소를 이동할 수 있게 하기위해 src/pages아래 blog 폴더를 생성한다.
{mdx.slug}.js를 /src/pages/blog 로 옮긴다.

import * as React from 'react'
import Layout from '../../components/layout'
const BlogPost = () => {
  return (
    <Layout pageTitle="Super Cool Blog Posts">
      <p>My blog post contents will go here (eventually).</p>
    </Layout>
  )
}
export default BlogPost

기존의 blog.js도 /blog에서 관리하면 좋기 때문에 /blog로 이동하고 파일명을 index.js로 변경한다.

gatsby는 next.js기반이기 때문에 따로 라우팅의 과정이 필요하지 않고, pages 아래의 폴더 구성에 따라 라우팅이 가능하다.
아래는 /src/pages/blog/index.js이다.

import * as React from 'react'
import Layout from '../../components/layout'
import { graphql } from 'gatsby'
import { MDXRenderer } from 'gatsby-plugin-mdx'

const BlogPage = ({ data }) => {
    return (
        <Layout pageTitle="최근 게시글">
            <ul>
            {
                data.allMdx.nodes.map((node) => (
                <article key={node.id}>
                    <h2>{node.frontmatter.title}</h2>
                    <p>Posted: {node.frontmatter.date}</p>
                    <MDXRenderer>
                        {node.body}
                    </MDXRenderer>
                </article>
                ))
            }
            </ul>
        </Layout>
    )
}

export const query = graphql`
    query {
        allMdx(sort: {fields: frontmatter___date, order: DESC}) {
        nodes {
            frontmatter {
            date(formatString: "MMMM D, YYYY")
            title
            }
            id
            body
        }
        }
    }
`

export default BlogPage

그 다음 /src/pages/blog/{mdx.slug}.js를 다음과 같이 변경한다.

import * as React from 'react'
import { graphql } from 'gatsby'
import { MDXRenderer } from 'gatsby-plugin-mdx' // highlight-line
import Layout from '../../components/layout'
const BlogPost = ({ data }) => { // highlight-line
  return (
    <Layout pageTitle={data.mdx.frontmatter.title}>
      <p>{data.mdx.frontmatter.date}</p>
      <MDXRenderer>
        {data.mdx.body}
      </MDXRenderer>
    </Layout>
  )
}
export const query = graphql`
  query MyQuery($id: String) {
    mdx(id: {eq: $id}) {
      frontmatter {
        title
        date(formatString: "MMMM D, YYYY")
      }
      body
    }
  }
`
export default BlogPost

localhost:8000/blog/my-first-page에서 다음과 같이 게시글이 보이는 것을 확인할 수 있다.

이제 게시글 제목을 클릭했을 때 게시글 페이지로 넘어갈 수 있도록 index.js를 다음과 같이 수정한다.

import * as React from 'react'
import { Link, graphql } from 'gatsby'
import Layout from '../../components/layout'
const BlogPage = ({ data }) => {
  return (
    <Layout pageTitle="My Blog Posts">
      {
        data.allMdx.nodes.map(node => (
          <article key={node.id}>
            <h2>
              <Link to={`/blog/${node.slug}`}>
                {node.frontmatter.title}
              </Link>
            </h2>
            <p>Posted: {node.frontmatter.date}</p>
          </article>
        ))
      }
    </Layout>
  )
}
export const query = graphql`
  query {
    allMdx(sort: {fields: frontmatter___date, order: DESC}) {
      nodes {
        frontmatter {
          date(formatString: "MMMM D, YYYY")
          title
        }
        id
        slug
      }
    }
  }
`

localhost:8000/blog에서 다음과 같은 화면을 볼 수 있다.

제목을 클릭하면 해당게시글로 이동하는 것을 확인할 수 있다.

📌 gatsby 사이트 튜토리얼을 참고하여 글을 작성했습니다

profile
토독토독

0개의 댓글