{ "componentChunkName": "component---src-components-post-template-tsx", "path": "/posts/gatsby-createpage", "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 - 동적으로 페이지 만들기(File system route API)\",\n \"subtitle\": \"페이지 쿼리와 템플릿을 활용하여 하나의 템플릿으로 여러 개의 페이지 만들기\",\n \"date\": \"2022-01-25\",\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 \\uAE00\\uC5D0\\uC11C\\uB294 \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"File system route API\"), \"\\uB97C \\uD1B5\\uD574 \\uB3D9\\uC801\\uC73C\\uB85C \\uD398\\uC774\\uC9C0\\uB4E4\\uC744 \\uC0DD\\uC131\\uD558\\uB294 \\uACFC\\uC815\\uC744 \\uB2E4\\uB8EC\\uB2E4.\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.gatsbyjs.com/docs/tutorial/part-6/\"\n }, \"Gatsby tutorial part 6\"), \"\\uC744 \\uAE30\\uBC18\\uC73C\\uB85C \\uC791\\uC131\\uB41C \\uD3EC\\uC2A4\\uD2B8\\uC774\\uBA70, mdx \\uD30C\\uC77C\\uB4E4\\uC744 \\uAE30\\uBC18\\uC73C\\uB85C \\uAC01\\uAC01 \\uD3EC\\uC2A4\\uD2B8 \\uD398\\uC774\\uC9C0 \\uD558\\uB098\\uC529\\uC744 \\uB9CC\\uB4DC\\uB294 \\uC608\\uC2DC\\uB97C \\uAE30\\uC900\\uC73C\\uB85C \\uC124\\uBA85\\uD55C\\uB2E4.\"), mdx(\"h2\", null, \"File system route API\"), mdx(\"p\", null, \"\\uD398\\uC774\\uC9C0\\uB97C \\uB80C\\uB354\\uB9C1\\uD558\\uB294 jsx \\uD30C\\uC77C\\uB4E4\\uC758 \\uC774\\uB984\\uC744 \\uD1B5\\uD574 GraphQL \\uB370\\uC774\\uD130 \\uCE35\\uC5D0 \\uC811\\uADFC\\uD558\\uC5EC \\uACBD\\uB85C\\uB97C \\uB9CC\\uB4E4 \\uC218 \\uC788\\uB3C4\\uB85D \\uB3C4\\uC640\\uC8FC\\uB294 \\uAE30\\uB2A5\\uC774\\uB2E4.\"), mdx(\"p\", null, \"\\uB2E4\\uC74C\\uACFC \\uAC19\\uC740 \\uBAA8\\uB378\\uC774 \\uC788\\uB2E4\\uACE0 \\uAC00\\uC815\\uD558\\uC790. \\uC720\\uD6A8\\uD55C \\uCF54\\uB4DC\\uB294 \\uC544\\uB2C8\\uACE0, \\uB2E8\\uC21C\\uD788 \\uAD6C\\uC870\\uB97C \\uB098\\uD0C0\\uB0B4\\uB294 \\uD45C\\uD604\\uC774\\uB2E4.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\"\n }, \"product {\\n name\\n sku\\n}\\n\")), mdx(\"p\", null, \"\\uC704 \\uBAA8\\uB378\\uC5D0 \\uD574\\uB2F9\\uD558\\uB294 \\uC608\\uC2DC\\uB85C,\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"{ name: 'hamburger', sku: '1122334' }\"), \",\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"{ name: 'chicken', sku: '559392' }\"), \" \\uC640 \\uAC19\\uC740 \\uB178\\uB4DC\\uB4E4\\uC774 \\uC788\\uC744 \\uC218 \\uC788\\uC744 \\uAC83\\uC774\\uB2E4.\"), mdx(\"p\", null, \"\\uC774\\uB54C, \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"src/paegs/products/{product.name}.js\"), \" \\uB294\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"/products/hamburger\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"/products/chicken\"), \" \\uD398\\uC774\\uC9C0\\uB97C \\uB9CC\\uB4E4\\uC5B4 \\uB0B8\\uB2E4.\"), mdx(\"p\", null, \"\\uB2E4\\uB978 \\uC608\\uC2DC\\uB85C, \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"src/pages/products/sku/{product.sku}.js\"), \"\\uB294\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"/products/sku/1122334\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"/products/sku/559392\"), \" \\uD398\\uC774\\uC9C0\\uB97C \\uB9CC\\uB4E4\\uC5B4 \\uB0B8\\uB2E4.\"), mdx(\"p\", null, \"\\uC774\\uC678\\uC5D0\\uB3C4 File system route API\\uC758 \\uB2E4\\uC591\\uD55C \\uD65C\\uC6A9\\uBC95\\uC774 \\uC788\\uC9C0\\uB9CC \\uC9C0\\uAE08 \\uD544\\uC694\\uD55C \\uAC83\\uC740 \\uC704\\uC5D0\\uC11C \\uC124\\uBA85\\uD55C \\uC815\\uB3C4\\uB85C \\uCDA9\\uBD84\\uD558\\uB2E4.\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"\\uB354 \\uC790\\uC138\\uD55C \\uC0AC\\uC6A9\\uBC95\\uC740 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.gatsbyjs.com/docs/reference/routing/file-system-route-api/\"\n }, \"File System Route API\"), \" \\uBB38\\uC11C\\uB97C \\uCC38\\uC870\\uD558\\uBA74 \\uB41C\\uB2E4.\"), mdx(\"p\", null, \"\\uC774\\uC81C \\uC6B0\\uB9AC\\uC758 \\uD504\\uB85C\\uC81D\\uD2B8\\uC5D0\\uC11C File system route API\\uB97C \\uD65C\\uC6A9\\uD574 \\uBCF4\\uC790. \\uD604\\uC7AC \\uC0C1\\uD669\\uACFC \\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\", \"\\u3134 hello-world.mdx\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"\\u3134 first-post.mdx\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"\\u3134 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\", null, \"mdx \\uD30C\\uC77C\\uB4E4\\uC758 \\uD30C\\uC77C\\uBA85(\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"slug\"), \")\\uC5D0 \\uC811\\uADFC\\uD558\\uC5EC \\uADF8\\uAC83\\uC744 \\uC8FC\\uC18C\\uB85C \\uB9CC\\uB4E4 \\uAC83\\uC774\\uBBC0\\uB85C, \\uC774\\uB4E4\\uC758 GraphQL \\uC0C1\\uC758 \\uBAA8\\uB378\\uBA85\\uC778 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"mdx\"), \"\\uC640 \\uD544\\uB4DC \\uC774\\uB984\\uC778 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"slug\"), \"\\uB97C \\uC870\\uD569\\uD558\\uBA74 \\uD3EC\\uC2A4\\uD2B8\\uB97C \\uBCF4\\uC5EC\\uC8FC\\uB294 \\uCEF4\\uD3EC\\uB10C\\uD2B8\\uC758 \\uACBD\\uB85C\\uB294 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"src/pages/posts/{mdx.slug}.js\"), \" \\uAC00 \\uB420 \\uAC83\\uC774\\uB2E4.\"), mdx(\"p\", null, \"\\uC704 \\uACBD\\uB85C\\uC5D0 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"{mdx.slug}.js\"), \" \\uD30C\\uC77C\\uC744 \\uC0DD\\uC131\\uD558\\uACE0 \\uB2E4\\uC74C \\uCF54\\uB4DC\\uB97C \\uC785\\uB825\\uD55C\\uB2E4.\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"\\uC9C0\\uAE08\\uC740 \\uCF54\\uB4DC\\uAC00 \\uB3D9\\uC801\\uC774\\uC9C0 \\uC54A\\uACE0 \\uD558\\uB4DC\\uCF54\\uB529 \\uB418\\uC5B4 \\uC788\\uC9C0\\uB9CC, \\uC870\\uAE08 \\uC788\\uB2E4\\uAC00 \\uB3D9\\uC801\\uC73C\\uB85C \\uC791\\uB3D9\\uD558\\uB3C4\\uB85D \\uBC14\\uAFC0 \\uAC83\\uC774\\uB2E4.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-javascript\"\n }, \"import * as React from 'react';\\n\\nconst BlogPost = () => {\\n return

\\uD3EC\\uC2A4\\uD2B8 \\uB0B4\\uC6A9\\uC774 \\uC5EC\\uAE30\\uC5D0 \\uB098\\uD0C0\\uB0A0 \\uAC81\\uB2C8\\uB2E4(\\uC5B8\\uC820\\uAC00\\uB294).

;\\n};\\nexport default BlogPost;\\n\")), mdx(\"p\", null, \"\\uC774\\uC81C \\uBE0C\\uB77C\\uC6B0\\uC800\\uC5D0\\uC11C \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"localhost:8000/posts/first-post\"), \" \\uB85C \\uC811\\uC18D\\uD574 \\uBCF8\\uB2E4. \\uC704\\uC5D0\\uC11C \\uC815\\uC758\\uD55C \\uCEF4\\uD3EC\\uB10C\\uD2B8\\uAC00 \\uBCF4\\uC77C \\uAC83\\uC774\\uB2E4('\\uD3EC\\uC2A4\\uD2B8 \\uB0B4\\uC6A9\\uC774 \\uC5EC\\uAE30\\uC5D0 \\uB098\\uD0C0\\uB0A0 \\uAC81\\uB2C8\\uB2E4(\\uC5B8\\uC820\\uAC00\\uB294).').\"), mdx(\"p\", null, \"\\uC5C6\\uB294 \\uD3EC\\uC2A4\\uD2B8 \\uC774\\uB984\\uC73C\\uB85C \\uC811\\uC18D\\uD574 \\uBCF4\\uC544\\uB3C4 \\uC88B\\uB2E4. \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"localhost:8000/posts/not-exist\"), \" \\uB85C \\uC811\\uC18D\\uD574 \\uBCF4\\uBA74 404 \\uD398\\uC774\\uC9C0\\uB97C \\uB744\\uC6B8 \\uAC83\\uC774\\uB2E4. \\uB2F9\\uC5F0\\uD558\\uAC8C\\uB3C4, mdx \\uD30C\\uC77C \\uC911\\uC5D0 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"not-exist.mdx\"), \" \\uB77C\\uB294 \\uD30C\\uC77C\\uC774 \\uC5C6\\uAE30 \\uB54C\\uBB38\\uC5D0 \\uD398\\uC774\\uC9C0\\uAC00 \\uB9CC\\uB4E4\\uC5B4\\uC9C0\\uC9C0 \\uC54A\\uC740 \\uAC83\\uC774\\uB2E4.\"), mdx(Divider, {\n mdxType: \"Divider\"\n }), mdx(\"br\", null), \"\\uD398\\uC774\\uC9C0 \\uC8FC\\uC18C\\uAC00 \\uC6D0\\uD558\\uB294 \\uB300\\uB85C \\uC798 \\uC0DD\\uC131\\uB428\\uC744 \\uD655\\uC778\\uD588\\uB2E4\\uBA74, \\uC774\\uC81C \\uD398\\uC774\\uC9C0\\uAC00 \\uD558\\uB4DC\\uCF54\\uB529\\uB41C \\uBB38\\uAD6C\\uAC00 \\uC544\\uB2CC \\uAC01\\uAC01\\uC758 \\uD3EC\\uC2A4\\uD2B8\\uC758 \\uB0B4\\uC6A9\\uC744 \\uBCF4\\uC5EC\\uC8FC\\uB3C4\\uB85D \\uD574 \\uBCF4\\uC790.\", mdx(\"p\", null, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"hello-world.mdx\"), \" \\uAC00 \\uB2E4\\uC74C\\uACFC \\uAC19\\uC774 \\uC0DD\\uACBC\\uB2E4\\uACE0 \\uAC00\\uC815\\uD558\\uC790.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-text\"\n }, \"---\\ntitle: \\\"Hello, world!\\\"\\ndate: \\\"2022-01-25\\\"\\n---\\n\\nHello, world! \\uC774\\uAC74 Hello, world! \\uC785\\uB2C8\\uB2E4.\\n\\n\\uB2E4\\uB4E4 \\uD55C\\uBC88\\uC529\\uC740 \\uC368 \\uBD24\\uC744 \\uBB38\\uC7A5\\uC774\\uC8E0.\\n\\n- hello, world!\\n- li\\n- and another li\\n\")), mdx(\"p\", null, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"{mdx.slug}.js\"), \" \\uC5D0 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://blog.dogmadevs.com/posts/gatsby-page-query\"\n }, \"\\uD398\\uC774\\uC9C0 \\uCFFC\\uB9AC\"), \"\\uB97C \\uCD94\\uAC00\\uD574 \\uBCF4\\uC790.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-javascript\"\n }, \"import * as React from 'react';\\n\\nconst BlogPost = () => {\\n // ... \\uC804\\uACFC \\uB3D9\\uC77C ...\\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(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\uD83D\\uDCA1 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"id\"), \"\\uAC12\\uC740 \\uBAA8\\uB4E0 \\uB178\\uB4DC\\uB4E4\\uC5D0 \\uB300\\uD574 \\uC720\\uC77C(unique)\\uD558\\uBBC0\\uB85C, \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"allMdx\"), \" \\uCFFC\\uB9AC\\uAC00 \\uC544\\uB2CC \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"mdx\"), \" \\uCFFC\\uB9AC\\uB97C \\uC774\\uC6A9\\uD558\\uC600\\uB2E4.\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"\\uD83D\\uDCA1 \\uC704\\uC758 \\uCF54\\uB4DC\\uC5D0\\uC11C \\uCEF4\\uD3EC\\uB10C\\uD2B8\\uB294 \\uC544\\uC9C1 \\uC218\\uC815\\uD558\\uC9C0 \\uC54A\\uC558\\uAE30 \\uB54C\\uBB38\\uC5D0 \\uCD9C\\uB825\\uAC12\\uC740 \\uC804\\uACFC \\uAC19\\uB2E4.\")), mdx(\"p\", null, \"\\uCD94\\uAC00\\uB41C \\uD398\\uC774\\uC9C0 \\uCFFC\\uB9AC\\uB294 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"id\"), \" \\uB97C \\uD30C\\uB77C\\uBBF8\\uD130\\uB85C \\uBC1B\\uC544, \\uC77C\\uCE58\\uD558\\uB294 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"id\"), \" \\uAC12\\uC744 \\uAC00\\uC9C4 \\uB178\\uB4DC\\uC758 \\uBA87\\uBA87 \\uD544\\uB4DC\\uB4E4\\uC744 \\uBC18\\uD658\\uD560 \\uAC83\\uC774\\uB2E4.\"), mdx(\"p\", null, \"\\uC5EC\\uAE30\\uC11C \\uBA87 \\uAC00\\uC9C0 \\uC758\\uBB38\\uC774 \\uB4E4 \\uAC83\\uC774\\uB2E4.\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uCFFC\\uB9AC\\uC758 \\uD30C\\uB77C\\uBBF8\\uD130\\uB294 \\uB204\\uAC00 \\uB118\\uACA8\\uC8FC\\uB294\\uAC00?\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uCFFC\\uB9AC\\uC758 \\uACB0\\uACFC\\uB97C \\uCEF4\\uD3EC\\uB10C\\uD2B8\\uC5D0\\uC11C \\uC5B4\\uB5BB\\uAC8C \\uC811\\uADFC\\uD558\\uB294\\uAC00?\")), mdx(\"h3\", null, \"\\uD30C\\uB77C\\uBBF8\\uD130\\uB294 \\uB204\\uAC00 \\uB118\\uACA8\\uC8FC\\uB294\\uAC00?\"), mdx(\"p\", null, \"\\uC774\\uB294 File system route API\\uC758 \\uC5ED\\uD560\\uC774\\uB2E4.\"), mdx(\"p\", null, \"\\uD15C\\uD50C\\uB9BF \\uD30C\\uC77C\\uC778 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"{mdx.slug}.js\"), \" \\uD30C\\uC77C\\uC744 \\uC774\\uC6A9\\uD558\\uC5EC \\uAC01\\uAC01\\uC758 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \".mdx\"), \" \\uD30C\\uC77C\\uC5D0 \\uB300\\uD55C \\uD398\\uC774\\uC9C0\\uB97C \\uC0DD\\uC131\\uD560 \\uB54C, \\uADF8 \\uD3EC\\uC2A4\\uD2B8(\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \".mdx\"), \" \\uD30C\\uC77C)\\uC758 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"id\"), \" \\uAC12\\uC774 \\uD398\\uC774\\uC9C0 \\uCFFC\\uB9AC\\uC758 \\uD30C\\uB77C\\uBBF8\\uD130\\uB85C \\uC804\\uB2EC\\uB41C\\uB2E4.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\uD83D\\uDCA1 \\uD398\\uC774\\uC9C0 \\uCFFC\\uB9AC\\uB85C \\uC804\\uB2EC\\uB41C \\uD30C\\uB77C\\uBBF8\\uD130\\uB4E4\\uC740 \\uCEF4\\uD3EC\\uB10C\\uD2B8\\uC5D0\\uC11C\\uB3C4 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"pageContext\"), \" \\uB77C\\uB294 prop\\uC744 \\uD1B5\\uD574 \\uC811\\uADFC\\uD560 \\uC218 \\uC788\\uB2E4.\"), mdx(\"pre\", {\n parentName: \"blockquote\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-javascript\"\n }, \"import * as React from 'react';\\nimport { graphql } from 'gatsby';\\n\\nconst BlogPost = ({ pageContext }) => {\\n return

{pageContext.id}

;\\n};\\n\\n// ... \\uC804\\uACFC \\uB3D9\\uC77C ...\\n\\nexport default BlogPost;\\n\"))), mdx(\"h3\", null, \"\\uCFFC\\uB9AC\\uC758 \\uACB0\\uACFC\\uB97C \\uCEF4\\uD3EC\\uB10C\\uD2B8\\uC5D0\\uC11C \\uC5B4\\uB5BB\\uAC8C \\uC811\\uADFC\\uD558\\uB294\\uAC00?\"), mdx(\"p\", null, \"\\uCFFC\\uB9AC\\uC758 \\uACB0\\uACFC\\uB294 \\uCEF4\\uD3EC\\uB10C\\uD2B8\\uC758 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"data\"), \" prop\\uC73C\\uB85C \\uC811\\uADFC\\uD560 \\uC218 \\uC788\\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
\\n

{data.mdx.frontmatter.title}

\\n

{data.mdx.frontmatter.date} \\uC5D0 \\uC791\\uC131

\\n {data.mdx.body}\\n
;\\n};\\n\\n// ... \\uC804\\uACFC \\uB3D9\\uC77C ...\\n\\nexport default BlogPost;\\n\")), mdx(\"p\", null, \"\\uC774\\uC81C \\uD3EC\\uC2A4\\uD2B8\\uC758 \\uB0B4\\uC6A9\\uB4E4\\uC774 \\uC815\\uC758\\uD55C \\uD15C\\uD50C\\uB9BF\\uC5D0 \\uB9DE\\uCDB0 \\uC798 \\uCD9C\\uB825\\uB428\\uC744 \\uD655\\uC778\\uD560 \\uC218 \\uC788\\uB2E4.\"), mdx(\"h2\", null, \"\\uB9C8\\uBB34\\uB9AC\"), mdx(\"p\", null, \"\\uC815\\uB9AC\\uD558\\uBA74, \\uC704\\uC758 \\uCF54\\uB4DC\\uB294 \\uB2E4\\uC74C\\uACFC \\uAC19\\uC774 \\uC791\\uB3D9\\uD55C\\uB2E4.\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"hello-world.mdx\"), \"\\uB97C \\uC774\\uC6A9\\uD558\\uC5EC \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"{mdx.slug}.js\"), \"\\uB97C \\uB80C\\uB354\\uB9C1 \\uC2DC\\uC791\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"hello-world.mdx\"), \"\\uC758 GraphQL data layer \\uC0C1\\uC758 id \\uAC12\\uC744 \\uD398\\uC774\\uC9C0 \\uCFFC\\uB9AC\\uC758 \\uD30C\\uB77C\\uBBF8\\uD130\\uB85C \\uB118\\uAE40\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uD398\\uC774\\uC9C0 \\uCFFC\\uB9AC \\uC2E4\\uD589 \\uD6C4, \\uB2E4\\uC74C\\uACFC \\uAC19\\uC740 prop \\uAC12\\uACFC \\uD568\\uAED8 \\uCEF4\\uD3EC\\uB10C\\uD2B8 \\uB80C\\uB354\\uB9C1\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"data\"), \" : \\uD398\\uC774\\uC9C0 \\uCFFC\\uB9AC\\uC758 \\uC2E4\\uD589 \\uACB0\\uACFC\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"pageContext\"), \" : \\uD398\\uC774\\uC9C0 \\uCFFC\\uB9AC\\uAC00 \\uBC1B\\uC740 \\uD30C\\uB77C\\uBBF8\\uD130\\uB4E4(\\uC608\\uC2DC\\uC758 \\uACBD\\uC6B0, id \\uAC12)\")))), mdx(\"h2\", null, \"\\uCC38\\uACE0\\uC790\\uB8CC\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.gatsbyjs.com/docs/tutorial/part-6/\"\n }, \"Gatsby tutorial part 6\"), mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.gatsbyjs.com/docs/reference/routing/file-system-route-api/\"\n }, \"File System Route API\")));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"date":"2022-01-25","title":"Gatsby - 동적으로 페이지 만들기(File system route API)","subtitle":"페이지 쿼리와 템플릿을 활용하여 하나의 템플릿으로 여러 개의 페이지 만들기","tag":["blog","gatsby","javascript","frontend","headless","react","graphql","html"],"draft":false}}},"pageContext":{"id":"cc657969-a9c3-5e2a-86ef-5b1f9f8c6689"}}, "staticQueryHashes": []}