{
    "componentChunkName": "component---src-components-post-template-tsx",
    "path": "/posts/gatsby-createpage-2",
    "result": {"data":{"mdx":{"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Gatsby - 동적으로 페이지 만들기(Node createPages API)\",\n  \"subtitle\": \"createPages API를 사용하여 페이지 라우팅하기.\",\n  \"date\": \"2022-01-26\",\n  \"draft\": false,\n  \"tag\": [\"blog\", \"gatsby\", \"javascript\", \"frontend\", \"headless\", \"react\", \"graphql\", \"html\"]\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"\\uC774 \\uD3EC\\uC2A4\\uD2B8\\uC5D0\\uC11C\\uB294 Gatsby node API\\uC758 \\uC77C\\uBD80\\uC778 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"createPages\"), \"\\uB97C \\uD65C\\uC6A9\\uD558\\uC5EC \\uD398\\uC774\\uC9C0\\uB97C \\uB9CC\\uB4E4\\uACE0 \\uB77C\\uC6B0\\uD305\\uD558\\uB294 \\uACFC\\uC815\\uC744 \\uC124\\uBA85\\uD55C\\uB2E4.\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://blog.dogmadevs.com/posts/gatsby-createpage\"\n  }, \"Gatsby - \\uB3D9\\uC801\\uC73C\\uB85C \\uD398\\uC774\\uC9C0 \\uB9CC\\uB4E4\\uAE30(File system route API)\"), \" \\uAE00\\uACFC \\uAC19\\uC774 mdx \\uD615\\uD0DC\\uC758 \\uD3EC\\uC2A4\\uD2B8\\uB4E4\\uC744 \\uAE30\\uBC18\\uC73C\\uB85C \\uB3D9\\uC801\\uC73C\\uB85C \\uD398\\uC774\\uC9C0\\uB97C \\uB9CC\\uB4DC\\uB294 \\uAE30\\uB2A5\\uC744 \\uAD6C\\uD604\\uD560 \\uAC83\\uC778\\uB370, \\uB2E4\\uB9CC \\uC774\\uBC88\\uC5D0\\uB294 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"createPages\"), \" API\\uB97C \\uC0AC\\uC6A9\\uD558\\uC5EC \\uAD6C\\uD604\\uD560 \\uAC83\\uC774\\uB2E4.\"), mdx(\"blockquote\", null, mdx(\"h3\", {\n    parentName: \"blockquote\"\n  }, \"\\uD83D\\uDCA1 \\uC2DC\\uC791\\uD558\\uAE30 \\uC804\\uC5D0\"), mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\uB9CC\\uC57D File system route API\\uB97C \\uC0AC\\uC6A9\\uD55C \\uD398\\uC774\\uC9C0 \\uB9CC\\uB4E4\\uAE30\\uC5D0 \\uB300\\uD574 \\uC798 \\uBAA8\\uB978\\uB2E4\\uBA74 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://blog.dogmadevs.com/posts/gatsby-createpage\"\n  }, \"Gatsby - \\uB3D9\\uC801\\uC73C\\uB85C \\uD398\\uC774\\uC9C0 \\uB9CC\\uB4E4\\uAE30(File system route API)\"), \" \\uB97C \\uD55C\\uBC88 \\uC77D\\uC5B4 \\uBCF4\\uACE0 \\uC624\\uB294 \\uAC83\\uC774 \\uC88B\\uB2E4.\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"Node API\\uAC00 \\uC880\\uB354 low-level \\uC774\\uBBC0\\uB85C, \\uAC00\\uB2A5\\uD558\\uB2E4\\uBA74 File system route API\\uB97C \\uC0AC\\uC6A9\\uD558\\uB294 \\uCABD\\uC774 \\uCF54\\uB4DC\\uAC00 \\uB354 \\uAE54\\uB054\\uD560 \\uAC83\\uC774\\uB2E4.\")), mdx(\"p\", null, \"\\uD604\\uC7AC \\uC0C1\\uD669\\uACFC \\uAD6C\\uD604\\uD560 \\uBAA9\\uD45C\\uB294 \\uB2E4\\uC74C\\uACFC \\uAC19\\uB2E4.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src/posts\"), \" \\uB514\\uB809\\uD1A0\\uB9AC\\uC5D0 \\uD3EC\\uC2A4\\uD2B8\\uB4E4\\uC774 \\uB2E4\\uC74C\\uACFC \\uAC19\\uC774 \\uAC01\\uAC01 mdx \\uBB38\\uC11C\\uB85C \\uC800\\uC7A5\\uB418\\uC5B4 \\uC788\\uB2E4.\"), mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src/posts\"), mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u2514 hello-world.mdx\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u2514 first-post.mdx\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u2514 another-post.mdx\"), mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\uAC01\\uAC01\\uC758 \\uD30C\\uC77C \\uC774\\uB984\\uC774 \\uC811\\uC18D \\uC8FC\\uC18C\\uAC00 \\uB418\\uB3C4\\uB85D \\uB9CC\\uB4E0\\uB2E4.\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\uC608\\uB85C, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"hello-world.mdx\"), \" \\uD30C\\uC77C\\uC740 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"/posts/hello-world\"), \" \\uACBD\\uB85C\\uB85C \\uC811\\uADFC\\uD560 \\uC218 \\uC788\\uB3C4\\uB85D \\uB9CC\\uB4E0\\uB2E4.\"), mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-plugin-mdx\"), \" \\uD50C\\uB7EC\\uADF8\\uC778\\uC744 \\uC0AC\\uC6A9\\uD558\\uC5EC mdx \\uD30C\\uC77C\\uB4E4\\uC744 \\uB4E4\\uC5EC\\uC628\\uB2E4.\")), mdx(\"h2\", null, \"Gatsby Node API\"), mdx(\"p\", null, \"Gatsby Node API\\uB294 \\uD398\\uC774\\uC9C0\\uB97C \\uB3D9\\uC801\\uC73C\\uB85C \\uB9CC\\uB4E4\\uAC70\\uB098, GraphQL\\uC5D0 \\uB370\\uC774\\uD130\\uB97C \\uCD94\\uAC00\\uD558\\uAC70\\uB098, \\uBE4C\\uB4DC \\uB77C\\uC774\\uD504\\uC0AC\\uC774\\uD074 \\uC911\\uC758 \\uC774\\uBCA4\\uD2B8\\uC5D0 \\uB9AC\\uC2A4\\uB108\\uB97C \\uB4F1\\uB85D\\uD558\\uB294 \\uB4F1\\uC758 \\uC5EC\\uB7EC API\\uB4E4\\uC744 \\uC81C\\uACF5\\uD55C\\uB2E4.\"), mdx(\"p\", null, \"\\uC6B0\\uB9AC\\uB294 \\uC5EC\\uB7EC \\uAC00\\uC9C0 API \\uC911\\uC5D0\\uC11C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"createPages\"), \" API\\uB97C \\uC0AC\\uC6A9\\uD560 \\uAC83\\uC774\\uB2E4.\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\uB2E4\\uB978 API\\uB4E4\\uC5D0 \\uB300\\uD574 \\uC790\\uC138\\uD788 \\uC54C\\uC544\\uBCF4\\uB824\\uBA74 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.gatsbyjs.com/docs/reference/config-files/gatsby-node/\"\n  }, \"Gatsby Node APIs\"), \" \\uB97C \\uCC38\\uC870\\uD558\\uBA74 \\uB41C\\uB2E4.\"), mdx(\"p\", null, mdx(\"em\", {\n    parentName: \"p\"\n  }, \"Gatsby Node API\\uB294 \", mdx(\"strong\", {\n    parentName: \"em\"\n  }, \"\\uD504\\uB85C\\uC81D\\uD2B8 \\uB8E8\\uD2B8 \\uACBD\\uB85C\\uC758 \", mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"gatsby-node.js\"), \" \\uD30C\\uC77C\"), \"\\uC5D0 \\uAD6C\\uD604\\uB418\\uC5B4\\uC57C \\uD55C\\uB2E4.\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-node.js\"), \"\\uC740 \\uBE4C\\uB4DC \\uC911\\uC5D0 \\uB2E8 \\uD55C \\uBC88 \\uC2E4\\uD589\\uB41C\\uB2E4.\"), mdx(\"h2\", null, \"createPages\"), mdx(\"p\", null, \"\\uD398\\uC774\\uC9C0\\uB97C \\uB3D9\\uC801\\uC73C\\uB85C \\uC0DD\\uC131\\uD55C\\uB2E4.\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"createPages\"), \"\\uB294 \\uB178\\uB4DC\\uC640 GraphQL \\uC2A4\\uD0A4\\uB9C8\\uC758 \\uC0DD\\uC131, \\uB370\\uC774\\uD130\\uB4E4\\uC758 sourcing\\uC774 \\uC644\\uB8CC\\uB41C \\uD6C4\\uC5D0 \\uC2E4\\uD589\\uB418\\uAE30 \\uB54C\\uBB38\\uC5D0, \\uC774 \\uD30C\\uC77C\\uC5D0\\uC11C \\uD398\\uC774\\uC9C0\\uB4E4\\uC744 \\uB9CC\\uB4E4 \\uB370\\uC774\\uD130\\uB4E4\\uC744 \\uC694\\uCCAD\\uD560 \\uC218 \\uC788\\uB2E4.\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"createPages\"), \"\\uC758 \\uD30C\\uB77C\\uBBF8\\uD130\\uB294 \\uB2E4\\uC74C\\uACFC \\uAC19\\uB2E4.\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Destructured \\uC624\\uBE0C\\uC81D\\uD2B8\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"actions\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"createPage\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"... \\uC678 \\uC5EC\\uB7EC \\uAC00\\uC9C0\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"graphql\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"reporter\"))))), mdx(\"p\", null, \"\\uAC01\\uAC01\\uC758 \\uD30C\\uB77C\\uBBF8\\uD130\\uAC00 \\uBB34\\uC5C7\\uC744 \\uC758\\uBBF8\\uD558\\uB294\\uC9C0\\uB97C \\uB9D0\\uB85C \\uC124\\uBA85\\uD558\\uAE30\\uBCF4\\uB2E4, \\uAD6C\\uD604\\uB41C \\uCF54\\uB4DC\\uB97C \\uBCF4\\uB294 \\uAC83\\uC774 \\uC774\\uD574\\uAC00 \\uBE60\\uB97C \\uAC83\\uC774\\uB2E4.\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-node.js\"), \" \\uD30C\\uC77C\\uC744 \\uB2E4\\uC74C\\uACFC \\uAC19\\uC774 \\uAD6C\\uD604\\uD55C\\uB2E4. \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-node.js\"), \" \\uD30C\\uC77C\\uC740 \\uB8E8\\uD2B8 \\uB514\\uB809\\uD1A0\\uB9AC\\uC5D0 \\uC704\\uCE58\\uD574\\uC57C \\uD55C\\uB2E4.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, \"const path = require(`path`);\\n\\nexports.createPages = ({ graphql, actions }) => {\\n  const { createPage } = actions;\\n  // \\uD3EC\\uC2A4\\uD2B8\\uB4E4\\uC744 \\uB80C\\uB354\\uB9C1\\uD560 \\uD15C\\uD50C\\uB9BF \\uD30C\\uC77C\\uC744 \\uBD88\\uB7EC\\uC628\\uB2E4.\\n  const postTemplate = path.resolve(`src/components/postTemplate.jsx`);\\n\\n  // mdx \\uD30C\\uC77C\\uB4E4\\uC758 id/slug \\uAC12\\uC744 \\uBC1B\\uC544\\uC628\\uB2E4.\\n  const { data } = await graphql(`\\n    query {\\n      allMdx {\\n        id\\n        slug\\n      }\\n    }\\n  `);\\n\\n  // \\uBC1B\\uC544\\uC628 \\uB370\\uC774\\uD130\\uB97C \\uAE30\\uBC18\\uC73C\\uB85C createPage\\uB97C \\uD638\\uCD9C\\uD55C\\uB2E4.\\n  data.allMdx.nodes.forEach(node => {\\n    createPage({\\n      // \\\"/post/hello-world\\\" \\uC640 \\uAC19\\uC740 \\uC2DD\\uC73C\\uB85C \\uB80C\\uB354\\uB9C1\\uB418\\uB3C4\\uB85D\\n      // \\uC811\\uADFC \\uACBD\\uB85C\\uB97C \\uD15C\\uD50C\\uB9BF \\uB9AC\\uD130\\uB7F4\\uC744 \\uC0AC\\uC6A9\\uD574 \\uC815\\uC758\\uD558\\uC600\\uB2E4.\\n      path: `/posts/${node.slug}`,\\n      // \\uD15C\\uD50C\\uB9BF \\uCEF4\\uD3EC\\uB10C\\uD2B8\\uC774\\uB2E4.\\n      component: postTemplate,\\n      // \\uCEF4\\uD3EC\\uB10C\\uD2B8\\uC5D0 \\uB118\\uACA8\\uC904 \\uD30C\\uB77C\\uBBF8\\uD130\\uB4E4\\uC774\\uB2E4.\\n      context: {\\n        id: node.id,\\n      },\\n    });\\n  });\\n};\\n\")), mdx(\"p\", null, \"\\uD15C\\uD50C\\uB9BF \\uD30C\\uC77C(\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src/components/postTemplate.jsx\"), \")\\uC740 \\uB2E4\\uC74C\\uACFC \\uAC19\\uB2E4.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, \"import * as React from 'react';\\nimport { graphql } from 'gatsby';\\nimport { MDXRenderer } from 'gatsby-plugin-mdx';\\n\\nconst BlogPost = ({ data }) => {\\n  <div>\\n    <h1>{data.mdx.frontmatter.title}</h1>\\n    <p>{data.mdx.frontmatter.date} \\uC5D0 \\uC791\\uC131</p>\\n    <MDXRenderer>{data.mdx.body}</MDXRenderer>\\n  </div>;\\n};\\n\\nexport const query = graphql`\\n  query ($id: String) {\\n    mdx(id: { eq: $id }) {\\n      frontmatter {\\n        title\\n        date(formatString: \\\"MMMM D, YYYY\\\")\\n      }\\n      body\\n    }\\n  }\\n`;\\n\\nexport default BlogPost;\\n\")), mdx(\"p\", null, \"\\uD398\\uC774\\uC9C0 \\uCFFC\\uB9AC\\uC5D0\\uC11C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"id\"), \" \\uAC12\\uC744 \\uBC1B\\uC544 mdx \\uBB38\\uC11C\\uB97C \\uCFFC\\uB9AC\\uD558\\uACE0 \\uADF8 \\uACB0\\uACFC \\uB370\\uC774\\uD130\\uB97C \\uCEF4\\uD3EC\\uB10C\\uD2B8\\uC5D0\\uC11C \\uCD9C\\uB825\\uD558\\uB294 \\uAC83\\uC744 \\uD655\\uC778\\uD560 \\uC218 \\uC788\\uB2E4.\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"id\"), \" \\uAC12\\uC740 \\uC704\\uC758 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-node.js\"), \" \\uCF54\\uB4DC\\uC5D0\\uC11C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"createPage\"), \"\\uC758 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"context\"), \" \\uD504\\uB77C\\uD37C\\uD2F0\\uB97C \\uD1B5\\uD574 \\uC804\\uB2EC\\uB418\\uACE0 \\uC788\\uB2E4(\\uBC11\\uC5D0\\uC11C 6\\uBC88\\uC9F8 \\uC904).\"), mdx(\"h2\", null, \"\\uCC38\\uACE0\\uC790\\uB8CC\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.gatsbyjs.com/docs/reference/config-files/gatsby-node/\"\n  }, \"Gatsby Node APIs\"), mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://blog.dogmadevs.com/posts/gatsby-createpage\"\n  }, \"Gatsby - \\uB3D9\\uC801\\uC73C\\uB85C \\uD398\\uC774\\uC9C0 \\uB9CC\\uB4E4\\uAE30(w/ File system route API)\"), mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\uC774\\uD574\\uC5D0 \\uB3C4\\uC6C0\\uC774 \\uB420\\uAE4C \\uD558\\uC5EC \\uC774 \\uBE14\\uB85C\\uADF8 \\uC18C\\uC2A4\\uCF54\\uB4DC\\uC758 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/centraldogma99/dogma-blog/blob/main/gatsby-node.js\"\n  }, \"gatsby-node.js\"), \"\\uC640 \\uD3EC\\uC2A4\\uD2B8 \\uD15C\\uD50C\\uB9BF \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/centraldogma99/dogma-blog/blob/main/src/components/PostTemplate.tsx\"\n  }, \"PostTemplate.tsx\"), \"\\uC758 \\uCF54\\uB4DC\\uB97C \\uB367\\uBD99\\uC785\\uB2C8\\uB2E4(\\uB9C1\\uD06C\\uB294 Github \\uB808\\uD3EC\\uC9C0\\uD1A0\\uB9AC).\"), mdx(\"h3\", null, \"gatsby-node.js\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, \"const path = require('path');\\n\\nconst initializePostPages = async (createPage, graphql) => {\\n  const template = path.resolve('./src/components/PostTemplate.tsx');\\n  const { data } = await graphql(`\\n    query {\\n      allFile(\\n        filter: {\\n          sourceInstanceName: { eq: \\\"post\\\" }\\n          childMdx: { frontmatter: { draft: { eq: false } } }\\n        }\\n        sort: { fields: childMdx___frontmatter___date, order: DESC }\\n      ) {\\n        nodes {\\n          childMdx {\\n            id\\n            slug\\n          }\\n        }\\n      }\\n    }\\n  `);\\n\\n  data.allFile.nodes.forEach(node => {\\n    createPage({\\n      path: `/posts/${node.childMdx.slug}`,\\n      component: template,\\n      context: {\\n        id: node.childMdx.id,\\n      },\\n    });\\n  });\\n};\\n\\nconst initializeTagPages = async (createPage, graphql) => {\\n  const { data } = await graphql(`\\n    {\\n      allMdx(filter: { frontmatter: { draft: { eq: false } } }) {\\n        group(field: frontmatter___tag) {\\n          tag: fieldValue\\n        }\\n      }\\n    }\\n  `);\\n  const tags = data.allMdx.group.reduce((a, b) => {\\n    if (a.length) {\\n      return [...a, b.tag];\\n    } else {\\n      return [a.tag, b.tag];\\n    }\\n  });\\n\\n  const tagTemplate = path.resolve('./src/components/tagTemplate.tsx');\\n\\n  tags.forEach(tag =>\\n    createPage({\\n      path: `/tags/${tag}`,\\n      component: tagTemplate,\\n      context: {\\n        tag: tag,\\n      },\\n    }),\\n  );\\n};\\n\\nconst initializeMainPage = async createPage => {\\n  const tagTemplate = path.resolve('./src/components/tagTemplate.tsx');\\n\\n  createPage({\\n    path: `/`,\\n    component: tagTemplate,\\n  });\\n};\\n\\n// Main function\\nexports.createPages = ({ graphql, actions }) => {\\n  const { createPage } = actions;\\n\\n  initializePostPages(createPage, graphql);\\n  initializeTagPages(createPage, graphql);\\n  initializeMainPage(createPage);\\n};\\n\")), mdx(\"h3\", null, \"PostTemplate.tsx\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, \"import { graphql } from 'gatsby';\\nimport React, { useEffect } from 'react';\\nimport Frame from './Frame';\\nimport { MDXRenderer } from 'gatsby-plugin-mdx';\\nimport TagBtn from './TagBtn';\\nimport { Divider } from '@mui/material';\\nimport hljs from 'highlight.js/lib/common';\\nimport 'highlight.js/styles/github.css';\\nimport { TagButtonsContainer } from '../styles/tags';\\nimport {\\n  subtitle,\\n  descContainer,\\n  articleBodyContainer,\\n} from '../styles/PostTemplate';\\n\\nconst PostTemplate = ({ data }) => {\\n  const { body, frontmatter } = data.mdx;\\n\\n  useEffect(() => {\\n    hljs.highlightAll();\\n  }, []);\\n\\n  return (\\n    <Frame title={frontmatter.title}>\\n      <div className={descContainer}>\\n        <p className={subtitle}>{frontmatter.subtitle}</p>\\n        <p>{frontmatter.date} \\uC791\\uC131</p>\\n        <TagButtonsContainer>\\n          {frontmatter.tag.sort().map(tag => (\\n            <TagBtn tag={tag} key={tag} />\\n          ))}\\n        </TagButtonsContainer>\\n      </div>\\n      <Divider />\\n      <div className={articleBodyContainer}>\\n        <MDXRenderer>{body}</MDXRenderer>\\n      </div>\\n    </Frame>\\n  );\\n};\\n\\nexport const query = graphql`\\n  query ($id: String) {\\n    mdx(id: { eq: $id }) {\\n      body\\n      frontmatter {\\n        date(formatString: \\\"YYYY-MM-DD\\\")\\n        title\\n        subtitle\\n        tag\\n        draft\\n      }\\n    }\\n  }\\n`;\\n\\nexport default PostTemplate;\\n\")));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"date":"2022-01-26","title":"Gatsby - 동적으로 페이지 만들기(Node createPages API)","subtitle":"createPages API를 사용하여 페이지 라우팅하기.","tag":["blog","gatsby","javascript","frontend","headless","react","graphql","html"],"draft":false}}},"pageContext":{"id":"d0499e49-1d2f-5583-a529-2aec4aef572d"}},
    "staticQueryHashes": []}