{
    "componentChunkName": "component---src-templates-post-tsx",
    "path": "/react_homepage/",
    "result": {"data":{"logo":null,"markdownRemark":{"html":"<h2>React 기반 개인 웹페이지 배포하기</h2>\n<p>이번 글에서는 react를 이용해서 개인 웹페이지 제작부터 웹페이지 배포, 그리고 자신이 원하는 도메인 이름으로 적용까지를 다뤄보겠습니다.<br>\n지금 보시는 <code class=\"language-text\">sooftware.io</code>와 같은 홈페이지를 제작하는 방법이라고 생각하시면 될 것 같습니다.</p>\n<h2>React 기반 오픈소스 찾기</h2>\n<img src=\"https://user-images.githubusercontent.com/42150335/134343629-3e301e42-50de-43e5-ba18-ab13582e931c.png\" width=\"400\">\n<p>리액트는 자바스크립트 라이브러리의 하나로서 간단히 말하면 react 기반으로 웹페이지를 만들면\n스마트폰 어플리케이션에서도 보기 좋게 나오게 해주는 좋은 라이브러리라고 보시면 됩니다.</p>\n<p>코드를 하나만 짜면 웹, 앱이 한 번에 해결되기 때문에 최근에는 많은 분들이 react 기반으로 웹페이지를 제작하는 경우가 많은 것 같습니다.</p>\n<p>react를 잘 다루시는 개발자라면 개인 웹페이지 만드는것쯤은 뚝-딱 만드시겠지만, 꼭 웹개발자 분들만 개인 웹페이지를 만들고 싶으신 건 아니기 때문에,\nreact를 하나도 모르더라도 지금 보시는 페이지와 같은 개인 웹페이지를 만드는 방법에 대해 알아볼까 합니다.</p>\n<p>다행히도 깃허브에 <code class=\"language-text\">react-blog</code> 정도의 키워드만 검색하더라도 상당히 많은 코드를 볼 수 있습니다.</p>\n<img src=\"https://user-images.githubusercontent.com/42150335/134343925-24160a6a-5d85-4954-a38a-f32289376680.png\" width=\"500\">  \n<p>저희는 이 중 <a href=\"https://github.com/scttcper/gatsby-casper\"><code class=\"language-text\">gatsby-casper</code></a> 라는 오픈소스를 이용해보겠습니다.</p>\n<p>많은 블로그 테마를 찾아봤는데, 디자인이 마음에 안 들거나, 커스터마이징이 어렵거나, 이미지 삽입이 어렵다거나 하는 애로사항이 있었는데,\n이 테마는 디자인, 커스터마이징, 이미지 삽입 등이 손쉽다는 장점이 있습니다.</p>\n<p>특히 몇몇 테마는 이미지 삽입시 400x400 사이즈만 지원한다던가 하는 등 기능적으로 아쉬운 부분이 많았는데, 해당 테마는 어떤 사이즈의 이미지던지\n알아서 조절해주는 점 등이 편리했습니다.</p>\n<p>해당 테마는 <a href=\"https://gatsby-casper.netlify.app/\">이곳</a> 에서 데모 사이트를 구경하실 수 있습니다.</p>\n<p>이 외에도 개인적으로 마음에 들었던 사이트들을 아래에 정리했습니다.</p>\n<ul>\n<li><a href=\"https://mldangelo.com/about/\">https://mldangelo.com/about/</a></li>\n<li><a href=\"https://gatsby-starter-personal-blog.greglobinski.com/\">https://gatsby-starter-personal-blog.greglobinski.com/</a></li>\n<li><a href=\"https://riyazweb.dev/\">https://riyazweb.dev/</a></li>\n<li><a href=\"https://www.ryan-floyd.com/\">https://www.ryan-floyd.com/</a></li>\n<li><a href=\"https://www.mehdibha.codehub.tn/\">https://www.mehdibha.codehub.tn/</a></li>\n</ul>\n<h2>환경설정</h2>\n<p>해당 테마를 적용하기 위해서는 <code class=\"language-text\">nodejs</code>와 <code class=\"language-text\">npm</code> 설치가 필요합니다.</p>\n<ul>\n<li>Nodejs &#x26; NPM 정의</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">Node.js®는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다.\nNode.js는 이벤트 기반, Non 블로킹 I/O 모델을 사용해 가볍고 효율적입니다. \nNode.js의 패키지 생태계인 npm은 세계에서 가장 큰 오픈 소스 라이브러리 생태계이기도 합니다.</code></pre></div>\n<p>위와 같이 정의가 되어 있긴 한데, 쉽게 말하면 <code class=\"language-text\">nodejs</code>는  JavaScript 기반으로 구성된 서버 사이드 서비스를 JavaScript로 구현할 수 있게 만든 런타임이고, <code class=\"language-text\">npm</code>은 <code class=\"language-text\">nodejs</code> 기반의 모듈을 모아둔 집합 저장소이다.</p>\n<h3>Nodejs &#x26; NPM 설치</h3>\n<p><code class=\"language-text\">Nodejs</code>와 <code class=\"language-text\">npm</code>은 <a href=\"https://nodejs.org/en/\">여기</a>서 다운로드 가능합니다.</p>\n<ul>\n<li>Node js &#x26; npm 설치 확인</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">$ node -v\nv14.17.6\n$ npm -v\n6.14.15</code></pre></div>\n<p>위 명령어를 실행했을 때, 정상적으로 버젼이 나오면 설치가 완료된 겁니다.</p>\n<h3>Gatsby 설치</h3>\n<p><code class=\"language-text\">Gatsby</code>란 React 기반의 정적 페이지 생성 프레임워크입니다. 여기서는 지금 당장 필요한 라이브러리 중 하나 정도로 생각하고 넘어갑시다.</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">$ npm install -g gatsby-cli</code></pre></div>\n<p>해당 명령어 실행시 가끔 npm audit 어쩌고 하는 글이 나오면서 설치가 실패할 수가 있습니다.<br>\n그러면 아래 명령어로 실행하면 됩니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">$ npm install -g gatsby-cli --no-audit</code></pre></div>\n<h2>Quick Start</h2>\n<p>환경설정이 완료됐으면, 이제 실제로 코드를 실행해봅시다.</p>\n<p>먼저 git을 이용해서 해당 코드를 clone 합니다. (git 설치는 스킵)</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">$ cd $WORKING_DIRECTORY\n$ git clone https://github.com/scttcper/gatsby-casper.git\n$ cd gatsby-casper</code></pre></div>\n<p>다음은 해당 웹페이지 구성에 필요한 requirements를 설치합니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">$ npm install --no-audit</code></pre></div>\n<p>설치가 완료되면 웹페이지를 실행합니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">$ npm start</code></pre></div>\n<p>해당 명령어까지 문제없이 실행됐다면 <a href=\"http://localhost:8000/\">http://localhost:8000/</a> 로 접속하면 아래와 같은 화면을 볼 수 있습니다.</p>\n<img src=\"https://user-images.githubusercontent.com/42150335/134347816-a5bd9336-dda5-4b90-8935-2355675391a2.png\" width=\"700\">\n<h2>Customizing</h2>\n<p>이제는 해당 웹페이지를 본인 스타일로 커스터마이징 해봅시다.</p>\n<h3>1. 대문 이미지 &#x26; 글 수정</h3>\n<img src=\"https://user-images.githubusercontent.com/42150335/134353098-994b95e9-6a61-45f8-9955-57779101cbe5.png\" width=\"600\">\n<p>먼저 저 <code class=\"language-text\">ghost</code>, <code class=\"language-text\">The professional publishing platform</code>라고 써져 있는 부분을 커스터마이징 해봅시다.</p>\n<p><code class=\"language-text\">$CASPER_GATSBY_DIR/src/website-config.ts</code> 파일을 엽니다.<br>\n아래로 내리다보면 아래 같은 코드가 있습니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> <span class=\"token literal-property property\">config</span><span class=\"token operator\">:</span> WebsiteConfig <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token literal-property property\">title</span><span class=\"token operator\">:</span> <span class=\"token string\">'Ghost'</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">description</span><span class=\"token operator\">:</span> <span class=\"token string\">'The professional publishing platform'</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">coverImage</span><span class=\"token operator\">:</span> <span class=\"token string\">'img/blog-cover.png'</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">logo</span><span class=\"token operator\">:</span> <span class=\"token string\">'img/ghost-logo.png'</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">lang</span><span class=\"token operator\">:</span> <span class=\"token string\">'en'</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">siteUrl</span><span class=\"token operator\">:</span> <span class=\"token string\">'https://gatsby-casper.netlify.com'</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">facebook</span><span class=\"token operator\">:</span> <span class=\"token string\">'https://www.facebook.com/ghost'</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">twitter</span><span class=\"token operator\">:</span> <span class=\"token string\">'https://twitter.com/tryghost'</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">showSubscribe</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">mailchimpAction</span><span class=\"token operator\">:</span>\n    <span class=\"token string\">'https://twitter.us19.list-manage.com/subscribe/post?u=a89b6987ac248c81b0b7f3a0f&amp;amp;id=7d777b7d75'</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">mailchimpName</span><span class=\"token operator\">:</span> <span class=\"token string\">'b_a89b6987ac248c81b0b7f3a0f_7d777b7d75'</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">mailchimpEmailFieldName</span><span class=\"token operator\">:</span> <span class=\"token string\">'MERGE0'</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">googleSiteVerification</span><span class=\"token operator\">:</span> <span class=\"token string\">'GoogleCode'</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">footer</span><span class=\"token operator\">:</span> <span class=\"token string\">'is based on Gatsby Casper'</span><span class=\"token punctuation\">,</span>\n  <span class=\"token literal-property property\">showAllTags</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span></code></pre></div>\n<ul>\n<li><code class=\"language-text\">title</code>: 웹 페이지 탭에 뜨는 텍스트</li>\n<li><code class=\"language-text\">description</code>: 대문에 나오는 description 텍스트</li>\n<li><code class=\"language-text\">coverImage</code>: 대문 배경 이미지</li>\n<li><code class=\"language-text\">logo</code>: description 위에 있는 이미지 (ghost라고 써져 있는 이미지)</li>\n</ul>\n<p>등등 위 내용을 본인이 원하는대로 수정해주시면 됩니다.</p>\n<h3>2. NavBar 수정</h3>\n<img src=\"https://user-images.githubusercontent.com/42150335/134353166-00a2913d-d72a-4281-a640-bbd73818353e.png\" width=\"600\">  \n<p>페이지 상단에 있는 메뉴를 커스터마이징 해봅시다.<br>\n해당 내용은 <code class=\"language-text\">$CASPER_GATSBY_DIR/src/header/SiteNav.tsx</code>에서 수정 가능합니다.</p>\n<p>해당 파일에서 <code class=\"language-text\">nav-current</code>를 검색하면 아래 코드들이 나옵니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token operator\">&lt;</span>li role<span class=\"token operator\">=</span><span class=\"token string\">\"menuitem\"</span><span class=\"token operator\">></span>\n  <span class=\"token operator\">&lt;</span>Link to<span class=\"token operator\">=</span><span class=\"token string\">\"/\"</span> activeClassName<span class=\"token operator\">=</span><span class=\"token string\">\"nav-current\"</span><span class=\"token operator\">></span>\n    Home\n  <span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>Link<span class=\"token operator\">></span>\n<span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>li<span class=\"token operator\">></span>\n<span class=\"token operator\">&lt;</span>li role<span class=\"token operator\">=</span><span class=\"token string\">\"menuitem\"</span><span class=\"token operator\">></span>\n  <span class=\"token operator\">&lt;</span>Link to<span class=\"token operator\">=</span><span class=\"token string\">\"/about\"</span> activeClassName<span class=\"token operator\">=</span><span class=\"token string\">\"nav-current\"</span><span class=\"token operator\">></span>\n    About\n  <span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>Link<span class=\"token operator\">></span>\n<span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>li<span class=\"token operator\">></span>\n<span class=\"token operator\">&lt;</span>li role<span class=\"token operator\">=</span><span class=\"token string\">\"menuitem\"</span><span class=\"token operator\">></span>\n  <span class=\"token operator\">&lt;</span>Link to<span class=\"token operator\">=</span><span class=\"token string\">\"/tags/getting-started/\"</span> activeClassName<span class=\"token operator\">=</span><span class=\"token string\">\"nav-current\"</span><span class=\"token operator\">></span>\n    Getting Started\n  <span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>Link<span class=\"token operator\">></span>\n<span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>li<span class=\"token operator\">></span></code></pre></div>\n<p>딱 보면 아시겠지만, 위에 있는 Home, About, Getting Started를 눌렀을 때 어느 링크로 보낼지에 대한 내용이 있는 코드입니다.<br>\n<code class=\"language-text\">/</code>는 베이스 링크 기준이므로 <code class=\"language-text\">/about</code>은 베이스링크 + about 링크입니다. (제 사이트에서는 sooftware.io/about/)</p>\n<p>저 링크에 <a href=\"http://www.google.com\">www.google.com</a> 등 어떤 링크를 넣어도 동작합니다.</p>\n<h3>3. Social Link 수정</h3>\n<img src=\"https://user-images.githubusercontent.com/42150335/134353245-c9549b8e-ace0-4c34-b5e9-3ac4487401db.png\" width=\"600\">\n<p>이 테마를 보면 페이스북, 트위터 favicon을 볼 수 있습니다.<br>\n해당 favicon을 누르면 정해진 링크로 이동됩니다.<br>\n이 링크를 깃허브, 페이스북, 링크드인으로 바꿔보겠습니다.</p>\n<p><code class=\"language-text\">$CASPER_GATSBY_DIR/src/website-config.ts</code> 파일을 수정합시다.<br>\n<code class=\"language-text\">WebsiteConfig</code> 클래에 github, linkedin을 추가하고 twitter는 날려버립시다.</p>\n<ul>\n<li>Before</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"typescript\"><pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">export</span> <span class=\"token keyword\">interface</span> <span class=\"token class-name\">WebsiteConfig</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token operator\">...</span>\n    facebook<span class=\"token operator\">?</span><span class=\"token operator\">:</span> <span class=\"token builtin\">string</span><span class=\"token punctuation\">;</span>\n    <span class=\"token comment\">/**\n     * full url, no username\n     */</span>\n    twitter<span class=\"token operator\">?</span><span class=\"token operator\">:</span> <span class=\"token builtin\">string</span><span class=\"token punctuation\">;</span>\n    <span class=\"token operator\">...</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<ul>\n<li>After</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"typescript\"><pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">export</span> <span class=\"token keyword\">interface</span> <span class=\"token class-name\">WebsiteConfig</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token operator\">...</span>\n    facebook<span class=\"token operator\">?</span><span class=\"token operator\">:</span> <span class=\"token builtin\">string</span><span class=\"token punctuation\">;</span>\n    <span class=\"token comment\">/**\n    * full url, no username\n    */</span>\n    github<span class=\"token operator\">?</span><span class=\"token operator\">:</span> <span class=\"token builtin\">string</span><span class=\"token punctuation\">;</span>\n    <span class=\"token comment\">/**\n    * full url, no username\n    */</span>\n    linkedin<span class=\"token operator\">?</span><span class=\"token operator\">:</span> <span class=\"token builtin\">string</span><span class=\"token punctuation\">;</span>\n    <span class=\"token operator\">...</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>그리고 같은 파일 아래쪽에 <code class=\"language-text\">WebsiteConfig</code> 변수를 다음과 같이 수정합니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"typescript\"><pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">const</span> config<span class=\"token operator\">:</span> WebsiteConfig <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token operator\">...</span>\n  facebook<span class=\"token operator\">:</span> <span class=\"token string\">'https://www.facebook.com/sooftware95'</span><span class=\"token punctuation\">,</span>\n  github<span class=\"token operator\">:</span> <span class=\"token string\">'https://www.github.com/sooftware'</span><span class=\"token punctuation\">,</span>\n  linkedin<span class=\"token operator\">:</span> <span class=\"token string\">'https://www.linkedin.com/in/Soo-hwan/'</span><span class=\"token punctuation\">,</span>\n  <span class=\"token operator\">...</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span></code></pre></div>\n<p>먼저 favicon을 쉽게 가져오기 위해 <code class=\"language-text\">react-icons</code>를 설치합니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">$ npm install react-icons --no-audit</code></pre></div>\n<p><code class=\"language-text\">$CASPER_GATSBY_DIR/src/header/SiteNav.tsx</code>의 아래 코드를 수정합니다.</p>\n<ul>\n<li>Before</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">import</span> <span class=\"token punctuation\">{</span> Facebook <span class=\"token punctuation\">}</span> <span class=\"token keyword\">from</span> <span class=\"token string\">'../icons/facebook'</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">import</span> <span class=\"token punctuation\">{</span> Twitter <span class=\"token punctuation\">}</span> <span class=\"token keyword\">from</span> <span class=\"token string\">'../icons/twitter'</span><span class=\"token punctuation\">;</span></code></pre></div>\n<ul>\n<li>After</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">import</span> <span class=\"token punctuation\">{</span> FaFacebook<span class=\"token punctuation\">,</span> FaGithub<span class=\"token punctuation\">,</span> FaLinkedinIn <span class=\"token punctuation\">}</span> <span class=\"token keyword\">from</span> <span class=\"token string\">'react-icons/fa'</span><span class=\"token punctuation\">;</span></code></pre></div>\n<p>그리고 밑으로 내려서 아래 코드를 다음과 같이 수정합시다.</p>\n<ul>\n<li>Before</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"typescript\"><pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token punctuation\">{</span>config<span class=\"token punctuation\">.</span>twitter <span class=\"token operator\">&amp;&amp;</span> <span class=\"token punctuation\">(</span>\n    <span class=\"token operator\">&lt;</span>a\n      css<span class=\"token operator\">=</span><span class=\"token punctuation\">{</span>SocialLink<span class=\"token punctuation\">}</span>\n      href<span class=\"token operator\">=</span><span class=\"token punctuation\">{</span>config<span class=\"token punctuation\">.</span>twitter<span class=\"token punctuation\">}</span>\n      title<span class=\"token operator\">=</span><span class=\"token string\">\"Twitter\"</span>\n      target<span class=\"token operator\">=</span><span class=\"token string\">\"_blank\"</span>\n      rel<span class=\"token operator\">=</span><span class=\"token string\">\"noopener noreferrer\"</span>\n    <span class=\"token operator\">></span>\n      <span class=\"token operator\">&lt;</span>Twitter <span class=\"token operator\">/</span><span class=\"token operator\">></span>\n    <span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>a<span class=\"token operator\">></span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">}</span></code></pre></div>\n<ul>\n<li>After</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"typescript\"><pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token punctuation\">{</span>config<span class=\"token punctuation\">.</span>github <span class=\"token operator\">&amp;&amp;</span> <span class=\"token punctuation\">(</span>\n    <span class=\"token operator\">&lt;</span>a\n      css<span class=\"token operator\">=</span><span class=\"token punctuation\">{</span>SocialLink<span class=\"token punctuation\">}</span>\n      href<span class=\"token operator\">=</span><span class=\"token punctuation\">{</span>config<span class=\"token punctuation\">.</span>github<span class=\"token punctuation\">}</span>\n      title<span class=\"token operator\">=</span><span class=\"token string\">\"Github\"</span>\n      target<span class=\"token operator\">=</span><span class=\"token string\">\"_blank\"</span>\n      rel<span class=\"token operator\">=</span><span class=\"token string\">\"noopener noreferrer\"</span>\n    <span class=\"token operator\">></span>\n      <span class=\"token operator\">&lt;</span>FaGithub <span class=\"token operator\">/</span><span class=\"token operator\">></span>\n    <span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>a<span class=\"token operator\">></span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">}</span></code></pre></div>\n<p>그럼 아래같이 깃허브, 링크드인이 추가된 것을 볼 수 있습니다.</p>\n<img src=\"https://user-images.githubusercontent.com/42150335/134356415-3459fecd-5dc2-4085-9d8a-621cf23ebf91.png\" width=\"600\">  \n<p>이러한 favicon들은 <a href=\"https://react-icons.github.io/react-icons/\">https://react-icons.github.io/react-icons/</a> 가면 제공되는 icon들을 확인할 수 있습니다.</p>\n<img src=\"https://user-images.githubusercontent.com/42150335/134357055-838e95b0-f7e7-4192-ba8e-efd46fe721d3.png\" width=\"600\">\n<h3>4. 포스트 수정</h3>\n<img src=\"https://user-images.githubusercontent.com/42150335/134357244-b605c591-4fec-4a3d-9979-a51b03cf4291.png\" width=\"600\">  \n<p>다음으로 포스팅을 추가/수정 해봅시다.</p>\n<p><code class=\"language-text\">$CASPER_GATSBY_DIR/src/content/</code>에 가면 현재 올라와있는 포스트 관련한 마크다운 파일과 이미지 폴더가 있습니다.</p>\n<p>해당 마크다운 파일 맨 위에 아래와 같은 형식만 유지하고 아래는 기존 마크다운 문법을 유지해서 글을 작성하면 됩니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">---\ntitle: '2020년 회고'\nauthor: [Soohwan Kim]\ntags: [retrospect]\nimage: img/2020.png\ndate: '2020-12-31T10:00:00.000Z'\ndraft: false\n---</code></pre></div>\n<p>위 형식에는 포스트의 타이틀, 작성자 및 작성 날짜와 대표 이미지 등을 설정할 수 있습니다.</p>\n<h2>Github 업로드</h2>\n<p>커스터마이징까지 완료했으면 해당 파일들을 깃허브에 업로드합니다.<br>\n꼭 깃허브에 업로드해야되는 것은 아닙니다만, 현재 글에서는 배포와 업데이트의 편리을 위해 깃허브 업로드를 추천드립니다.</p>\n<p>깃허브 업로드는 생략하겠습니다.</p>\n<h2>Deployment (배포)</h2>\n<p>커스터마이징까지 완료했으면 이제 해당 페이지를 배포해봅시다.<br>\n자신이 가진 컴퓨터로 블로그 서버를 이용해도 되지만 일반적으로는 cpu 서버를 대여해서 배포합니다.</p>\n<p>AWS, GCP 등이 대표적입니다만, 최근에는 <a href=\"https://app.netlify.com/\">Netlify</a>라는 서비스를 이용하면 쉽게 웹페이지 배포가 가능합니다.</p>\n<img src=\"https://user-images.githubusercontent.com/42150335/134358858-20d8cdba-5a8c-4577-ab01-2f86cca8fd45.png\" width=\"500\">\n<p>Netlify 홈페이지에서 우측 상단에 Sign up 버튼을 눌러 회원가입을 합니다.<br>\n이미 회원이신 분들은 Log in 버튼으로 로그인하시면 되겠습니다.</p>\n<img src=\"https://user-images.githubusercontent.com/42150335/134358989-ffc79e5a-6e70-477f-8a3e-70b179e44aa5.png\" width=\"500\">  \n<p>이 때 깃허브 아이디와 연동해서 가입하면 여러가지로 편리하기 때문에 깃허브 아이디가 있으시다면 깃허브와 연동하는 것을 추천합니다.</p>\n<p>가입 및 이메일 인증까지 끝내가 netlify로 들어가게 되면 아래 화면으로 접속됩니다.</p>\n<img src=\"https://user-images.githubusercontent.com/42150335/134359237-05cae5a6-145b-48d8-bfa9-aafae9b9b367.png\" width=\"600\">  \n<p>저기서 우리는 New site from Git 버튼을 눌러줍니다.</p>\n<img src=\"https://user-images.githubusercontent.com/42150335/134359972-c02b0bca-490b-451f-b5a1-da1c17ab0820.png\" width=\"500\">  \n<p>그러면 위와 같은 화면이 뜨게 됩니다.<br>\n여기서 GitHub를 선택하고 레포를 선택해줍니다.</p>\n<img src=\"https://user-images.githubusercontent.com/42150335/134360288-adfeb583-ecac-4db1-b0ec-ec7a5a35f0e4.png\" width=\"500\">  \n<p>그렇게 설정을 하고 다시 netlify 기본 페이지로 돌아오면 위와 같은 deploy 목록에 하나가 뜨게 됩니다.</p>\n<p>오른쪽 <code class=\"language-text\">></code> 버튼을 누르면 deploy 진행 상황에 대한 log를 볼 수 있습니다.</p>\n<p>log에서 아래와 같이 <code class=\"language-text\">Netlify Build Complete</code>가 뜨게 되면 성공적으로 배포에 성공한겁니다.</p>\n<img src=\"https://user-images.githubusercontent.com/42150335/134361914-d75e2f7d-dc1d-4830-987b-1ae5980f7313.png\" width=\"400\">  \n<p>배포에 성공하고 deploy한 프로젝트에 들어가면 아래 화면의 <code class=\"language-text\">https://sooftware.io</code>가 적혀있는 쪽에 본인만의 사이트 링크가 있을겁니다.<br>\n저는 커스텀 도메인을 적용했기 때문에 저런 링크가 뜨지만 따로 적용하지 않은 경우 <code class=\"language-text\">https://[PROJECT_NAME].netlify.app</code> 형식으로 웹페이지 주소가 형성됩니다.</p>\n<img src=\"https://user-images.githubusercontent.com/42150335/134362178-74d1c716-464e-4007-a6c0-6f5cfceab1f4.png\" width=\"400\">\n<h2>Custom Domain</h2>\n<p>이제 배포한 웹페이지 주소를 커스텀 도메인으로 설정해봅시다.<br>\n도메인을 사용하기 위해서는 도메인 구입이 필요합니다.</p>\n<p>저는 hosting.kr이라는 사이트에서 도메인을 구입했습니다.</p>\n<img src=\"https://user-images.githubusercontent.com/42150335/134363042-35854d97-6d71-41f3-a290-428dcd881bb2.png\" width=\"600\">  \n<p>위 사이트의 <code class=\"language-text\">검색할 도메인을 입력하세요</code> 쪽에 원하는 도메인을 입력하면 해당 도메인 사용여부 및 가격이 나오게 됩니다.</p>\n<p>아래는 sooftware를 검색했을 때의 결과입니다.</p>\n<img src=\"https://user-images.githubusercontent.com/42150335/134363258-4ade15f5-b221-4fb3-86bb-59637c33f3c8.png\" width=\"400\">  \n<p>원하는 도메인을 구입하고 나면 다시 netlify로 돌아갑니다.</p>\n<img src=\"https://user-images.githubusercontent.com/42150335/134363707-9f2e0b3c-ee59-4af5-a233-5cff179d98fe.png\" width=\"500\">  \n<p>위 페이지에서 <code class=\"language-text\">Domatin setting</code>을 들어갑니다.</p>\n<img src=\"https://user-images.githubusercontent.com/42150335/134363947-7b4d54ee-4567-4b42-90aa-a4f65b389728.png\" width=\"500\">  \n<p>여기서 Add domain alias로 구입한 도메인 링크를 추가하고 몇 가지 인증 절차만 수행해주게 되면 sooftware.io 와 같은 커스텀 도메인이 적용이 되게됩니다.</p>\n<h2>Reference</h2>\n<ul>\n<li><a href=\"https://github.com/scttcper/gatsby-casper\">https://github.com/scttcper/gatsby-casper</a></li>\n</ul>","htmlAst":{"type":"root","children":[{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"React 기반 개인 웹페이지 배포하기"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"이번 글에서는 react를 이용해서 개인 웹페이지 제작부터 웹페이지 배포, 그리고 자신이 원하는 도메인 이름으로 적용까지를 다뤄보겠습니다."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n지금 보시는 "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"sooftware.io"}]},{"type":"text","value":"와 같은 홈페이지를 제작하는 방법이라고 생각하시면 될 것 같습니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"React 기반 오픈소스 찾기"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://user-images.githubusercontent.com/42150335/134343629-3e301e42-50de-43e5-ba18-ab13582e931c.png","width":400},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"리액트는 자바스크립트 라이브러리의 하나로서 간단히 말하면 react 기반으로 웹페이지를 만들면\n스마트폰 어플리케이션에서도 보기 좋게 나오게 해주는 좋은 라이브러리라고 보시면 됩니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"코드를 하나만 짜면 웹, 앱이 한 번에 해결되기 때문에 최근에는 많은 분들이 react 기반으로 웹페이지를 제작하는 경우가 많은 것 같습니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"react를 잘 다루시는 개발자라면 개인 웹페이지 만드는것쯤은 뚝-딱 만드시겠지만, 꼭 웹개발자 분들만 개인 웹페이지를 만들고 싶으신 건 아니기 때문에,\nreact를 하나도 모르더라도 지금 보시는 페이지와 같은 개인 웹페이지를 만드는 방법에 대해 알아볼까 합니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"다행히도 깃허브에 "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"react-blog"}]},{"type":"text","value":" 정도의 키워드만 검색하더라도 상당히 많은 코드를 볼 수 있습니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://user-images.githubusercontent.com/42150335/134343925-24160a6a-5d85-4954-a38a-f32289376680.png","width":500},"children":[]},{"type":"text","value":"  \n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"저희는 이 중 "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/scttcper/gatsby-casper"},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"gatsby-casper"}]}]},{"type":"text","value":" 라는 오픈소스를 이용해보겠습니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"많은 블로그 테마를 찾아봤는데, 디자인이 마음에 안 들거나, 커스터마이징이 어렵거나, 이미지 삽입이 어렵다거나 하는 애로사항이 있었는데,\n이 테마는 디자인, 커스터마이징, 이미지 삽입 등이 손쉽다는 장점이 있습니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"특히 몇몇 테마는 이미지 삽입시 400x400 사이즈만 지원한다던가 하는 등 기능적으로 아쉬운 부분이 많았는데, 해당 테마는 어떤 사이즈의 이미지던지\n알아서 조절해주는 점 등이 편리했습니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"해당 테마는 "},{"type":"element","tagName":"a","properties":{"href":"https://gatsby-casper.netlify.app/"},"children":[{"type":"text","value":"이곳"}]},{"type":"text","value":" 에서 데모 사이트를 구경하실 수 있습니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"이 외에도 개인적으로 마음에 들었던 사이트들을 아래에 정리했습니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://mldangelo.com/about/"},"children":[{"type":"text","value":"https://mldangelo.com/about/"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://gatsby-starter-personal-blog.greglobinski.com/"},"children":[{"type":"text","value":"https://gatsby-starter-personal-blog.greglobinski.com/"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://riyazweb.dev/"},"children":[{"type":"text","value":"https://riyazweb.dev/"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://www.ryan-floyd.com/"},"children":[{"type":"text","value":"https://www.ryan-floyd.com/"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://www.mehdibha.codehub.tn/"},"children":[{"type":"text","value":"https://www.mehdibha.codehub.tn/"}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"환경설정"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"해당 테마를 적용하기 위해서는 "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"nodejs"}]},{"type":"text","value":"와 "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"npm"}]},{"type":"text","value":" 설치가 필요합니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Nodejs & NPM 정의"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Node.js®는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다.\nNode.js는 이벤트 기반, Non 블로킹 I/O 모델을 사용해 가볍고 효율적입니다. \nNode.js의 패키지 생태계인 npm은 세계에서 가장 큰 오픈 소스 라이브러리 생태계이기도 합니다."}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"위와 같이 정의가 되어 있긴 한데, 쉽게 말하면 "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"nodejs"}]},{"type":"text","value":"는  JavaScript 기반으로 구성된 서버 사이드 서비스를 JavaScript로 구현할 수 있게 만든 런타임이고, "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"npm"}]},{"type":"text","value":"은 "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"nodejs"}]},{"type":"text","value":" 기반의 모듈을 모아둔 집합 저장소이다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{},"children":[{"type":"text","value":"Nodejs & NPM 설치"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Nodejs"}]},{"type":"text","value":"와 "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"npm"}]},{"type":"text","value":"은 "},{"type":"element","tagName":"a","properties":{"href":"https://nodejs.org/en/"},"children":[{"type":"text","value":"여기"}]},{"type":"text","value":"서 다운로드 가능합니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Node js & npm 설치 확인"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"$ node -v\nv14.17.6\n$ npm -v\n6.14.15"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"위 명령어를 실행했을 때, 정상적으로 버젼이 나오면 설치가 완료된 겁니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{},"children":[{"type":"text","value":"Gatsby 설치"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Gatsby"}]},{"type":"text","value":"란 React 기반의 정적 페이지 생성 프레임워크입니다. 여기서는 지금 당장 필요한 라이브러리 중 하나 정도로 생각하고 넘어갑시다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"$ npm install -g gatsby-cli"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"해당 명령어 실행시 가끔 npm audit 어쩌고 하는 글이 나오면서 설치가 실패할 수가 있습니다."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n그러면 아래 명령어로 실행하면 됩니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"$ npm install -g gatsby-cli --no-audit"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"Quick Start"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"환경설정이 완료됐으면, 이제 실제로 코드를 실행해봅시다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"먼저 git을 이용해서 해당 코드를 clone 합니다. (git 설치는 스킵)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"$ cd $WORKING_DIRECTORY\n$ git clone https://github.com/scttcper/gatsby-casper.git\n$ cd gatsby-casper"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"다음은 해당 웹페이지 구성에 필요한 requirements를 설치합니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"$ npm install --no-audit"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"설치가 완료되면 웹페이지를 실행합니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"$ npm start"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"해당 명령어까지 문제없이 실행됐다면 "},{"type":"element","tagName":"a","properties":{"href":"http://localhost:8000/"},"children":[{"type":"text","value":"http://localhost:8000/"}]},{"type":"text","value":" 로 접속하면 아래와 같은 화면을 볼 수 있습니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://user-images.githubusercontent.com/42150335/134347816-a5bd9336-dda5-4b90-8935-2355675391a2.png","width":700},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"Customizing"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"이제는 해당 웹페이지를 본인 스타일로 커스터마이징 해봅시다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{},"children":[{"type":"text","value":"1. 대문 이미지 & 글 수정"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://user-images.githubusercontent.com/42150335/134353098-994b95e9-6a61-45f8-9955-57779101cbe5.png","width":600},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"먼저 저 "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"ghost"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"The professional publishing platform"}]},{"type":"text","value":"라고 써져 있는 부분을 커스터마이징 해봅시다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"$CASPER_GATSBY_DIR/src/website-config.ts"}]},{"type":"text","value":" 파일을 엽니다."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n아래로 내리다보면 아래 같은 코드가 있습니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"javascript"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-javascript"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-javascript"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"config"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" WebsiteConfig "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"title"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'Ghost'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"description"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'The professional publishing platform'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"coverImage"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'img/blog-cover.png'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"logo"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'img/ghost-logo.png'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"lang"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'en'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"siteUrl"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'https://gatsby-casper.netlify.com'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"facebook"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'https://www.facebook.com/ghost'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"twitter"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'https://twitter.com/tryghost'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"showSubscribe"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"true"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"mailchimpAction"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'https://twitter.us19.list-manage.com/subscribe/post?u=a89b6987ac248c81b0b7f3a0f&amp;id=7d777b7d75'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"mailchimpName"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'b_a89b6987ac248c81b0b7f3a0f_7d777b7d75'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"mailchimpEmailFieldName"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'MERGE0'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"googleSiteVerification"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'GoogleCode'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"footer"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'is based on Gatsby Casper'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"showAllTags"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"true"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"title"}]},{"type":"text","value":": 웹 페이지 탭에 뜨는 텍스트"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"description"}]},{"type":"text","value":": 대문에 나오는 description 텍스트"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"coverImage"}]},{"type":"text","value":": 대문 배경 이미지"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"logo"}]},{"type":"text","value":": description 위에 있는 이미지 (ghost라고 써져 있는 이미지)"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"등등 위 내용을 본인이 원하는대로 수정해주시면 됩니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{},"children":[{"type":"text","value":"2. NavBar 수정"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://user-images.githubusercontent.com/42150335/134353166-00a2913d-d72a-4281-a640-bbd73818353e.png","width":600},"children":[]},{"type":"text","value":"  \n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"페이지 상단에 있는 메뉴를 커스터마이징 해봅시다."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n해당 내용은 "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"$CASPER_GATSBY_DIR/src/header/SiteNav.tsx"}]},{"type":"text","value":"에서 수정 가능합니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"해당 파일에서 "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"nav-current"}]},{"type":"text","value":"를 검색하면 아래 코드들이 나옵니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"javascript"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-javascript"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-javascript"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"li role"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"menuitem\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"Link to"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"/\""}]},{"type":"text","value":" activeClassName"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"nav-current\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n    Home\n  "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"Link"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"li"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"li role"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"menuitem\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"Link to"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"/about\""}]},{"type":"text","value":" activeClassName"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"nav-current\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n    About\n  "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"Link"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"li"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"li role"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"menuitem\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"Link to"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"/tags/getting-started/\""}]},{"type":"text","value":" activeClassName"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"nav-current\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n    Getting Started\n  "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"Link"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"li"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"딱 보면 아시겠지만, 위에 있는 Home, About, Getting Started를 눌렀을 때 어느 링크로 보낼지에 대한 내용이 있는 코드입니다."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"는 베이스 링크 기준이므로 "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"/about"}]},{"type":"text","value":"은 베이스링크 + about 링크입니다. (제 사이트에서는 sooftware.io/about/)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"저 링크에 "},{"type":"element","tagName":"a","properties":{"href":"http://www.google.com"},"children":[{"type":"text","value":"www.google.com"}]},{"type":"text","value":" 등 어떤 링크를 넣어도 동작합니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{},"children":[{"type":"text","value":"3. Social Link 수정"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://user-images.githubusercontent.com/42150335/134353245-c9549b8e-ace0-4c34-b5e9-3ac4487401db.png","width":600},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"이 테마를 보면 페이스북, 트위터 favicon을 볼 수 있습니다."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n해당 favicon을 누르면 정해진 링크로 이동됩니다."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n이 링크를 깃허브, 페이스북, 링크드인으로 바꿔보겠습니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"$CASPER_GATSBY_DIR/src/website-config.ts"}]},{"type":"text","value":" 파일을 수정합시다."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"WebsiteConfig"}]},{"type":"text","value":" 클래에 github, linkedin을 추가하고 twitter는 날려버립시다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Before"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"typescript"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-typescript"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-typescript"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"export"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"interface"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name"]},"children":[{"type":"text","value":"WebsiteConfig"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"..."}]},{"type":"text","value":"\n    facebook"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"?"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","builtin"]},"children":[{"type":"text","value":"string"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"/**\n     * full url, no username\n     */"}]},{"type":"text","value":"\n    twitter"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"?"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","builtin"]},"children":[{"type":"text","value":"string"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"..."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"After"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"typescript"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-typescript"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-typescript"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"export"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"interface"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name"]},"children":[{"type":"text","value":"WebsiteConfig"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"..."}]},{"type":"text","value":"\n    facebook"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"?"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","builtin"]},"children":[{"type":"text","value":"string"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"/**\n    * full url, no username\n    */"}]},{"type":"text","value":"\n    github"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"?"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","builtin"]},"children":[{"type":"text","value":"string"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"/**\n    * full url, no username\n    */"}]},{"type":"text","value":"\n    linkedin"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"?"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","builtin"]},"children":[{"type":"text","value":"string"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"..."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"그리고 같은 파일 아래쪽에 "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"WebsiteConfig"}]},{"type":"text","value":" 변수를 다음과 같이 수정합니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"typescript"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-typescript"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-typescript"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" config"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" WebsiteConfig "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"..."}]},{"type":"text","value":"\n  facebook"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'https://www.facebook.com/sooftware95'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n  github"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'https://www.github.com/sooftware'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n  linkedin"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'https://www.linkedin.com/in/Soo-hwan/'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"..."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"먼저 favicon을 쉽게 가져오기 위해 "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"react-icons"}]},{"type":"text","value":"를 설치합니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"$ npm install react-icons --no-audit"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"$CASPER_GATSBY_DIR/src/header/SiteNav.tsx"}]},{"type":"text","value":"의 아래 코드를 수정합니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Before"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"javascript"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-javascript"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-javascript"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" Facebook "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'../icons/facebook'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" Twitter "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'../icons/twitter'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"After"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"javascript"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-javascript"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-javascript"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" FaFacebook"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" FaGithub"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" FaLinkedinIn "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'react-icons/fa'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"그리고 밑으로 내려서 아래 코드를 다음과 같이 수정합시다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Before"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"typescript"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-typescript"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-typescript"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"config"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"twitter "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"&&"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"a\n      css"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"SocialLink"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n      href"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"config"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"twitter"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n      title"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"Twitter\""}]},{"type":"text","value":"\n      target"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"_blank\""}]},{"type":"text","value":"\n      rel"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"noopener noreferrer\""}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"Twitter "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"a"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"After"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"typescript"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-typescript"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-typescript"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"config"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"github "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"&&"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"a\n      css"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"SocialLink"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n      href"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"config"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"github"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n      title"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"Github\""}]},{"type":"text","value":"\n      target"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"_blank\""}]},{"type":"text","value":"\n      rel"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"noopener noreferrer\""}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"FaGithub "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"a"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"그럼 아래같이 깃허브, 링크드인이 추가된 것을 볼 수 있습니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://user-images.githubusercontent.com/42150335/134356415-3459fecd-5dc2-4085-9d8a-621cf23ebf91.png","width":600},"children":[]},{"type":"text","value":"  \n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"이러한 favicon들은 "},{"type":"element","tagName":"a","properties":{"href":"https://react-icons.github.io/react-icons/"},"children":[{"type":"text","value":"https://react-icons.github.io/react-icons/"}]},{"type":"text","value":" 가면 제공되는 icon들을 확인할 수 있습니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://user-images.githubusercontent.com/42150335/134357055-838e95b0-f7e7-4192-ba8e-efd46fe721d3.png","width":600},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{},"children":[{"type":"text","value":"4. 포스트 수정"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://user-images.githubusercontent.com/42150335/134357244-b605c591-4fec-4a3d-9979-a51b03cf4291.png","width":600},"children":[]},{"type":"text","value":"  \n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"다음으로 포스팅을 추가/수정 해봅시다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"$CASPER_GATSBY_DIR/src/content/"}]},{"type":"text","value":"에 가면 현재 올라와있는 포스트 관련한 마크다운 파일과 이미지 폴더가 있습니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"해당 마크다운 파일 맨 위에 아래와 같은 형식만 유지하고 아래는 기존 마크다운 문법을 유지해서 글을 작성하면 됩니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"---\ntitle: '2020년 회고'\nauthor: [Soohwan Kim]\ntags: [retrospect]\nimage: img/2020.png\ndate: '2020-12-31T10:00:00.000Z'\ndraft: false\n---"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"위 형식에는 포스트의 타이틀, 작성자 및 작성 날짜와 대표 이미지 등을 설정할 수 있습니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"Github 업로드"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"커스터마이징까지 완료했으면 해당 파일들을 깃허브에 업로드합니다."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n꼭 깃허브에 업로드해야되는 것은 아닙니다만, 현재 글에서는 배포와 업데이트의 편리을 위해 깃허브 업로드를 추천드립니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"깃허브 업로드는 생략하겠습니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"Deployment (배포)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"커스터마이징까지 완료했으면 이제 해당 페이지를 배포해봅시다."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n자신이 가진 컴퓨터로 블로그 서버를 이용해도 되지만 일반적으로는 cpu 서버를 대여해서 배포합니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"AWS, GCP 등이 대표적입니다만, 최근에는 "},{"type":"element","tagName":"a","properties":{"href":"https://app.netlify.com/"},"children":[{"type":"text","value":"Netlify"}]},{"type":"text","value":"라는 서비스를 이용하면 쉽게 웹페이지 배포가 가능합니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://user-images.githubusercontent.com/42150335/134358858-20d8cdba-5a8c-4577-ab01-2f86cca8fd45.png","width":500},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Netlify 홈페이지에서 우측 상단에 Sign up 버튼을 눌러 회원가입을 합니다."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n이미 회원이신 분들은 Log in 버튼으로 로그인하시면 되겠습니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://user-images.githubusercontent.com/42150335/134358989-ffc79e5a-6e70-477f-8a3e-70b179e44aa5.png","width":500},"children":[]},{"type":"text","value":"  \n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"이 때 깃허브 아이디와 연동해서 가입하면 여러가지로 편리하기 때문에 깃허브 아이디가 있으시다면 깃허브와 연동하는 것을 추천합니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"가입 및 이메일 인증까지 끝내가 netlify로 들어가게 되면 아래 화면으로 접속됩니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://user-images.githubusercontent.com/42150335/134359237-05cae5a6-145b-48d8-bfa9-aafae9b9b367.png","width":600},"children":[]},{"type":"text","value":"  \n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"저기서 우리는 New site from Git 버튼을 눌러줍니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://user-images.githubusercontent.com/42150335/134359972-c02b0bca-490b-451f-b5a1-da1c17ab0820.png","width":500},"children":[]},{"type":"text","value":"  \n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"그러면 위와 같은 화면이 뜨게 됩니다."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n여기서 GitHub를 선택하고 레포를 선택해줍니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://user-images.githubusercontent.com/42150335/134360288-adfeb583-ecac-4db1-b0ec-ec7a5a35f0e4.png","width":500},"children":[]},{"type":"text","value":"  \n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"그렇게 설정을 하고 다시 netlify 기본 페이지로 돌아오면 위와 같은 deploy 목록에 하나가 뜨게 됩니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"오른쪽 "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":" 버튼을 누르면 deploy 진행 상황에 대한 log를 볼 수 있습니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"log에서 아래와 같이 "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Netlify Build Complete"}]},{"type":"text","value":"가 뜨게 되면 성공적으로 배포에 성공한겁니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://user-images.githubusercontent.com/42150335/134361914-d75e2f7d-dc1d-4830-987b-1ae5980f7313.png","width":400},"children":[]},{"type":"text","value":"  \n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"배포에 성공하고 deploy한 프로젝트에 들어가면 아래 화면의 "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"https://sooftware.io"}]},{"type":"text","value":"가 적혀있는 쪽에 본인만의 사이트 링크가 있을겁니다."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n저는 커스텀 도메인을 적용했기 때문에 저런 링크가 뜨지만 따로 적용하지 않은 경우 "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"https://[PROJECT_NAME].netlify.app"}]},{"type":"text","value":" 형식으로 웹페이지 주소가 형성됩니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://user-images.githubusercontent.com/42150335/134362178-74d1c716-464e-4007-a6c0-6f5cfceab1f4.png","width":400},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"Custom Domain"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"이제 배포한 웹페이지 주소를 커스텀 도메인으로 설정해봅시다."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n도메인을 사용하기 위해서는 도메인 구입이 필요합니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"저는 hosting.kr이라는 사이트에서 도메인을 구입했습니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://user-images.githubusercontent.com/42150335/134363042-35854d97-6d71-41f3-a290-428dcd881bb2.png","width":600},"children":[]},{"type":"text","value":"  \n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"위 사이트의 "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"검색할 도메인을 입력하세요"}]},{"type":"text","value":" 쪽에 원하는 도메인을 입력하면 해당 도메인 사용여부 및 가격이 나오게 됩니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"아래는 sooftware를 검색했을 때의 결과입니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://user-images.githubusercontent.com/42150335/134363258-4ade15f5-b221-4fb3-86bb-59637c33f3c8.png","width":400},"children":[]},{"type":"text","value":"  \n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"원하는 도메인을 구입하고 나면 다시 netlify로 돌아갑니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://user-images.githubusercontent.com/42150335/134363707-9f2e0b3c-ee59-4af5-a233-5cff179d98fe.png","width":500},"children":[]},{"type":"text","value":"  \n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"위 페이지에서 "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"Domatin setting"}]},{"type":"text","value":"을 들어갑니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://user-images.githubusercontent.com/42150335/134363947-7b4d54ee-4567-4b42-90aa-a4f65b389728.png","width":500},"children":[]},{"type":"text","value":"  \n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"여기서 Add domain alias로 구입한 도메인 링크를 추가하고 몇 가지 인증 절차만 수행해주게 되면 sooftware.io 와 같은 커스텀 도메인이 적용이 되게됩니다."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"text","value":"Reference"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://github.com/scttcper/gatsby-casper"},"children":[{"type":"text","value":"https://github.com/scttcper/gatsby-casper"}]}]},{"type":"text","value":"\n"}]}],"data":{"quirksMode":false}},"excerpt":"React 기반 개인 웹페이지 배포하기 이번 글에서는 react…","fields":{"readingTime":{"text":"15 min read"}},"frontmatter":{"title":"React 기반 개인 웹페이지 배포하기 (gatsby)","userDate":"22 September 2021","date":"2021-09-22T10:00:00.000Z","tags":["toolkit","web"],"excerpt":null,"image":{"childImageSharp":{"gatsbyImageData":{"layout":"fullWidth","backgroundColor":"#080808","images":{"fallback":{"src":"/static/ddaa4cb6857e989e32ffc466cf76e8a5/7c984/gatsby.png","srcSet":"/static/ddaa4cb6857e989e32ffc466cf76e8a5/5b584/gatsby.png 750w,\n/static/ddaa4cb6857e989e32ffc466cf76e8a5/c1f05/gatsby.png 1080w,\n/static/ddaa4cb6857e989e32ffc466cf76e8a5/7c984/gatsby.png 1123w","sizes":"100vw"},"sources":[{"srcSet":"/static/ddaa4cb6857e989e32ffc466cf76e8a5/73e0d/gatsby.webp 750w,\n/static/ddaa4cb6857e989e32ffc466cf76e8a5/9fede/gatsby.webp 1080w,\n/static/ddaa4cb6857e989e32ffc466cf76e8a5/d4610/gatsby.webp 1123w","type":"image/webp","sizes":"100vw"}]},"width":1,"height":0.5253784505788067}}},"author":[{"id":"Soohwan Kim","bio":"Co-founder/A.I. engineer at TUNiB.","avatar":{"children":[{"gatsbyImageData":{"layout":"fullWidth","backgroundColor":"#282838","images":{"fallback":{"src":"/static/a9e6b445142b247ee4cfa66155398bb2/0d6f4/soohwan.png","srcSet":"/static/a9e6b445142b247ee4cfa66155398bb2/248f9/soohwan.png 40w,\n/static/a9e6b445142b247ee4cfa66155398bb2/fd435/soohwan.png 80w,\n/static/a9e6b445142b247ee4cfa66155398bb2/0d6f4/soohwan.png 120w","sizes":"100vw"},"sources":[{"srcSet":"/static/a9e6b445142b247ee4cfa66155398bb2/e7f45/soohwan.webp 40w,\n/static/a9e6b445142b247ee4cfa66155398bb2/589ec/soohwan.webp 80w,\n/static/a9e6b445142b247ee4cfa66155398bb2/71a38/soohwan.webp 120w","type":"image/webp","sizes":"100vw"}]},"width":1,"height":0.6833333333333333}}]}}]}},"relatedPosts":{"totalCount":25,"edges":[{"node":{"id":"f2a32d9d-b206-5141-8c2d-5440e19caf65","excerpt":"llama.cpp (On device llm inference tool) 최근에 llama.cpp를 사용해봤는데, 상당히 편리하고 미래에 더 많이 쓰일 툴이라는 생각이 들어서 기록해둔다! llama.cpp란? 대표적인 오픈소스 LLM인 Meta…","frontmatter":{"title":"llama.cpp (On device llm inference tool)","date":"2024-09-07T10:00:00.000Z"},"fields":{"readingTime":{"text":"7 min read"},"slug":"/llama-cpp/"}}},{"node":{"id":"fa28b462-1fe2-5d0f-932b-f28e32f1da18","excerpt":"Elastic Search logstash - Nori 토크나이저 설정 이번에 회사에서 검색 기능을 구현하면서 Elastic Search를 다루게 됐다. 이 엔진을 다루면서 삽질을 많이 했는데, 다음에는 하지 않도록 기록용으로 남겨둔다. Elastic…","frontmatter":{"title":"[ELK] Elastic Search logstash - Nori 토크나이저 설정","date":"2024-08-24T10:00:00.000Z"},"fields":{"readingTime":{"text":"4 min read"},"slug":"/elastic-search/"}}},{"node":{"id":"d1f4a9ee-591d-5e95-a930-a1bf17701b0e","excerpt":"단 30줄로 ChatGPT 웹페이지 만들기 (Streamlit chat_message) Streamlit은 파이썬 기반의 오픈소스 웹 UI 라이브러리입니다. 매우 간단한 코드로 손쉽게 웹페이지를 띄울 수 있어서 간단한 데모나 PoC…","frontmatter":{"title":"단 30줄로 ChatGPT 웹페이지 만들기 (Streamlit chat_message)","date":"2024-05-01T10:00:00.000Z"},"fields":{"readingTime":{"text":"9 min read"},"slug":"/streamlit-chatgpt/"}}},{"node":{"id":"4e37b604-dce8-5e09-85e8-337d4f03f0cb","excerpt":"Terabyte(TB) 단위 데이터 셔플링 - terashuf 리눅스에서 TB 단위의 데이터를 line 기준으로 셔플링이 필요할 때가 (가끔) 있다. 직접 코딩해서 쓰기에는 메모리, 속도 등을 신경써야해서 생각보다 큰 작업인데, terashuf…","frontmatter":{"title":"Terabyte(TB) 단위 데이터 셔플링 - terashuf","date":"2024-03-20T10:00:00.000Z"},"fields":{"readingTime":{"text":"1 min read"},"slug":"/terashuf/"}}},{"node":{"id":"ec8327c3-3c4d-51da-9440-8cb74fd1effe","excerpt":"tmux - conf Tmux 설정을 위한 tmux configuraion 기록","frontmatter":{"title":"tmux - conf","date":"2024-02-15T10:00:00.000Z"},"fields":{"readingTime":{"text":"2 min read"},"slug":"/tmux-conf/"}}}]}},"pageContext":{"slug":"/react_homepage/","prev":{"excerpt":"Textless NLP: Generating expressive speech from raw audio paper / code / pre-train model / blog Name: Generative Spoken Language Model (GSLM…","frontmatter":{"title":"Sooftware NLP - Textless NLP","tags":["speech","nlp","paper"],"date":"2021-09-19T10:00:00.000Z","draft":false,"excerpt":null,"image":{"childImageSharp":{"gatsbyImageData":{"layout":"fullWidth","placeholder":{"fallback":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAABC0lEQVQoz5VSW07DMBDMfTkD5+CTG3AEToD4APFRRBQrQUE0DU1a6vixu4PSNIlFExosrWytZ8czu44QLBEZ9uF8irO8CKZW9DsRAkUY4jTEHSDs++yfxFFQHYAY2lh424DWrzDvz6CmgjYezDz5+KTCHsACGE+dXXLHYCYQEYqvCuW2Bp2IZxUebfRKmz1MXYLNAWW1w+dmC08Mz53yNlryZYROg+6uoW+vwPc3MNZCWw9pLWcvMB8rgM1ly12ju6bbTYJy9QD+Xo9It0f99oidegKoGd3MDqW7x9TUp5Rc/DZhYVEUiOMYWusB6L1HohTSLBsmvcDySKhUckaYpinyPF9GOGflv5Z/ADGrYauhb3QvAAAAAElFTkSuQmCC"},"images":{"fallback":{"src":"/static/b91fe939e42bcc0b6f0c076dca98fcc8/afa5c/gslm.png","srcSet":"/static/b91fe939e42bcc0b6f0c076dca98fcc8/0dee1/gslm.png 750w,\n/static/b91fe939e42bcc0b6f0c076dca98fcc8/8beaa/gslm.png 1080w,\n/static/b91fe939e42bcc0b6f0c076dca98fcc8/d079a/gslm.png 1366w,\n/static/b91fe939e42bcc0b6f0c076dca98fcc8/afa5c/gslm.png 1920w","sizes":"100vw"},"sources":[{"srcSet":"/static/b91fe939e42bcc0b6f0c076dca98fcc8/a66aa/gslm.webp 750w,\n/static/b91fe939e42bcc0b6f0c076dca98fcc8/65dd5/gslm.webp 1080w,\n/static/b91fe939e42bcc0b6f0c076dca98fcc8/4fad6/gslm.webp 1366w,\n/static/b91fe939e42bcc0b6f0c076dca98fcc8/c512e/gslm.webp 1920w","type":"image/webp","sizes":"100vw"}]},"width":1,"height":0.5625}}},"author":[{"id":"Soohwan Kim","bio":"Co-founder/A.I. engineer at TUNiB.","avatar":{"childImageSharp":{"gatsbyImageData":{"layout":"fullWidth","placeholder":{"fallback":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAABYlAAAWJQFJUiTwAAADjElEQVQ4y23Oy48TdQDA8TExEaTttvSBfdHddru7bWc6bWd+8+i0u23n0SdlBRQXZGHDgiiLDwgqXjCIJEaC8cLBmHgwUU9EYzRqQuLJi/4NJB6NF+8evgbOHr7XT76SM5ix7s4QnRHnnm9yZzvBTIswN8JcP5bC67ZoWi7CdtFsn5bloZo+dSNAMYbIIqCmD6mJIVXdR3J6I7r9IQ3T59pZlW+uxzndCbPdC/HZXoq3TikowsfqBOjOmFZ7SrM9p2kfRbXn1O0jKNbsSbJ5BMnu9Gl3+qiiz4OPSvz0QRLHFGwOZH6+neLHT5YRbRerM0J0JrTas/8FZXNKzZgg2es+ZtvDdbs8+iHJl+9lWVP7OG2br26k+PvXJCfmFqoYIpwhTXtMwxpTN0coxhjFmCKbE2rGmKoYPQY9qi2fyzsq//4e5sNXi5TlLqbd5t6lPH/9kuDTG2usqgGi7dO0hzSsIXUzQDaGKGKMLEZUxZCKCJB02+PUpMH9vQwP7ybYnSxyfNrjwumA3dEiD94v8cfnK7xzWsbpujQtH9X0qBs+iuEjC5+a7lPVPSqai9SyelyYFbjkh5hqC3TkKOutLON2nkYpgtuMcT6IszdPslo8SLlcpmUH1A0XRQyQhUtNuFQ1l4o2QFI1h3OTVXbcg+grIfSVBRqlEGopgrYSRi0e4KiIse1mScSeopA/iLADmoZL3Rgg631q+oCq1qeq95FOzhQefpzn7eMpBmqcoBVj04pzwkky0eNMRYIdL8F3twusLe2nslrE6g5pGX1U8/FhD1nvUW1tUJK7SH9+n+DR1zF2vQSvH0lz88wiV45V2J1WuHqsxLXNAnuzNJdfWmK5/BylUgFhb6DZAxR9g7rpIos+Wttja2uE9M9vYb69k+DqfJErWzLOuoVqdKlpDo4jODms4zlFckuHObx4iHwuRi6fYqmYY201x/LqMrnFDNl8gRvvukhNdT9394rcOlNFMxrUhYFmW9imTEsp0mhWKC2nWSokyWSiFA7HSKcXiEb34fayyLVniUQk8rmn2drKIqlqiNcuVrh2ymQS1Nh8sc/GoMEbl7u8eb5D1yqTzkRJJsOkkiGymQVShyLE4yHWKnEq1RjpTIhmI8r2y3mkyloI38uha1n6bpVXrkw5+4LD/S/2uHnrIopaJhZ9hmQqwqHkAXJP8BDhyD46ZoWdMxOGcx/PNfECk/8AbxXdRjRliPoAAAAASUVORK5CYII="},"images":{"fallback":{"src":"/static/a9e6b445142b247ee4cfa66155398bb2/7cf1f/soohwan.png","srcSet":"/static/a9e6b445142b247ee4cfa66155398bb2/34f77/soohwan.png 750w,\n/static/a9e6b445142b247ee4cfa66155398bb2/a94f6/soohwan.png 1080w,\n/static/a9e6b445142b247ee4cfa66155398bb2/7cf1f/soohwan.png 1148w","sizes":"100vw"},"sources":[{"srcSet":"/static/a9e6b445142b247ee4cfa66155398bb2/38420/soohwan.webp 750w,\n/static/a9e6b445142b247ee4cfa66155398bb2/7470d/soohwan.webp 1080w,\n/static/a9e6b445142b247ee4cfa66155398bb2/b5ef6/soohwan.webp 1148w","type":"image/webp","sizes":"100vw"}]},"width":1,"height":0.6829268292682927}}}}]},"fields":{"readingTime":{"text":"4 min read"},"layout":"","slug":"/Textledd NLP: Generating expressive speech from raw audio/"}},"next":{"excerpt":"BentoML Machine Learning Serving 라이브러리인 BentoML 사용방법에 대해 정리합니다. image 주요 특징 Online / Offline Serving Flask 기반 모델보다 100배의 처리량을 가지고, Adaptive…","frontmatter":{"title":"Sooftware ML - BentoML","tags":["toolkit"],"date":"2021-09-28T10:00:00.000Z","draft":false,"excerpt":null,"image":{"childImageSharp":{"gatsbyImageData":{"layout":"fullWidth","placeholder":{"fallback":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAD3ElEQVQ4y32VX2xTVRzH7zZjUEBnBAcRETSaBYbxYW7DGVF5MkY0Bn3R+ICymfgnPsyYQJQHEh/QFzQxGnlhGgy6jHZdu15uu7Vdu24rW7du/XNv23vbbgz2h8Hm/kDH+JjetrbFhJPcnO85957P+f0553cFwRRG6Iyg9x1hBGO+DyG0jxX0haJ5Q6hoPpjVeYYucoMXnTE+GNCoEmUO9iU5GrzBbluUht4ETSMqz9gUXnCpHLmUokpU2O+K0+Sf4PGLsg4ty3B0mCGI4Jhk6OyfcPhtPnXLnNOuwuhPNA9P8pdPAufHfBtQkcZkmI7yxVCS1tgMmdY0PIHQPs595jwwY7otwbk2K5PfnOBdl8KxkSRaQOQtr8apoRB3Rk0cGZvhl/4A6TEf73njnAxOo1y/yaE+TXe9Imthzv+OEFvsKi/5Z/QNdkhRDvhmdb1NitLYP4VgDOq6vlfT47hTUjjoUfW12dBlYmjKBTPXP+dUdb3BIrPPGc8GvTPCTnsMoW2ch60KNa6sRbu642yzxQrxyyYlrIuynOvP9sT1DzN6r1NluxTj6OgVflSv0ehOUO1QeVRUdMh+T5IKcw6UT+5/Ir+DKUxjX5LyzgivelPM3rpNcbPOLOnv9rk0dhRb9z9g0XnMuFvvSRBYWNUhcyuLrIdirC+m9fFpdZ4qKVrw7F4W6pkyhKh3J/TFa+k035//G0Pbr9wZjOtzfXPLhcN891MYZBNTngPW5YCZJjn7MHgcsLSSBV7LA8OFtfdyOQPOABPLaSa0BAFZQVETRJIpuLVK6+VFHrDIRS4XQUt3yNzXCLVOmUpR5o2BJPMLC6z9s8j66ircXME9c4NKMUqtS+ERa7gAM4VLLSzTJxWeEEepsfkRjAp7pEvUuuN8F5/HcGWO90dnqXP42WAe535zmIZuH0KnXJqY/FHJX8Fqi4RgGqfcFKC6S0JolxEu+NhqFBHaomw0+dhl7kYwqDxtcbLJ1I/QoeQMKqk2MjX2EJ94JCrFCfZ2B2j2XOQh6TLP2/187pXYbE1S1zNMi8/Gg9YUDT0+mr12Nota4fplYUEEc5ITg0Z+lw7wkc/DGUs3nP+B45KH0+p1PbtfB1KcHJmmbWSFz/xJjjtn+aMrzTuuhF6xKgrAEII5wbEBC632Q3w4OMDPXQ4w/0aL5OVUdA7WbvPlSIqvBqc4O7RE03CSlp6rnLEs86bzbmCu2jxp03jFM8VWMcZTPRovuzUes8XZLso09qpsNEfYbVd4fUBjkyXCHkeU17wqW0S5cNBLkpKJgzGY+x2EsnWyo6j0538ThmIdLjnD/wIZFmXMQFxtUAAAAABJRU5ErkJggg=="},"images":{"fallback":{"src":"/static/654765492479aee0d6435ced3ca72f6a/79da5/bentoml.png","srcSet":"/static/654765492479aee0d6435ced3ca72f6a/ad961/bentoml.png 750w,\n/static/654765492479aee0d6435ced3ca72f6a/b9d7b/bentoml.png 1080w,\n/static/654765492479aee0d6435ced3ca72f6a/79da5/bentoml.png 1170w","sizes":"100vw"},"sources":[{"srcSet":"/static/654765492479aee0d6435ced3ca72f6a/32628/bentoml.webp 750w,\n/static/654765492479aee0d6435ced3ca72f6a/82f7c/bentoml.webp 1080w,\n/static/654765492479aee0d6435ced3ca72f6a/0f5ab/bentoml.webp 1170w","type":"image/webp","sizes":"100vw"}]},"width":1,"height":1.0136752136752136}}},"author":[{"id":"Soohwan Kim","bio":"Co-founder/A.I. engineer at TUNiB.","avatar":{"childImageSharp":{"gatsbyImageData":{"layout":"fullWidth","placeholder":{"fallback":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAABYlAAAWJQFJUiTwAAADjElEQVQ4y23Oy48TdQDA8TExEaTttvSBfdHddru7bWc6bWd+8+i0u23n0SdlBRQXZGHDgiiLDwgqXjCIJEaC8cLBmHgwUU9EYzRqQuLJi/4NJB6NF+8evgbOHr7XT76SM5ix7s4QnRHnnm9yZzvBTIswN8JcP5bC67ZoWi7CdtFsn5bloZo+dSNAMYbIIqCmD6mJIVXdR3J6I7r9IQ3T59pZlW+uxzndCbPdC/HZXoq3TikowsfqBOjOmFZ7SrM9p2kfRbXn1O0jKNbsSbJ5BMnu9Gl3+qiiz4OPSvz0QRLHFGwOZH6+neLHT5YRbRerM0J0JrTas/8FZXNKzZgg2es+ZtvDdbs8+iHJl+9lWVP7OG2br26k+PvXJCfmFqoYIpwhTXtMwxpTN0coxhjFmCKbE2rGmKoYPQY9qi2fyzsq//4e5sNXi5TlLqbd5t6lPH/9kuDTG2usqgGi7dO0hzSsIXUzQDaGKGKMLEZUxZCKCJB02+PUpMH9vQwP7ybYnSxyfNrjwumA3dEiD94v8cfnK7xzWsbpujQtH9X0qBs+iuEjC5+a7lPVPSqai9SyelyYFbjkh5hqC3TkKOutLON2nkYpgtuMcT6IszdPslo8SLlcpmUH1A0XRQyQhUtNuFQ1l4o2QFI1h3OTVXbcg+grIfSVBRqlEGopgrYSRi0e4KiIse1mScSeopA/iLADmoZL3Rgg631q+oCq1qeq95FOzhQefpzn7eMpBmqcoBVj04pzwkky0eNMRYIdL8F3twusLe2nslrE6g5pGX1U8/FhD1nvUW1tUJK7SH9+n+DR1zF2vQSvH0lz88wiV45V2J1WuHqsxLXNAnuzNJdfWmK5/BylUgFhb6DZAxR9g7rpIos+Wttja2uE9M9vYb69k+DqfJErWzLOuoVqdKlpDo4jODms4zlFckuHObx4iHwuRi6fYqmYY201x/LqMrnFDNl8gRvvukhNdT9394rcOlNFMxrUhYFmW9imTEsp0mhWKC2nWSokyWSiFA7HSKcXiEb34fayyLVniUQk8rmn2drKIqlqiNcuVrh2ymQS1Nh8sc/GoMEbl7u8eb5D1yqTzkRJJsOkkiGymQVShyLE4yHWKnEq1RjpTIhmI8r2y3mkyloI38uha1n6bpVXrkw5+4LD/S/2uHnrIopaJhZ9hmQqwqHkAXJP8BDhyD46ZoWdMxOGcx/PNfECk/8AbxXdRjRliPoAAAAASUVORK5CYII="},"images":{"fallback":{"src":"/static/a9e6b445142b247ee4cfa66155398bb2/7cf1f/soohwan.png","srcSet":"/static/a9e6b445142b247ee4cfa66155398bb2/34f77/soohwan.png 750w,\n/static/a9e6b445142b247ee4cfa66155398bb2/a94f6/soohwan.png 1080w,\n/static/a9e6b445142b247ee4cfa66155398bb2/7cf1f/soohwan.png 1148w","sizes":"100vw"},"sources":[{"srcSet":"/static/a9e6b445142b247ee4cfa66155398bb2/38420/soohwan.webp 750w,\n/static/a9e6b445142b247ee4cfa66155398bb2/7470d/soohwan.webp 1080w,\n/static/a9e6b445142b247ee4cfa66155398bb2/b5ef6/soohwan.webp 1148w","type":"image/webp","sizes":"100vw"}]},"width":1,"height":0.6829268292682927}}}}]},"fields":{"readingTime":{"text":"6 min read"},"layout":"","slug":"/bentoml/"}},"primaryTag":"toolkit"}},
    "staticQueryHashes": ["3170763342","3229353822"]}