-
Notifications
You must be signed in to change notification settings - Fork 0
/
component---src-app-templates-post-template-post-layout-ui-tsx-content-file-path-posts-2019-07-04-blog-migration-md-59e328564aac6cb26ec9.js.map
1 lines (1 loc) · 66.5 KB
/
component---src-app-templates-post-template-post-layout-ui-tsx-content-file-path-posts-2019-07-04-blog-migration-md-59e328564aac6cb26ec9.js.map
1
{"version":3,"file":"component---src-app-templates-post-template-post-layout-ui-tsx-content-file-path-posts-2019-07-04-blog-migration-md-59e328564aac6cb26ec9.js","mappings":"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","sources":["webpack://kyoungah-dev-blog/./posts/2019-07-04-blog-migration.md","webpack://kyoungah-dev-blog/./src/app/templates/post-template/post-layout.ui.tsx","webpack://kyoungah-dev-blog/./src/app/templates/post-template/components/post-layout-content/post-layout.content.module.css","webpack://kyoungah-dev-blog/./src/app/templates/post-template/components/post-layout-content/post-layout-content.ui.tsx","webpack://kyoungah-dev-blog/./src/app/templates/post-template/components/post-layout-date/post-layout-date.module.css","webpack://kyoungah-dev-blog/./src/app/templates/post-template/components/post-layout-date/post-layout-date.tsx","webpack://kyoungah-dev-blog/./src/app/templates/post-template/components/post-layout-tags/post-layout.module.css","webpack://kyoungah-dev-blog/./src/app/templates/post-template/components/post-layout-tags/post-layout-tags.ui.tsx","webpack://kyoungah-dev-blog/./src/app/templates/post-template/components/post-layout-title/post-layout-title.module.css","webpack://kyoungah-dev-blog/./src/app/templates/post-template/components/post-layout-title/post-layout-title.ui.tsx","webpack://kyoungah-dev-blog/./src/entities/tags/index.ts","webpack://kyoungah-dev-blog/./src/entities/tags/tags.ui.tsx","webpack://kyoungah-dev-blog/./src/entities/tags/tags.module.css","webpack://kyoungah-dev-blog/./src/shared/uis/tag/tag.ui.tsx","webpack://kyoungah-dev-blog/./src/shared/uis/tag/tag.module.css","webpack://kyoungah-dev-blog/./src/shared/uis/container/container.module.css","webpack://kyoungah-dev-blog/./src/shared/uis/container/container.ui.tsx","webpack://kyoungah-dev-blog/./src/widgets/basic-layout/basic-layout.module.css","webpack://kyoungah-dev-blog/./src/widgets/basic-layout/basic-layout.ui.tsx","webpack://kyoungah-dev-blog/./src/widgets/header/header.module.css","webpack://kyoungah-dev-blog/./src/widgets/header/header.ui.tsx","webpack://kyoungah-dev-blog/./src/widgets/footer/footer.module.css","webpack://kyoungah-dev-blog/./src/widgets/footer/footer.ui.tsx","webpack://kyoungah-dev-blog/./src/widgets/default-layout/default-layout.ui.tsx","webpack://kyoungah-dev-blog/./src/app/templates/post-template/post-layout.module.css","webpack://kyoungah-dev-blog/./node_modules/@mdx-js/react/lib/index.js","webpack://kyoungah-dev-blog/./node_modules/clsx/dist/clsx.mjs"],"sourcesContent":["/*@jsxRuntime classic @jsx React.createElement @jsxFrag React.Fragment*/\nimport {useMDXComponents as _provideComponents} from \"@mdx-js/react\";\nimport React from \"react\";\nfunction _createMdxContent(props) {\n const _components = Object.assign({\n p: \"p\",\n a: \"a\",\n h2: \"h2\",\n span: \"span\",\n h3: \"h3\",\n blockquote: \"blockquote\",\n ul: \"ul\",\n li: \"li\"\n }, _provideComponents(), props.components);\n return React.createElement(React.Fragment, null, React.createElement(_components.p, null, \"이번 주 내내 Hexo로 만든 블로그를 Gatsby로 마이그레이션 하는 작업을 했다. Hexo도 나름 편했지만 테마를 원하는 대로 새로 만들거나 커스터마이징 하기 좀 어렵다는 단점이 있었다. 그러다가 \", React.createElement(_components.a, {\n href: \"/etc/gdg-frontend-endgame\"\n }, \"6월 말에 갔던 컨퍼런스\"), \"에서 몇몇 연사자 분들이 Gatsby.js를 언급하셔서 관심이 생겨 한번 찾아보았다. React.js, GraphQL 등을 사용하여 만들어진 정적 HTML 생성기 였는데 이걸 사용하면 테마는 물론 블로그 자체를 원하는대로 커스터마이징 하기 쉬울 것 같아 Gatsby.js로 블로그 마이그레이션을 결심했다.\"), \"\\n\", React.createElement(_components.h2, null, \"Gatsby 프로젝트 생성\"), \"\\n\", React.createElement(_components.p, null, React.createElement(_components.a, {\n href: \"https://www.gatsbyjs.org/docs/quick-start/\"\n }, \"gatsby-cli\"), \"를 사용하면 아주 편리하게 gatsby 프로젝트를 생성할 수 있다.\"), \"\\n\", React.createElement(_components.span, {\n dangerouslySetInnerHTML: {\n __html: \"<div class=\\\"gatsby-highlight\\\" data-language=\\\"markdown\\\"><pre class=\\\"language-markdown\\\"><code class=\\\"language-markdown\\\">// 전역으로 gatsby-cli 설치\\nnpm install -g gatsby-cli\\n\\n// gatsby 프로젝트 생성\\ngatsby new gatsby-site\\n\\ncd gatsby-site\\n\\n// gatsby 개발 서버 실행\\ngatsby develop</code></pre></div>\"\n }\n }), \"\\n\", React.createElement(_components.p, null, \"나는 내 입맛에 맞는 테마를 만들고 싶어 기본 starter를 이용했는데 원하는 starter를 선택한 후 프로젝트를 생성할 수 도 있다. 컨퍼런스에서 Gatsby를 제일 먼저 소개해주셨던 연사자분도 \", React.createElement(_components.a, {\n href: \"https://github.com/JaeYeopHan/gatsby-starter-bee\"\n }, \"gatsby-starter-bee\"), \"라는 starter를 만드셨다.\"), \"\\n\", React.createElement(_components.h2, null, \"TypeScript 환경 구축하기\"), \"\\n\", React.createElement(_components.p, null, \"요즘 대세인 TypeScript을 Gatsby 프로젝트에도 적용하기로 했다. 평소 js 프로젝트에 TypeScript 환경을 설정하는 것과 비슷하다. gatsby-config.js 파일에 gatsby-plugin-typescript 플러그인만 추가해주면 된다.\"), \"\\n\", React.createElement(_components.p, null, \"TypeScript 환경을 구축하고 나니 functional Component가 제대로 작동 안하는 이슈가 있었는데 \", React.createElement(_components.a, {\n href: \"https://github.com/gatsbyjs/gatsby/issues/15423\"\n }, \"gatsby를 2.13.8 버전으로 업데이트\"), \"하고 나니 정상 작동 되었다.\"), \"\\n\", React.createElement(_components.h3, null, \"Install\"), \"\\n\", React.createElement(_components.span, {\n dangerouslySetInnerHTML: {\n __html: \"<div class=\\\"gatsby-highlight\\\" data-language=\\\"text\\\"><pre class=\\\"language-text\\\"><code class=\\\"language-text\\\">yarn add typescript @types/react @types/react-dom gatsby-plugin-typescript @types/react-helmet</code></pre></div>\"\n }\n }), \"\\n\", React.createElement(_components.h3, null, \"tsconfig.json\"), \"\\n\", React.createElement(_components.span, {\n dangerouslySetInnerHTML: {\n __html: \"<div class=\\\"gatsby-highlight\\\" data-language=\\\"json\\\"><pre class=\\\"language-json\\\"><code class=\\\"language-json\\\"><span class=\\\"token punctuation\\\">{</span>\\n <span class=\\\"token property\\\">\\\"compilerOptions\\\"</span><span class=\\\"token operator\\\">:</span> <span class=\\\"token punctuation\\\">{</span>\\n <span class=\\\"token property\\\">\\\"target\\\"</span><span class=\\\"token operator\\\">:</span> <span class=\\\"token string\\\">\\\"es5\\\"</span><span class=\\\"token punctuation\\\">,</span>\\n <span class=\\\"token property\\\">\\\"module\\\"</span><span class=\\\"token operator\\\">:</span> <span class=\\\"token string\\\">\\\"commonjs\\\"</span><span class=\\\"token punctuation\\\">,</span>\\n <span class=\\\"token property\\\">\\\"allowJs\\\"</span><span class=\\\"token operator\\\">:</span> <span class=\\\"token boolean\\\">true</span><span class=\\\"token punctuation\\\">,</span>\\n <span class=\\\"token property\\\">\\\"jsx\\\"</span><span class=\\\"token operator\\\">:</span> <span class=\\\"token string\\\">\\\"react\\\"</span><span class=\\\"token punctuation\\\">,</span>\\n <span class=\\\"token property\\\">\\\"strict\\\"</span><span class=\\\"token operator\\\">:</span> <span class=\\\"token boolean\\\">true</span><span class=\\\"token punctuation\\\">,</span> <span class=\\\"token comment\\\">// 엄격한 타입 검사 옵션을 활성화 한다.</span>\\n <span class=\\\"token property\\\">\\\"esModuleInterop\\\"</span><span class=\\\"token operator\\\">:</span> <span class=\\\"token boolean\\\">true</span> <span class=\\\"token comment\\\">// import * as React 처럼 import 하는 것을 import React 이런 식으로 import 할 수 있도록 도와준다.</span>\\n <span class=\\\"token punctuation\\\">}</span>\\n<span class=\\\"token punctuation\\\">}</span></code></pre></div>\"\n }\n }), \"\\n\", React.createElement(_components.h3, null, \"gatsby-config.js\"), \"\\n\", React.createElement(_components.span, {\n dangerouslySetInnerHTML: {\n __html: \"<div class=\\\"gatsby-highlight\\\" data-language=\\\"javascript\\\"><pre class=\\\"language-javascript\\\"><code class=\\\"language-javascript\\\">module<span class=\\\"token punctuation\\\">.</span>exports <span class=\\\"token operator\\\">=</span> <span class=\\\"token punctuation\\\">{</span>\\n <span class=\\\"token comment\\\">// 생략...</span>\\n\\n <span class=\\\"token literal-property property\\\">plugins</span><span class=\\\"token operator\\\">:</span> <span class=\\\"token punctuation\\\">[</span>\\n <span class=\\\"token comment\\\">// 생략...</span>\\n <span class=\\\"token template-string\\\"><span class=\\\"token template-punctuation string\\\">`</span><span class=\\\"token string\\\">gatsby-plugin-typescript</span><span class=\\\"token template-punctuation string\\\">`</span></span><span class=\\\"token punctuation\\\">,</span>\\n <span class=\\\"token comment\\\">// 생략...</span>\\n <span class=\\\"token punctuation\\\">]</span><span class=\\\"token punctuation\\\">,</span>\\n<span class=\\\"token punctuation\\\">}</span><span class=\\\"token punctuation\\\">;</span></code></pre></div>\"\n }\n }), \"\\n\", React.createElement(_components.h2, null, \"styled-components 설정하기\"), \"\\n\", React.createElement(_components.p, null, React.createElement(_components.a, {\n href: \"https://www.gatsbyjs.org/docs/styled-components/\"\n }, \"styled-component\"), \"가 너무 편해서 블로그에서도 사용할 수 있도록 설정했다. 글로벌 css 역시 styled-components의 createGlobalStyle 함수를 사용하여 적용하였다.\"), \"\\n\", React.createElement(_components.h3, null, \"Install\"), \"\\n\", React.createElement(_components.span, {\n dangerouslySetInnerHTML: {\n __html: \"<div class=\\\"gatsby-highlight\\\" data-language=\\\"text\\\"><pre class=\\\"language-text\\\"><code class=\\\"language-text\\\">yarn add gatsby-plugin-styled-components styled-components babel-plugin-styled-components</code></pre></div>\"\n }\n }), \"\\n\", React.createElement(_components.h3, null, \"gatsby-config.js\"), \"\\n\", React.createElement(_components.span, {\n dangerouslySetInnerHTML: {\n __html: \"<div class=\\\"gatsby-highlight\\\" data-language=\\\"javascript\\\"><pre class=\\\"language-javascript\\\"><code class=\\\"language-javascript\\\">module<span class=\\\"token punctuation\\\">.</span>exports <span class=\\\"token operator\\\">=</span> <span class=\\\"token punctuation\\\">{</span>\\n <span class=\\\"token comment\\\">// 생략...</span>\\n <span class=\\\"token literal-property property\\\">plugins</span><span class=\\\"token operator\\\">:</span> <span class=\\\"token punctuation\\\">[</span>\\n <span class=\\\"token comment\\\">// 생략...</span>\\n <span class=\\\"token template-string\\\"><span class=\\\"token template-punctuation string\\\">`</span><span class=\\\"token string\\\">gatsby-plugin-styled-components</span><span class=\\\"token template-punctuation string\\\">`</span></span><span class=\\\"token punctuation\\\">,</span>\\n <span class=\\\"token comment\\\">// 생략...</span>\\n <span class=\\\"token punctuation\\\">]</span><span class=\\\"token punctuation\\\">,</span>\\n<span class=\\\"token punctuation\\\">}</span><span class=\\\"token punctuation\\\">;</span></code></pre></div>\"\n }\n }), \"\\n\", React.createElement(_components.h2, null, \"markdown 설정하기\"), \"\\n\", React.createElement(_components.p, null, \"Gatsby는 데이터 소스라는 곳에서 GraphQL을 이용하여 데이터를 가지고 온다. 이 데이터 소스는 Wordpress같은 CMS 도구가 될 수도 있고 다른 정적 사이트 생성기처럼 Markdown 파일이 될 수도 있고 API 등을 통해서 다른 곳에서 가져올 수도 있다. 플러그인 시스템이 잘 되어 있어서 다양한 데이터소스에서 데이터를 가져올 수 있다.\\n나는 데이터 소스가 markdown 파일이 되도록 설정 했다.\"), \"\\n\", React.createElement(_components.span, {\n dangerouslySetInnerHTML: {\n __html: \"<div class=\\\"gatsby-highlight\\\" data-language=\\\"markdown\\\"><pre class=\\\"language-markdown\\\"><code class=\\\"language-markdown\\\"><span class=\\\"token front-matter-block\\\"><span class=\\\"token punctuation\\\">---</span>\\n<span class=\\\"token front-matter yaml language-yaml\\\"><span class=\\\"token key atrule\\\">title</span><span class=\\\"token punctuation\\\">:</span> Hexo 에서 Gatsby로 블로그 마이그레이션 하기\\n<span class=\\\"token key atrule\\\">date</span><span class=\\\"token punctuation\\\">:</span> <span class=\\\"token datetime number\\\">2019-07-04</span>\\n<span class=\\\"token key atrule\\\">description</span><span class=\\\"token punctuation\\\">:</span> Hexo에서 Gatsby로 블로그 마이그레이션 하는 과정을 정리하였습니다.</span>\\n<span class=\\\"token punctuation\\\">---</span></span></code></pre></div>\"\n }\n }), \"\\n\", React.createElement(_components.h3, null, \"Install\"), \"\\n\", React.createElement(_components.p, null, \"markdown 파일을 읽기 위해서는 gatsby-source-filesystem 플러그인이 필요하고 markdown 파일을 해석하기 위해서는 gatsby-transformer-remark 플러그인이 필요하다.\"), \"\\n\", React.createElement(_components.span, {\n dangerouslySetInnerHTML: {\n __html: \"<div class=\\\"gatsby-highlight\\\" data-language=\\\"text\\\"><pre class=\\\"language-text\\\"><code class=\\\"language-text\\\">yarn add gatsby-source-filesystem gatsby-transformer-remark\\n</code></pre></div>\"\n }\n }), \"\\n\", React.createElement(_components.h3, null, \"blogTeplate.tsx\"), \"\\n\", React.createElement(_components.p, null, \"markdown 파일에서 가져온 정보를 뿌려주기 위한 템플릿을 만들어주자.\"), \"\\n\", React.createElement(_components.span, {\n dangerouslySetInnerHTML: {\n __html: \"<div class=\\\"gatsby-highlight\\\" data-language=\\\"javascript\\\"><pre class=\\\"language-javascript\\\"><code class=\\\"language-javascript\\\"><span class=\\\"token comment\\\">// 생략...</span>\\n\\n<span class=\\\"token keyword\\\">export</span> <span class=\\\"token keyword\\\">default</span> <span class=\\\"token keyword\\\">function</span> <span class=\\\"token function\\\">Template</span><span class=\\\"token punctuation\\\">(</span><span class=\\\"token punctuation\\\">{</span>\\n data<span class=\\\"token punctuation\\\">,</span> <span class=\\\"token comment\\\">// this prop will be injected by the GraphQL query below.</span>\\n<span class=\\\"token punctuation\\\">}</span><span class=\\\"token operator\\\">:</span> any<span class=\\\"token punctuation\\\">)</span> <span class=\\\"token punctuation\\\">{</span>\\n <span class=\\\"token keyword\\\">const</span> <span class=\\\"token punctuation\\\">{</span> markdownRemark <span class=\\\"token punctuation\\\">}</span> <span class=\\\"token operator\\\">=</span> data<span class=\\\"token punctuation\\\">;</span> <span class=\\\"token comment\\\">// data.markdownRemark holds our post data</span>\\n <span class=\\\"token keyword\\\">const</span> <span class=\\\"token punctuation\\\">{</span> frontmatter<span class=\\\"token punctuation\\\">,</span> html <span class=\\\"token punctuation\\\">}</span> <span class=\\\"token operator\\\">=</span> markdownRemark<span class=\\\"token punctuation\\\">;</span>\\n\\n <span class=\\\"token keyword\\\">return</span> <span class=\\\"token punctuation\\\">(</span>\\n <span class=\\\"token operator\\\"><</span><span class=\\\"token operator\\\">></span>\\n <span class=\\\"token operator\\\"><</span>div className<span class=\\\"token operator\\\">=</span><span class=\\\"token string\\\">\\\"blog-post-container\\\"</span><span class=\\\"token operator\\\">></span>\\n <span class=\\\"token operator\\\"><</span>div className<span class=\\\"token operator\\\">=</span><span class=\\\"token string\\\">\\\"blog-post\\\"</span><span class=\\\"token operator\\\">></span>\\n <span class=\\\"token operator\\\"><</span>h1<span class=\\\"token operator\\\">></span><span class=\\\"token punctuation\\\">{</span>frontmatter<span class=\\\"token punctuation\\\">.</span>title<span class=\\\"token punctuation\\\">}</span><span class=\\\"token operator\\\"><</span><span class=\\\"token operator\\\">/</span>h1<span class=\\\"token operator\\\">></span>\\n <span class=\\\"token operator\\\"><</span>h2<span class=\\\"token operator\\\">></span><span class=\\\"token punctuation\\\">{</span>frontmatter<span class=\\\"token punctuation\\\">.</span>date<span class=\\\"token punctuation\\\">}</span><span class=\\\"token operator\\\"><</span><span class=\\\"token operator\\\">/</span>h2<span class=\\\"token operator\\\">></span>\\n <span class=\\\"token operator\\\"><</span>div\\n className<span class=\\\"token operator\\\">=</span><span class=\\\"token string\\\">\\\"blog-post-content\\\"</span>\\n dangerouslySetInnerHTML<span class=\\\"token operator\\\">=</span><span class=\\\"token punctuation\\\">{</span><span class=\\\"token punctuation\\\">{</span> <span class=\\\"token literal-property property\\\">__html</span><span class=\\\"token operator\\\">:</span> html <span class=\\\"token punctuation\\\">}</span><span class=\\\"token punctuation\\\">}</span>\\n <span class=\\\"token operator\\\">/</span><span class=\\\"token operator\\\">></span>\\n <span class=\\\"token operator\\\"><</span><span class=\\\"token operator\\\">/</span>div<span class=\\\"token operator\\\">></span>\\n <span class=\\\"token operator\\\"><</span><span class=\\\"token operator\\\">/</span>div<span class=\\\"token operator\\\">></span>\\n <span class=\\\"token operator\\\"><</span><span class=\\\"token operator\\\">/</span><span class=\\\"token operator\\\">></span>\\n <span class=\\\"token punctuation\\\">)</span><span class=\\\"token punctuation\\\">;</span>\\n<span class=\\\"token punctuation\\\">}</span>\\n\\n<span class=\\\"token comment\\\">// grapthql을 이용하여 markdown에서 데이터를 가지고 온다.</span>\\n<span class=\\\"token keyword\\\">export</span> <span class=\\\"token keyword\\\">const</span> pageQuery <span class=\\\"token operator\\\">=</span> graphql<span class=\\\"token template-string\\\"><span class=\\\"token template-punctuation string\\\">`</span><span class=\\\"token string\\\">\\n query ($path: String!) {\\n markdownRemark(frontmatter: { path: { eq: $path } }) {\\n html\\n frontmatter {\\n date(formatString: \\\"YYYY년 MM월 DD일\\\")\\n path\\n title\\n }\\n }\\n }\\n</span><span class=\\\"token template-punctuation string\\\">`</span></span><span class=\\\"token punctuation\\\">;</span></code></pre></div>\"\n }\n }), \"\\n\", React.createElement(_components.h3, null, \"gatsby-config.js\"), \"\\n\", React.createElement(_components.span, {\n dangerouslySetInnerHTML: {\n __html: \"<div class=\\\"gatsby-highlight\\\" data-language=\\\"javascript\\\"><pre class=\\\"language-javascript\\\"><code class=\\\"language-javascript\\\">module<span class=\\\"token punctuation\\\">.</span>exports <span class=\\\"token operator\\\">=</span> <span class=\\\"token punctuation\\\">{</span>\\n <span class=\\\"token comment\\\">// 생략...</span>\\n\\n <span class=\\\"token literal-property property\\\">plugins</span><span class=\\\"token operator\\\">:</span> <span class=\\\"token punctuation\\\">[</span>\\n <span class=\\\"token comment\\\">// 생략...</span>\\n <span class=\\\"token punctuation\\\">{</span>\\n <span class=\\\"token literal-property property\\\">resolve</span><span class=\\\"token operator\\\">:</span> <span class=\\\"token template-string\\\"><span class=\\\"token template-punctuation string\\\">`</span><span class=\\\"token string\\\">gatsby-source-filesystem</span><span class=\\\"token template-punctuation string\\\">`</span></span><span class=\\\"token punctuation\\\">,</span>\\n <span class=\\\"token literal-property property\\\">options</span><span class=\\\"token operator\\\">:</span> <span class=\\\"token punctuation\\\">{</span>\\n <span class=\\\"token literal-property property\\\">name</span><span class=\\\"token operator\\\">:</span> <span class=\\\"token template-string\\\"><span class=\\\"token template-punctuation string\\\">`</span><span class=\\\"token string\\\">posts</span><span class=\\\"token template-punctuation string\\\">`</span></span><span class=\\\"token punctuation\\\">,</span>\\n <span class=\\\"token literal-property property\\\">path</span><span class=\\\"token operator\\\">:</span> <span class=\\\"token template-string\\\"><span class=\\\"token template-punctuation string\\\">`</span><span class=\\\"token interpolation\\\"><span class=\\\"token interpolation-punctuation punctuation\\\">${</span>__dirname<span class=\\\"token interpolation-punctuation punctuation\\\">}</span></span><span class=\\\"token string\\\">/src/마크다운 파일이 있는 폴더명</span><span class=\\\"token template-punctuation string\\\">`</span></span><span class=\\\"token punctuation\\\">,</span>\\n <span class=\\\"token punctuation\\\">}</span><span class=\\\"token punctuation\\\">,</span>\\n <span class=\\\"token punctuation\\\">}</span><span class=\\\"token punctuation\\\">,</span>\\n <span class=\\\"token template-string\\\"><span class=\\\"token template-punctuation string\\\">`</span><span class=\\\"token string\\\">gatsby-transformer-remark</span><span class=\\\"token template-punctuation string\\\">`</span></span><span class=\\\"token punctuation\\\">,</span>\\n <span class=\\\"token comment\\\">// 생략...</span>\\n <span class=\\\"token punctuation\\\">]</span><span class=\\\"token punctuation\\\">,</span>\\n<span class=\\\"token punctuation\\\">}</span><span class=\\\"token punctuation\\\">;</span></code></pre></div>\"\n }\n }), \"\\n\", React.createElement(_components.h3, null, \"gatsby-node.js\"), \"\\n\", React.createElement(_components.p, null, \"gatsby는 Node API를 사용하여 정적페이지를 생성한다. 이 API를 사용하기 위해서는 gatsby-node.js 파일에서 설정이 필요하다.\"), \"\\n\", React.createElement(_components.span, {\n dangerouslySetInnerHTML: {\n __html: \"<div class=\\\"gatsby-highlight\\\" data-language=\\\"javascript\\\"><pre class=\\\"language-javascript\\\"><code class=\\\"language-javascript\\\"><span class=\\\"token keyword\\\">const</span> path <span class=\\\"token operator\\\">=</span> <span class=\\\"token function\\\">require</span><span class=\\\"token punctuation\\\">(</span><span class=\\\"token template-string\\\"><span class=\\\"token template-punctuation string\\\">`</span><span class=\\\"token string\\\">path</span><span class=\\\"token template-punctuation string\\\">`</span></span><span class=\\\"token punctuation\\\">)</span><span class=\\\"token punctuation\\\">;</span>\\n<span class=\\\"token keyword\\\">const</span> <span class=\\\"token punctuation\\\">{</span> createFilePath <span class=\\\"token punctuation\\\">}</span> <span class=\\\"token operator\\\">=</span> <span class=\\\"token function\\\">require</span><span class=\\\"token punctuation\\\">(</span><span class=\\\"token string\\\">\\\"gatsby-source-filesystem\\\"</span><span class=\\\"token punctuation\\\">)</span><span class=\\\"token punctuation\\\">;</span>\\n\\nexports<span class=\\\"token punctuation\\\">.</span><span class=\\\"token function-variable function\\\">createPages</span> <span class=\\\"token operator\\\">=</span> <span class=\\\"token punctuation\\\">(</span><span class=\\\"token parameter\\\"><span class=\\\"token punctuation\\\">{</span> actions<span class=\\\"token punctuation\\\">,</span> graphql <span class=\\\"token punctuation\\\">}</span></span><span class=\\\"token punctuation\\\">)</span> <span class=\\\"token operator\\\">=></span> <span class=\\\"token punctuation\\\">{</span>\\n <span class=\\\"token keyword\\\">const</span> <span class=\\\"token punctuation\\\">{</span> createPage <span class=\\\"token punctuation\\\">}</span> <span class=\\\"token operator\\\">=</span> actions<span class=\\\"token punctuation\\\">;</span>\\n\\n <span class=\\\"token keyword\\\">const</span> blogPostTemplate <span class=\\\"token operator\\\">=</span> path<span class=\\\"token punctuation\\\">.</span><span class=\\\"token function\\\">resolve</span><span class=\\\"token punctuation\\\">(</span><span class=\\\"token template-string\\\"><span class=\\\"token template-punctuation string\\\">`</span><span class=\\\"token string\\\">src/templates/blogTemplate.tsx</span><span class=\\\"token template-punctuation string\\\">`</span></span><span class=\\\"token punctuation\\\">)</span><span class=\\\"token punctuation\\\">;</span>\\n\\n <span class=\\\"token keyword\\\">return</span> <span class=\\\"token function\\\">graphql</span><span class=\\\"token punctuation\\\">(</span><span class=\\\"token template-string\\\"><span class=\\\"token template-punctuation string\\\">`</span><span class=\\\"token string\\\">\\n {\\n allMarkdownRemark(\\n sort: { order: DESC, fields: [frontmatter___date] }\\n limit: 1000\\n ) {\\n edges {\\n node {\\n frontmatter {\\n path\\n }\\n }\\n }\\n }\\n }\\n </span><span class=\\\"token template-punctuation string\\\">`</span></span><span class=\\\"token punctuation\\\">)</span><span class=\\\"token punctuation\\\">.</span><span class=\\\"token function\\\">then</span><span class=\\\"token punctuation\\\">(</span><span class=\\\"token punctuation\\\">(</span><span class=\\\"token parameter\\\">result</span><span class=\\\"token punctuation\\\">)</span> <span class=\\\"token operator\\\">=></span> <span class=\\\"token punctuation\\\">{</span>\\n <span class=\\\"token keyword\\\">if</span> <span class=\\\"token punctuation\\\">(</span>result<span class=\\\"token punctuation\\\">.</span>errors<span class=\\\"token punctuation\\\">)</span> <span class=\\\"token punctuation\\\">{</span>\\n <span class=\\\"token keyword\\\">return</span> Promise<span class=\\\"token punctuation\\\">.</span><span class=\\\"token function\\\">reject</span><span class=\\\"token punctuation\\\">(</span>result<span class=\\\"token punctuation\\\">.</span>errors<span class=\\\"token punctuation\\\">)</span><span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token punctuation\\\">}</span>\\n\\n <span class=\\\"token keyword\\\">return</span> result<span class=\\\"token punctuation\\\">.</span>data<span class=\\\"token punctuation\\\">.</span>allMarkdownRemark<span class=\\\"token punctuation\\\">.</span>edges<span class=\\\"token punctuation\\\">.</span><span class=\\\"token function\\\">forEach</span><span class=\\\"token punctuation\\\">(</span><span class=\\\"token punctuation\\\">(</span><span class=\\\"token parameter\\\"><span class=\\\"token punctuation\\\">{</span> node <span class=\\\"token punctuation\\\">}</span></span><span class=\\\"token punctuation\\\">)</span> <span class=\\\"token operator\\\">=></span> <span class=\\\"token punctuation\\\">{</span>\\n <span class=\\\"token function\\\">createPage</span><span class=\\\"token punctuation\\\">(</span><span class=\\\"token punctuation\\\">{</span>\\n <span class=\\\"token literal-property property\\\">path</span><span class=\\\"token operator\\\">:</span> node<span class=\\\"token punctuation\\\">.</span>fields<span class=\\\"token punctuation\\\">.</span>slug<span class=\\\"token punctuation\\\">,</span>\\n <span class=\\\"token literal-property property\\\">component</span><span class=\\\"token operator\\\">:</span> blogPostTemplate<span class=\\\"token punctuation\\\">,</span>\\n <span class=\\\"token literal-property property\\\">context</span><span class=\\\"token operator\\\">:</span> <span class=\\\"token punctuation\\\">{</span>\\n <span class=\\\"token literal-property property\\\">slug</span><span class=\\\"token operator\\\">:</span> node<span class=\\\"token punctuation\\\">.</span>fields<span class=\\\"token punctuation\\\">.</span>slug<span class=\\\"token punctuation\\\">,</span>\\n <span class=\\\"token punctuation\\\">}</span><span class=\\\"token punctuation\\\">,</span> <span class=\\\"token comment\\\">// additional data can be passed via context</span>\\n <span class=\\\"token punctuation\\\">}</span><span class=\\\"token punctuation\\\">)</span><span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token punctuation\\\">}</span><span class=\\\"token punctuation\\\">)</span><span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token punctuation\\\">}</span><span class=\\\"token punctuation\\\">)</span><span class=\\\"token punctuation\\\">;</span>\\n<span class=\\\"token punctuation\\\">}</span><span class=\\\"token punctuation\\\">;</span>\\n\\n<span class=\\\"token comment\\\">// 페이지 slug를 만들기 위한 함수.</span>\\nexports<span class=\\\"token punctuation\\\">.</span><span class=\\\"token function-variable function\\\">onCreateNode</span> <span class=\\\"token operator\\\">=</span> <span class=\\\"token punctuation\\\">(</span><span class=\\\"token parameter\\\"><span class=\\\"token punctuation\\\">{</span> node<span class=\\\"token punctuation\\\">,</span> actions<span class=\\\"token punctuation\\\">,</span> getNode <span class=\\\"token punctuation\\\">}</span></span><span class=\\\"token punctuation\\\">)</span> <span class=\\\"token operator\\\">=></span> <span class=\\\"token punctuation\\\">{</span>\\n <span class=\\\"token keyword\\\">const</span> <span class=\\\"token punctuation\\\">{</span> createNodeField <span class=\\\"token punctuation\\\">}</span> <span class=\\\"token operator\\\">=</span> actions<span class=\\\"token punctuation\\\">;</span>\\n\\n <span class=\\\"token keyword\\\">if</span> <span class=\\\"token punctuation\\\">(</span>node<span class=\\\"token punctuation\\\">.</span>internal<span class=\\\"token punctuation\\\">.</span>type <span class=\\\"token operator\\\">===</span> <span class=\\\"token template-string\\\"><span class=\\\"token template-punctuation string\\\">`</span><span class=\\\"token string\\\">MarkdownRemark</span><span class=\\\"token template-punctuation string\\\">`</span></span><span class=\\\"token punctuation\\\">)</span> <span class=\\\"token punctuation\\\">{</span>\\n <span class=\\\"token keyword\\\">const</span> value <span class=\\\"token operator\\\">=</span> <span class=\\\"token function\\\">createFilePath</span><span class=\\\"token punctuation\\\">(</span><span class=\\\"token punctuation\\\">{</span> node<span class=\\\"token punctuation\\\">,</span> getNode <span class=\\\"token punctuation\\\">}</span><span class=\\\"token punctuation\\\">)</span><span class=\\\"token punctuation\\\">;</span>\\n\\n <span class=\\\"token function\\\">createNodeField</span><span class=\\\"token punctuation\\\">(</span><span class=\\\"token punctuation\\\">{</span>\\n <span class=\\\"token literal-property property\\\">name</span><span class=\\\"token operator\\\">:</span> <span class=\\\"token template-string\\\"><span class=\\\"token template-punctuation string\\\">`</span><span class=\\\"token string\\\">slug</span><span class=\\\"token template-punctuation string\\\">`</span></span><span class=\\\"token punctuation\\\">,</span>\\n node<span class=\\\"token punctuation\\\">,</span>\\n value<span class=\\\"token punctuation\\\">,</span>\\n <span class=\\\"token punctuation\\\">}</span><span class=\\\"token punctuation\\\">)</span><span class=\\\"token punctuation\\\">;</span>\\n <span class=\\\"token punctuation\\\">}</span>\\n<span class=\\\"token punctuation\\\">}</span><span class=\\\"token punctuation\\\">;</span></code></pre></div>\"\n }\n }), \"\\n\", React.createElement(_components.h2, null, \"code highlight 설정하기\"), \"\\n\", React.createElement(_components.p, null, \"code highlight에는 prismjs를 사용했다. 원래는 highlight.js를 사용했는데 gatsby 플러그인을 찾을 때 prismjs가 별이 좀 더 많아서 끌렸다.\"), \"\\n\", React.createElement(_components.span, {\n dangerouslySetInnerHTML: {\n __html: \"<div class=\\\"gatsby-highlight\\\" data-language=\\\"text\\\"><pre class=\\\"language-text\\\"><code class=\\\"language-text\\\">yarn add gatsby-remark-prismjs prismjs\\n</code></pre></div>\"\n }\n }), \"\\n\", React.createElement(_components.h3, null, \"gatsby-config.js\"), \"\\n\", React.createElement(_components.span, {\n dangerouslySetInnerHTML: {\n __html: \"<div class=\\\"gatsby-highlight\\\" data-language=\\\"javascript\\\"><pre class=\\\"language-javascript\\\"><code class=\\\"language-javascript\\\">module<span class=\\\"token punctuation\\\">.</span>exports <span class=\\\"token operator\\\">=</span> <span class=\\\"token punctuation\\\">{</span>\\n <span class=\\\"token comment\\\">// 생략...</span>\\n <span class=\\\"token literal-property property\\\">plugins</span><span class=\\\"token operator\\\">:</span> <span class=\\\"token punctuation\\\">[</span>\\n <span class=\\\"token comment\\\">// 생략...</span>\\n <span class=\\\"token punctuation\\\">{</span>\\n <span class=\\\"token literal-property property\\\">resolve</span><span class=\\\"token operator\\\">:</span> <span class=\\\"token template-string\\\"><span class=\\\"token template-punctuation string\\\">`</span><span class=\\\"token string\\\">gatsby-transformer-remark</span><span class=\\\"token template-punctuation string\\\">`</span></span><span class=\\\"token punctuation\\\">,</span>\\n <span class=\\\"token literal-property property\\\">options</span><span class=\\\"token operator\\\">:</span> <span class=\\\"token punctuation\\\">{</span>\\n <span class=\\\"token literal-property property\\\">plugins</span><span class=\\\"token operator\\\">:</span> <span class=\\\"token punctuation\\\">[</span>\\n <span class=\\\"token punctuation\\\">{</span>\\n <span class=\\\"token literal-property property\\\">resolve</span><span class=\\\"token operator\\\">:</span> <span class=\\\"token template-string\\\"><span class=\\\"token template-punctuation string\\\">`</span><span class=\\\"token string\\\">gatsby-remark-prismjs</span><span class=\\\"token template-punctuation string\\\">`</span></span><span class=\\\"token punctuation\\\">,</span>\\n <span class=\\\"token literal-property property\\\">options</span><span class=\\\"token operator\\\">:</span> <span class=\\\"token punctuation\\\">{</span>\\n <span class=\\\"token literal-property property\\\">classPrefix</span><span class=\\\"token operator\\\">:</span> <span class=\\\"token string\\\">\\\"language-\\\"</span><span class=\\\"token punctuation\\\">,</span>\\n <span class=\\\"token literal-property property\\\">inlineCodeMarker</span><span class=\\\"token operator\\\">:</span> <span class=\\\"token keyword\\\">null</span><span class=\\\"token punctuation\\\">,</span>\\n <span class=\\\"token literal-property property\\\">aliases</span><span class=\\\"token operator\\\">:</span> <span class=\\\"token punctuation\\\">{</span><span class=\\\"token punctuation\\\">}</span><span class=\\\"token punctuation\\\">,</span>\\n <span class=\\\"token literal-property property\\\">showLineNumbers</span><span class=\\\"token operator\\\">:</span> <span class=\\\"token boolean\\\">false</span><span class=\\\"token punctuation\\\">,</span>\\n <span class=\\\"token literal-property property\\\">noInlineHighlight</span><span class=\\\"token operator\\\">:</span> <span class=\\\"token boolean\\\">false</span><span class=\\\"token punctuation\\\">,</span>\\n <span class=\\\"token punctuation\\\">}</span><span class=\\\"token punctuation\\\">,</span>\\n <span class=\\\"token punctuation\\\">}</span><span class=\\\"token punctuation\\\">,</span>\\n <span class=\\\"token comment\\\">// 생략...</span>\\n <span class=\\\"token punctuation\\\">]</span><span class=\\\"token punctuation\\\">,</span>\\n <span class=\\\"token punctuation\\\">}</span><span class=\\\"token punctuation\\\">,</span>\\n <span class=\\\"token punctuation\\\">}</span><span class=\\\"token punctuation\\\">,</span>\\n <span class=\\\"token comment\\\">// 생략...</span>\\n <span class=\\\"token punctuation\\\">]</span><span class=\\\"token punctuation\\\">,</span>\\n<span class=\\\"token punctuation\\\">}</span><span class=\\\"token punctuation\\\">;</span></code></pre></div>\"\n }\n }), \"\\n\", React.createElement(_components.h3, null, \"gatsby-browser.js\"), \"\\n\", React.createElement(_components.p, null, \"원하는 highlight 테마가 있으면 gatsby-browser 파일에다가 import 해주면된다.\"), \"\\n\", React.createElement(_components.span, {\n dangerouslySetInnerHTML: {\n __html: \"<div class=\\\"gatsby-highlight\\\" data-language=\\\"javascript\\\"><pre class=\\\"language-javascript\\\"><code class=\\\"language-javascript\\\"><span class=\\\"token comment\\\">/**\\n * Implement Gatsby's Browser APIs in this file.\\n *\\n * See: https://www.gatsbyjs.org/docs/browser-apis/\\n */</span>\\n\\n<span class=\\\"token comment\\\">// You can delete this file if you're not using it</span>\\n<span class=\\\"token comment\\\">// gatsby-browser.js</span>\\n<span class=\\\"token function\\\">require</span><span class=\\\"token punctuation\\\">(</span><span class=\\\"token string\\\">\\\"./src/styles/prism-atom-one-dark.css\\\"</span><span class=\\\"token punctuation\\\">)</span><span class=\\\"token punctuation\\\">;</span></code></pre></div>\"\n }\n }), \"\\n\", React.createElement(_components.h2, null, \"SEO\"), \"\\n\", React.createElement(_components.p, null, \"gatsby-cli로 생성된 프로젝트를 보면 SEO 컴포넌트가 있다. markdown 파일에서 필요한 속성들을 가지고와서 SEO 컴포넌트에 뿌려주는 식으로 작업하였다. 이 SEO 컴포넌트를 위에서 만든 blogTemplate 컴포넌트에 import 해주면된다.\"), \"\\n\", React.createElement(_components.h3, null, \"SEO.tsx\"), \"\\n\", React.createElement(_components.span, {\n dangerouslySetInnerHTML: {\n __html: \"<div class=\\\"gatsby-highlight\\\" data-language=\\\"javascript\\\"><pre class=\\\"language-javascript\\\"><code class=\\\"language-javascript\\\"><span class=\\\"token comment\\\">// 생략...</span>\\n\\n<span class=\\\"token keyword\\\">const</span> <span class=\\\"token constant\\\">SEO</span><span class=\\\"token operator\\\">:</span> React<span class=\\\"token punctuation\\\">.</span><span class=\\\"token constant\\\">SFC</span><span class=\\\"token operator\\\"><</span>SEOProps<span class=\\\"token operator\\\">></span> <span class=\\\"token operator\\\">=</span> <span class=\\\"token punctuation\\\">(</span><span class=\\\"token parameter\\\"><span class=\\\"token punctuation\\\">{</span> description<span class=\\\"token punctuation\\\">,</span> title<span class=\\\"token punctuation\\\">,</span> url <span class=\\\"token punctuation\\\">}</span></span><span class=\\\"token punctuation\\\">)</span> <span class=\\\"token operator\\\">=></span> <span class=\\\"token punctuation\\\">{</span>\\n <span class=\\\"token keyword\\\">return</span> <span class=\\\"token punctuation\\\">(</span>\\n <span class=\\\"token operator\\\"><</span>Helmet title<span class=\\\"token operator\\\">=</span><span class=\\\"token punctuation\\\">{</span>title<span class=\\\"token punctuation\\\">}</span><span class=\\\"token operator\\\">></span>\\n <span class=\\\"token operator\\\"><</span>meta name<span class=\\\"token operator\\\">=</span><span class=\\\"token string\\\">\\\"viewport\\\"</span> content<span class=\\\"token operator\\\">=</span><span class=\\\"token string\\\">\\\"width=device-width,initial-scale=1\\\"</span> <span class=\\\"token operator\\\">/</span><span class=\\\"token operator\\\">></span>\\n <span class=\\\"token operator\\\"><</span>meta name<span class=\\\"token operator\\\">=</span><span class=\\\"token string\\\">\\\"description\\\"</span> content<span class=\\\"token operator\\\">=</span><span class=\\\"token punctuation\\\">{</span>description<span class=\\\"token punctuation\\\">}</span> <span class=\\\"token operator\\\">/</span><span class=\\\"token operator\\\">></span>\\n <span class=\\\"token operator\\\"><</span>meta property<span class=\\\"token operator\\\">=</span><span class=\\\"token string\\\">\\\"og:title\\\"</span> title<span class=\\\"token operator\\\">=</span><span class=\\\"token punctuation\\\">{</span>title<span class=\\\"token punctuation\\\">}</span> <span class=\\\"token operator\\\">/</span><span class=\\\"token operator\\\">></span>\\n <span class=\\\"token operator\\\"><</span>meta property<span class=\\\"token operator\\\">=</span><span class=\\\"token string\\\">\\\"og:description\\\"</span> content<span class=\\\"token operator\\\">=</span><span class=\\\"token punctuation\\\">{</span>description<span class=\\\"token punctuation\\\">}</span> <span class=\\\"token operator\\\">/</span><span class=\\\"token operator\\\">></span>\\n <span class=\\\"token operator\\\"><</span>meta property<span class=\\\"token operator\\\">=</span><span class=\\\"token string\\\">\\\"og:url\\\"</span> content<span class=\\\"token operator\\\">=</span><span class=\\\"token punctuation\\\">{</span>url<span class=\\\"token punctuation\\\">}</span> <span class=\\\"token operator\\\">/</span><span class=\\\"token operator\\\">></span>\\n <span class=\\\"token operator\\\"><</span><span class=\\\"token operator\\\">/</span>Helmet<span class=\\\"token operator\\\">></span>\\n <span class=\\\"token punctuation\\\">)</span><span class=\\\"token punctuation\\\">;</span>\\n<span class=\\\"token punctuation\\\">}</span><span class=\\\"token punctuation\\\">;</span>\\n\\n<span class=\\\"token comment\\\">// 생략...</span></code></pre></div>\"\n }\n }), \"\\n\", React.createElement(_components.h2, null, \"배포\"), \"\\n\", React.createElement(_components.p, null, \"netlify를 사용하면 자동배포를 할 수 있다고 하는데 마이너한 이슈인것 같아서 일단 제일 마지막 작업으로 미뤘다. 일단은 아래의 명령어로 github 페이지에 배포하고 있다.\"), \"\\n\", React.createElement(_components.h3, null, \"package.json\"), \"\\n\", React.createElement(_components.span, {\n dangerouslySetInnerHTML: {\n __html: \"<div class=\\\"gatsby-highlight\\\" data-language=\\\"json\\\"><pre class=\\\"language-json\\\"><code class=\\\"language-json\\\"><span class=\\\"token punctuation\\\">{</span>\\n <span class=\\\"token comment\\\">// 생략...</span>\\n <span class=\\\"token property\\\">\\\"scripts\\\"</span><span class=\\\"token operator\\\">:</span> <span class=\\\"token punctuation\\\">{</span>\\n <span class=\\\"token property\\\">\\\"deploy\\\"</span><span class=\\\"token operator\\\">:</span> <span class=\\\"token string\\\">\\\"gatsby build && gh-pages -d public -b master -r https://github.com/partyKyoung/partyKyoung.github.io\\\"</span>\\n <span class=\\\"token punctuation\\\">}</span>\\n <span class=\\\"token comment\\\">// 생략...</span>\\n<span class=\\\"token punctuation\\\">}</span></code></pre></div>\"\n }\n }), \"\\n\", React.createElement(_components.h2, null, \"마무리\"), \"\\n\", React.createElement(_components.p, null, \"혹시 나중에 또 참고할 일이 있을까봐 이렇게 마이그레이션 과정을 정리해놓기는 했는데 gatsby 공식문서가 진짜 잘되어 있는데다 왠만한 플러그인은 다 있기 때문에 좀 막히는게 있다 싶으면 그냥 gatsby 공식 문서를 확인하는게 제일 좋은 것 같다. 개인적으로 gatsby로 블로그 마이그레이션을 하고 엄청 만족하고 있다. 익숙한 React로 되어 있어서 커스터마이징 하기가 제일 쉽다는게 한 80%는 먹고 가는 것 같다.\\n아직 미완성이지만 빨리 마무리까지 끝낸 후 나처럼 Gatsby로 블로그를 시작하는 분들께 조금이나마 도움이 되고 싶다.\"), \"\\n\", React.createElement(_components.h2, null, \"Reference\"), \"\\n\", React.createElement(_components.blockquote, null, \"\\n\", React.createElement(_components.ul, null, \"\\n\", React.createElement(_components.li, null, React.createElement(_components.a, {\n href: \"https://www.gatsbyjs.org/plugins/\"\n }, \"gatsbyjs plugins\")), \"\\n\", React.createElement(_components.li, null, React.createElement(_components.a, {\n href: \"https://blog.outsider.ne.kr/1426\"\n }, \"정적 사이트 생성기 Gatsby\")), \"\\n\", React.createElement(_components.li, null, React.createElement(_components.a, {\n href: \"https://medium.com/maxime-heckel/getting-started-with-typescript-on-gatsby-8544b47c1d27\"\n }, \"Getting started with Typescript on Gatsby\")), \"\\n\", React.createElement(_components.li, null, React.createElement(_components.a, {\n href: \"https://github.com/heejongahn/blog\"\n }, \"heejongahn/blog\")), \"\\n\"), \"\\n\"));\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n return MDXLayout ? React.createElement(MDXLayout, props, React.createElement(_createMdxContent, props)) : _createMdxContent(props);\n}\nexport default MDXContent;\n","import React from \"react\";\nimport GATSBY_COMPILED_MDX from \"/Users/yookyoung.park/Workspace/kyoungah-dev-blog/posts/2019-07-04-blog-migration.md\";\nimport {MDXProvider} from '@mdx-js/react';\nimport {Container} from '@/shared/uis/container';\nimport {DefaultLayout} from '@/widgets/default-layout';\nimport {PostLayoutContent} from './components/post-layout-content';\nimport {PostLayoutDate} from './components/post-layout-date';\nimport {PostLayoutTags} from './components/post-layout-tags';\nimport {PostLayoutTitle} from './components/post-layout-title';\nimport {postLayoutContainer, postLayoutTitle} from './post-layout.module.css';\nimport {jsx as _jsx} from \"react/jsx-runtime\";\nimport {jsxs as _jsxs} from \"react/jsx-runtime\";\nfunction PostLayout(_ref) {\n var _data$mdx$frontmatter, _data$mdx;\n let {data, children} = _ref;\n const {date, tags, title} = (_data$mdx$frontmatter = data === null || data === void 0 ? void 0 : (_data$mdx = data.mdx) === null || _data$mdx === void 0 ? void 0 : _data$mdx.frontmatter) !== null && _data$mdx$frontmatter !== void 0 ? _data$mdx$frontmatter : {};\n return _jsx(DefaultLayout, {\n children: _jsxs(Container, {\n className: postLayoutContainer,\n children: [_jsx(PostLayoutTitle, {\n className: postLayoutTitle,\n title: title\n }), _jsx(PostLayoutDate, {\n date: date\n }), _jsx(PostLayoutTags, {\n tags: tags\n }), _jsx(PostLayoutContent, {\n children: _jsx(MDXProvider, {\n children: children\n })\n })]\n })\n });\n}\nconst query = \"1347208223\";\nPostLayout\nexport default function GatsbyMDXWrapper(props) {\n return React.createElement(PostLayout, props, React.createElement(GATSBY_COMPILED_MDX, props));\n}\n","// extracted by mini-css-extract-plugin\nexport var postLayoutContentRoot = \"post-layout-content-module--post-layout-content-root--01754\";","import { clsx } from \"clsx\";\nimport { type HTMLAttributes, type PropsWithChildren } from \"react\";\n\nimport { postLayoutContentRoot } from \"./post-layout.content.module.css\";\n\ntype Props = PropsWithChildren & HTMLAttributes<HTMLDivElement>;\n\nfunction PostLayoutContent({ children, className, ...props }: Props) {\n return (\n <div className={clsx(postLayoutContentRoot, className)} {...props}>\n {children}\n </div>\n );\n}\n\nexport { PostLayoutContent };\n","// extracted by mini-css-extract-plugin\nexport var postLayoutDateRoot = \"post-layout-date-module--post-layout-date-root--f34d1\";","import { clsx } from \"clsx\";\nimport { type HTMLAttributes } from \"react\";\n\nimport { postLayoutDateRoot } from \"./post-layout-date.module.css\";\n\ntype Props = { date: string } & HTMLAttributes<HTMLHeadingElement>;\n\nfunction PostLayoutDate({ className, date, ...props }: Props) {\n return (\n <span className={clsx(postLayoutDateRoot, className)} {...props}>\n {date}\n </span>\n );\n}\n\nexport { PostLayoutDate };\n","// extracted by mini-css-extract-plugin\nexport var postLayoutTags = \"post-layout-module--post-layout-tags--837df\";","import { Tags } from \"@/entities/tags\";\nimport { Link } from \"gatsby\";\n\nimport { postLayoutTags } from \"./post-layout.module.css\";\n\ntype Props = { tags: string[] };\n\nfunction PostLayoutTags({ tags }: Props) {\n return (\n <Tags className={postLayoutTags}>\n {tags.map((tag) => (\n <Link key={tag} to={`/tags/${tag}`}>\n <Tags.Tag tag={tag} />\n </Link>\n ))}\n </Tags>\n );\n}\n\nexport { PostLayoutTags };\n","// extracted by mini-css-extract-plugin\nexport var postLayoutTitleRoot = \"post-layout-title-module--post-layout-title-root--88374\";","import { clsx } from \"clsx\";\nimport { postLayoutTitleRoot } from \"./post-layout-title.module.css\";\nimport { HTMLAttributes } from \"react\";\n\ntype Props = { title: string } & HTMLAttributes<HTMLHeadingElement>;\n\nfunction PostLayoutTitle({ className, title, ...props }: Props) {\n return (\n <h1 className={clsx(postLayoutTitleRoot, className)} {...props}>\n {title}\n </h1>\n );\n}\n\nexport { PostLayoutTitle };\n","import { Tag } from '@/shared/uis/tag';\nimport { Tags } from './tags.ui';\n\nconst ComposedTags = Object.assign(Tags, {\n Tag,\n});\n\nexport { ComposedTags as Tags };\n","import { PropsWithChildren, type HTMLAttributes } from 'react';\nimport { clsx } from 'clsx';\n\nimport { tagsRoot } from './tags.module.css';\n\ntype Props = PropsWithChildren & HTMLAttributes<HTMLDivElement>;\n\nfunction Tags({ children, className, ...props }: Props) {\n return (\n <div className={clsx(tagsRoot, className)} {...props}>\n {children}\n </div>\n );\n}\n\nexport { Tags };\n","// extracted by mini-css-extract-plugin\nexport var show = \"tags-module--show--7704b\";\nexport var tagsRoot = \"tags-module--tags-root--e3461\";","import { clsx } from 'clsx';\n\nimport type { HTMLAttributes, ReactNode } from 'react';\n\nimport { tagRoot } from './tag.module.css';\n\ntype Props = {\n tag: ReactNode;\n} & HTMLAttributes<HTMLSpanElement>;\n\nfunction Tag({ className, tag, ...props }: Props) {\n return (\n <span className={clsx(tagRoot, className)} {...props}>\n {tag}\n </span>\n );\n}\n\nexport type { Props as TagProps };\nexport { Tag };\n","// extracted by mini-css-extract-plugin\nexport var tagRoot = \"tag-module--tag-root--aae01\";","// extracted by mini-css-extract-plugin\nexport var containerRoot = \"container-module--container-root--3b208\";","import { clsx } from 'clsx';\nimport type { PropsWithChildren, HTMLAttributes } from 'react';\n\nimport { containerRoot } from './container.module.css';\n\ntype Props = PropsWithChildren & HTMLAttributes<HTMLSpanElement>;\n\nfunction Container({ children, className, ...props }: Props) {\n return (\n <div className={clsx(containerRoot, className)} {...props}>\n {children}\n </div>\n );\n}\n\nexport { Container };\n","// extracted by mini-css-extract-plugin\nexport var basicLayoutRoot = \"basic-layout-module--basic-layout-root--a11e0\";","import { clsx } from 'clsx';\nimport { type HTMLAttributes, type PropsWithChildren } from 'react';\n\nimport { basicLayoutRoot } from './basic-layout.module.css';\n\ntype Props = PropsWithChildren & HTMLAttributes<HTMLDivElement>;\n\nfunction BasicLayout({ children, className, ...props }: Props) {\n return (\n <div className={clsx(basicLayoutRoot, className)} {...props}>\n {children}\n </div>\n );\n}\n\nexport { BasicLayout };\n","// extracted by mini-css-extract-plugin\nexport var about = \"header-module--about--32ac9\";\nexport var headerLogo = \"header-module--header-logo--5bbdc\";\nexport var headerNavigation = \"header-module--header-navigation--24bcb\";\nexport var headerNavigationItem = \"header-module--header-navigation-item--ba248\";\nexport var headerNavigationItemLink = \"header-module--header-navigation-item-link--d6da9\";\nexport var headerNavigationList = \"header-module--header-navigation-list--3815c\";\nexport var headerRoot = \"header-module--header-root--01ceb\";\nexport var tags = \"header-module--tags--eb332\";","import { Link } from 'gatsby';\nimport { clsx } from 'clsx';\n\nimport {\n about,\n headerRoot,\n headerLogo,\n headerNavigation,\n headerNavigationList,\n headerNavigationItem,\n headerNavigationItemLink,\n tags,\n} from './header.module.css';\n\nfunction Header() {\n return (\n <header className={headerRoot}>\n <Link to=\"/\">\n <img\n src=\"/images/logo.png\"\n srcSet={`/images/logo-small.png 200w, /images/logo.png 300w`}\n sizes=\"(max-width: 360px) 200px, 300px\"\n alt=\"dev.kyoungah.me\"\n className={headerLogo}\n />\n </Link>\n <nav className={headerNavigation}>\n <ul className={headerNavigationList}>\n <li className={headerNavigationItem}>\n <Link to=\"/tags\">\n <span\n aria-label=\"tags\"\n className={clsx(headerNavigationItemLink, tags)}\n />\n </Link>\n </li>\n <li className={headerNavigationItem}>\n <a href=\"/about\" rel=\"noopener\" target=\"_blank\">\n <span\n aria-label=\"about\"\n className={clsx(headerNavigationItemLink, about)}\n />\n </a>\n </li>\n </ul>\n </nav>\n </header>\n );\n}\n\nexport { Header };\n","// extracted by mini-css-extract-plugin\nexport var footerRoot = \"footer-module--footer-root--795ff\";","import { footerRoot } from './footer.module.css';\n\nfunction Footer() {\n return (\n <footer className={footerRoot}>\n <span>Powered by Gatsby, Hosted by GitHub Pages.</span>\n <span>\n ©\n <a\n href=\"https://github.com/partykyoung\"\n rel=\"noreferrer\"\n target=\"_blank\">\n KyoungAh\n </a>\n , All rights reserved.\n </span>\n </footer>\n );\n}\n\nexport { Footer };\n","import type { PropsWithChildren } from \"react\";\n\nimport { Header } from \"../header\";\nimport { Footer } from \"../footer\";\nimport { BasicLayout } from \"../basic-layout\";\n\nfunction DefaultLayout({ children }: PropsWithChildren) {\n return (\n <>\n <Header />\n <BasicLayout>{children}</BasicLayout>\n <Footer />\n </>\n );\n}\n\nexport { DefaultLayout };\n","// extracted by mini-css-extract-plugin\nexport var postLayoutContainer = \"post-layout-module--post-layout-container--f40b5\";\nexport var postLayoutTitle = \"post-layout-module--post-layout-title--1c575\";","/**\n * @typedef {import('mdx/types.js').MDXComponents} MDXComponents\n * @typedef {import('react').Component<{}, {}, unknown>} Component\n * @typedef {import('react').ReactNode} ReactNode\n */\n\n/**\n * @callback MergeComponents\n * Custom merge function.\n * @param {Readonly<MDXComponents>} currentComponents\n * Current components from the context.\n * @returns {MDXComponents}\n * Additional components.\n *\n * @typedef Props\n * Configuration for `MDXProvider`.\n * @property {ReactNode | null | undefined} [children]\n * Children (optional).\n * @property {Readonly<MDXComponents> | MergeComponents | null | undefined} [components]\n * Additional components to use or a function that creates them (optional).\n * @property {boolean | null | undefined} [disableParentContext=false]\n * Turn off outer component context (default: `false`).\n */\n\nimport React from 'react'\n\n/** @type {Readonly<MDXComponents>} */\nconst emptyComponents = {}\n\nconst MDXContext = React.createContext(emptyComponents)\n\n/**\n * Get current components from the MDX Context.\n *\n * @param {Readonly<MDXComponents> | MergeComponents | null | undefined} [components]\n * Additional components to use or a function that creates them (optional).\n * @returns {MDXComponents}\n * Current components.\n */\nexport function useMDXComponents(components) {\n const contextComponents = React.useContext(MDXContext)\n\n // Memoize to avoid unnecessary top-level context changes\n return React.useMemo(\n function () {\n // Custom merge via a function prop\n if (typeof components === 'function') {\n return components(contextComponents)\n }\n\n return {...contextComponents, ...components}\n },\n [contextComponents, components]\n )\n}\n\n/**\n * Provider for MDX context.\n *\n * @param {Readonly<Props>} properties\n * Properties.\n * @returns {JSX.Element}\n * Element.\n * @satisfies {Component}\n */\nexport function MDXProvider(properties) {\n /** @type {Readonly<MDXComponents>} */\n let allComponents\n\n if (properties.disableParentContext) {\n allComponents =\n typeof properties.components === 'function'\n ? properties.components(emptyComponents)\n : properties.components || emptyComponents\n } else {\n allComponents = useMDXComponents(properties.components)\n }\n\n return React.createElement(\n MDXContext.Provider,\n {value: allComponents},\n properties.children\n )\n}\n","function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;"],"names":["_createMdxContent","props","_components","Object","assign","p","a","h2","span","h3","blockquote","ul","li","_provideComponents","components","React","href","dangerouslySetInnerHTML","__html","wrapper","MDXLayout","PostLayout","_ref","_data$mdx$frontmatter","_data$mdx","data","children","date","tags","title","mdx","frontmatter","_jsx","DefaultLayout","_jsxs","Container","className","postLayoutContainer","PostLayoutTitle","postLayoutTitle","PostLayoutDate","PostLayoutTags","PostLayoutContent","MDXProvider","GatsbyMDXWrapper","GATSBY_COMPILED_MDX","postLayoutContentRoot","clsx","postLayoutDateRoot","postLayoutTags","Tags","map","tag","Link","to","Tag","postLayoutTitleRoot","ComposedTags","containerRoot","basicLayoutRoot","BasicLayout","about","headerLogo","headerNavigation","headerNavigationItem","headerNavigationItemLink","headerNavigationList","headerRoot","Header","src","srcSet","sizes","alt","rel","target","footerRoot","Footer","_Fragment","emptyComponents","MDXContext","useMDXComponents","contextComponents","properties","allComponents","disableParentContext","Provider","value","r","e","t","f","n","Array","isArray","o","length","arguments"],"sourceRoot":""}