마크다운 파일에서 포스트 생성하기
블로그 포스트 이전을 위해 Gatsby.js Tutorials에서 참고하여 진행했던 작업을 정리해 보았다.
플러그인 설치
마크다운 파일에서 데이터 소스를 얻고, 이를 html로 변환하기 위해서는 아래 두 플러그인을 설치해야 한다.
Source plugins bring data into Gatsby’s data system and transformer plugins transform raw content brought by source plugins. This pattern can handle all data sourcing and data transformation you might need when building a Gatsby site. - from: Transformer plugins
Gatsby에서 사용하는 플러그인은 npm으로 설치하고, gatsby-config.js 파일에 추가해주면 된다.
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
name: `src`,
path: `${__dirname}/src`,
},
},
`gatsby-transformer-remark`,
...
]gatsby-source-filesystem
이 플러그인은 로컬 파일 시스템의 파일을 File 노드로 생성한다.
이렇게 생성된 노드는 GraphQL을 통해 정보를 얻을 수 있다: file, allFiles
gatsby-transformer-remark
이 플러그인은 마크다운 파일을 파싱하여 MarkdownRemark 노드로 만든다. 마크다운 프로세서로는 Remark가 사용된다.
이렇게 생성된 노드는 GraphQL을 통해 정보를 얻을 수 있다: markdownRemark, AllMarkdownRemarks
페이지 만들기
페이지를 만들기 위해서는 gatsby-node.js에 필요한 코드를 작성해야 한다.
Code in the file
gatsby-node.jsis run once in the process of building your site. You can use it to create pages dynamically, add nodes in GraphQL, or respond to events during the build lifecycle. To use the Gatsby Node APIs , create a file namedgatsby-node.jsin the root of your site. Export any of the APIs you wish to use in this file. - from: The gatsby-node.js API file
필요한 작업은 두 가지인데 1) 포스트 페이지를 위한 경로를 생성하는 것과, 2. 데이터와 템플릿을 이용해 페이지를 생성하는 것이다.
경로 생성
MarkdownRemark 타입의 노드를 생성할 때, slug필드를 추가해준다. slug는 페이지를 생성할 경로로 사용된다.
exports.onCreateNode = ({ node, getNode, actions }) => {
const { createNodeField } = actions
if (node.internal.type === `MarkdownRemark`) {
// Turn markdown files in our `posts` directory into `/post/slug`
const relativeFilePath = createFilePath({
node,
getNode,
basePath: `posts`,
})
createNodeField({
node,
name: `slug`,
value: `/posts${relativeFilePath}`,
})
}
}페이지 생성
exports.createPages = async ({ graphql, actions }) => {
const { createPage } = actions
const result = await graphql(`
{
allMarkdownRemark {
edges {
node {
fields {
slug
}
}
}
}
}
`)
result.data.allMarkdownRemark.edges.forEach(({ node }) => {
createPage({
path: node.fields.slug,
component: path.resolve(`./src/templates/blog-post.js`),
context: {
slug: node.fields.slug,
},
})
})
}createPage의 context 파라미터를 이용하여 템플릿 파일 안에서 사용되는 정보를 전달해줄 수 있다. 여기서는 context로 전달된 slug가 blog-post.js에서 마크다운 데이터를 조회하는데 사용되었다.
// …
export const query = graphql`
query($slug: String!) {
markdownRemark(fields: { slug: { eq: $slug } }) {
html
frontmatter {
title
}
}
}
`마무리
Gatsby lets you use GraphQL to query your data and map the query results to pages—all at build time. This is a really powerful idea. -- from: 7. Programmatically create pages from data
각 과정들을 정리해 보면서 이 말에 전적으로 동의하게 되었다.
마크다운 파일에서 태그 페이지 생성하는 것도 이와 같은 방식으로 이루어지며, 이 내용은 다음 글에서 다루도록 하겠다.