개츠비 튜토리얼 markdown(.md) 만들기

gatsby는 많은 사람들이 개인 블로그로 많이 쓰는 정적 웹 생성기 입니다. 그런데 컴포넌트에 직접적으로 글을 작성하지 않고. .md파일을 사용해서, html을 자동으로 만들어주도록 합시다.

/src/pages/sweet-pandas-eating-sweets.md

---
title : "SWEET Pandas Eating Sweets"
date : "2020-08-07"
---

Pandas are really sweet.

Here's a video of a panda eating sweets

<iframe width="560" height="315" src="https://www.youtube.com/embed/4n0xNbfJLR8" frameborder="0" allowfullscreen></iframe>

이런식으로 작성 해주면 .md 파일은 완성이 된 겁니다. 앞서 플러그인으로 넣어놨던 remark 플러그인을 이용하면, graphql 에 field에 allremark 필드에 넘어가게 됩니다.

그러고 루트폴더에 gatsby-node.js에 아래와 같이 환경을 설정 해주게 되면
slug - 파일이름으로된 경로가 생기고,
page가 자동으로 생성이 됩니다.

{
    "data": {
        "allMarkdownRemark": {
            "edges": [
                {
                    "node": {
                        "fields": {
                            "slug": "/sweet-panda/"
                        }
                    }
                },
                {
                    "node": {
                        "fields": {
                            "slug": "/sweet-panda-banana/"
                        }
                    }
                }
            ]
        }
    }
}

이런식으로, slug가 생기고 데이터가 graphql로 넘어가게 된다

// gatsby-node.js

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


exports.onCreateNode = ({ node, getNode, actions }) => {
    const { createNodeField } = actions;

    // 새로운 노드가 생성 됐을떄 실행 되는 함수 
  if (node.internal.type === `MarkdownRemark`) {
      // markdown 노드가 생성 될떄만 콘솔 찍음
      const fileNode = getNode(node.parent)
      const slug = createFilePath({ node, getNode, basePath : 'pages' })
      createNodeField({
          node,
          name : `slug`,
          value : slug,
      })
    console.log(createFilePath({ node, getNode, basePath : `pages`}))
    //파일명으로 정보를y 얻어옴
    console.log(`\n`, fileNode.relativePath)
  }
}


exports.createPages = async ({ graphql, actions }) => {
    // **Note:** The graphql function call returns a Promise
    // see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise for more info
    const { createPage } = actions;
    
    const result = await graphql(`
      query {
        allMarkdownRemark {
          edges {
            node {
              fields {
                slug
              }
            }
          }
        }
      }
    `)
  
    console.log(JSON.stringify(result, null, 4))

    result.data.allMarkdownRemark.edges.forEach(({ node }) => {
       createPage({
           // slug를 만들고 -> page를 만든다
           path : node.fields.slug,
           component : path.resolve(`./src/templates/blog-spots.js`),
           context : {
                // Data passed to context is available
                // in page queries as GraphQL variables.
                slug: node.fields.slug,
           }
       })
    })
  }  

이러고 나면 이제 어떻게 접근을 하느냐.

component : path.resolve(`./src/templates/blog-spots.js`),

가 이렇게 되어 있기 떄문에,
blog-spots.js에 가서 확인 해보도록 하자.

// src/templates/blog-spots.js
import React from "react"
import Layout from "../components/layout"
import { graphql } from "gatsby"

export default function BlogPost({ data }) {

    const post = data.markdownRemark;

  return (
    <Layout>
    <div>
        <h1>{post.frontmatter.title}</h1>
        <div dangerouslySetInnerHTML={{ __html: post.html }} />
      </div>
    </Layout>
  )
}



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

에서 query 문을 아래와 같이 날리고,
위에서는 data.makrdown으로 받아오고 그 후에는, 보통 데이터를 받아 올때처럼 접근 하면 된다.