Gatsby에 markdown 설정하기

시작하기

gatsby는 정적 페이지로 제작시 많이 이용합니다. 예로 블로그나 소개 페이지 같은 경우에 용이합니다.
데이터 베이스를 연결하지 않고 markdown파일로 글을 작성 후 데이터를 불러와 화면에 뿌릴수 있습니다.
markdown파일로 작성시 재사용에 좋습니다. 그러면 gatsby에 markdown를 추가해보도록 하겠습니다.

플러그인 설치

기존에 설치되어있는 플러그인 gatsby-source-filesystem은 추가 옵션을 설정해주어야 하고,
gatsby-transformer-remark플러그인을 설치해야합니다.

npm i gatsby-transformer-remark

이후 gatsby-config.js파일을 수정합니다.

gatsby-config.js

module.exports = {
	plugins: [
        ...
	    {
			resolve: `gatsby-source-filesystem`,
			options: {
				name: `markdown-pages`,
				path: `${__dirname}/src/blogs`,
			},
		},
		`gatsby-transformer-remark`,
        ...
    ]

다음과 같이 코드를 추가합니다.

경로 생성과 페이지 생성

그 다음 markdown을 node로 실행을 해주어야 불러올수 있습니다.

gatsby-node.js파일을 수정해주도록 합니다.

gatsby-node.js

const { createFilePath } = require(`gatsby-source-filesystem`);

exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions;
  if (node.internal.type === `MarkdownRemark`) {
    const relativeFilePath = createFilePath({
      node,
      getNode,
      basePath: `blog`,
    });
    createNodeField({
      node,
      name: `slug`,
      value: `/blog${relativeFilePath}`,
    });
  }
};

const path = require(`path`);

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;
  const result = await graphql(`
    query {
      allMarkdownRemark {
        edges {
          node {
            fields {
              slug
            }
          }
        }
      }
    }
  `);
  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
    createPage({
      path: node.fields.slug,
      component: path.resolve(`./src/templates/blog.js`),
      context: {
        // Data passed to context is available
        // in page queries as GraphQL variables.
        slug: node.fields.slug,
      },
    });
  });
};

다음 코드를 설명하자면, onCreateNode는 경로 설정하는 부분으로 실제 url 입력시 인식하는 부분입니다. createPages는 onCreateNode 경로 설정된 부분에 실제로 페이지를 만들어주는 부분입니다.

md파일 생성

마크 다운 파일을 생성하도록 하겠습니다. 포맷은 다음과 같습니다.

---
title: "테스트"
slug: "/blog/test/"
date: "2020-11-18"
---

# 제목

slug 부분이 실제 라우팅되는 주소입니다.

템플릿 생성

마지막으로 템플릿을 생성해보도록 하겠습니다.

다음과 같이 템플릿을 작성합니다. 이 부분은 실제 markdown파일을 불러올 페이지입니다.

src/templates/blog.js

import React from "react";

import { graphql } from "gatsby";

export default function Blog({ path, data }) {
  console.log(data);
  const blog = data.markdownRemark;

  return (
    <div>
      <div>Hello blog</div>
      <div>
        <h1>{blog.frontmatter.title}</h1>
        <div dangerouslySetInnerHTML={{ __html: blog.html }} />
      </div>
    </div>
  );
}

export const query = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      frontmatter {
        title
      }
    }
  }
`;

드디어 기본 설정이 완료 되었습니다.

서버실행

이제 확인을 해보도록 합니다. 서버를 실행합니다.

서버가 정상적으로 실행이 되었다면 생성한 .md파일의 slug로 url을 입력해봅니다.

페이지가 자동으로 생성됩니다. 실제 파일로 생성되는것이 아니라 markdown을 html으로 변환시켜주는 것입니다.

마크다운 하나를 불러오는 방법이었습니다.
여러개를 전부 불러오려면 어떻게 해야할까요?

markdown 전부 불러오기

src/pages/index.js

import React from "react";
import { Link, graphql } from "gatsby";

export const query = graphql`
  query {
    allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
      totalCount
      edges {
        node {
          id
          frontmatter {
            title
            date(formatString: "DD MMMM, YYYY")
          }
          fields {
            slug
          }
          excerpt
        }
      }
    }
  }
`;

const IndexPage = ({ data }) => {
  const blog = data.allMarkdownRemark;
  return (
    <div>
      <h4>{blog.totalCount} blogs</h4>
      {blog.edges.map(({ node }) => {
        return (
          <div key={node.id}>
            <Link to={node.fields.slug}>{node.frontmatter.title}</Link>
          </div>
        );
      })}
    </div>
  );
};

export default WorkPage;

이것으로 gatsby에서 markdown을 추가하는 방법을 알아보았습니다.
더 자세한 튜토리얼은 공식홈페이지를 확인해주세요