{"componentChunkName":"component---src-templates-blog-post-js","path":"/project/resume/1/","result":{"data":{"site":{"siteMetadata":{"title":"아구몬","author":"[AGUMON]","siteUrl":"https://ljlm0402.netlify.com","comment":{"disqusShortName":"","utterances":"ljlm0402/tech-blog"},"sponsor":{"buyMeACoffeeId":""}}},"markdownRemark":{"id":"32715cae-d380-53c9-84d1-15bc961c3e6a","excerpt":"💎 목차 서론 (Introduction) 본론 (Main) 결론 (Conclusion) 🌱 서론 여러분은 문서화로 된 이력서를 작성해 본 적이 있나요 ? 🤔 네! 입학원서, 회사 및 아르바이트 이력서를 작성한 경험이 있습니다. 때는 2017년 학교에서 주최한 포트폴리오 경진대회에서 진행할 당시 많은 학생들이 워드, 파워포인트, prezi를 통해 자신만의 포트폴리오를 제작하였습니다. 그러나 저는 Wix…","html":"<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 62.16216216216216%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsTAAALEwEAmpwYAAABYklEQVQoz61Sy4rCQBD0792LP+A5oKKIgqh4EoWYoPj2ICKIKAiCIcEYkqi1VMvI+NrdwzYU6elMKtXVnbher1C4XC5gTKdTpNNpyc/ns9SJbreLwWCAOI5xOByggncUR0InZLiui8ViAcMw0Ol0pHY6nbDf75H8SiKVSmG73aJaraJer6PdbmM+n8u9B0KlbrVaod/vo9froVwu3y9SFRXyHc9hGOJ4PML3fclfCHWVes4fqfyneGhZ9+r5qedUqfxSdYUXwv8IIXQcB5lMRvwi8vk8LMuSaeZyOTlns1lUKhXJC4WC1IvFotRKpRJqtRpGo5GQJoIgwHg8RqvVEpimCdu2ZdKz2UwGQUwmE1kn1pbLJTabDZrNpnzDQa3X6xvhO+n0hxPk9KIoArvwPE/OnCpr76y6e6ibz+BuNRoNUTocDqUlqtjtdtIm39GW58V/uzb6yvxlTZ7xkfA3fCL9BufriUVKvPCyAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"logo\"\n        title=\"logo\"\n        src=\"/static/13e54765ed6f37a870f8251699040fe9/fcda8/logo.png\"\n        srcset=\"/static/13e54765ed6f37a870f8251699040fe9/12f09/logo.png 148w,\n/static/13e54765ed6f37a870f8251699040fe9/e4a3f/logo.png 295w,\n/static/13e54765ed6f37a870f8251699040fe9/fcda8/logo.png 590w,\n/static/13e54765ed6f37a870f8251699040fe9/9f21b/logo.png 706w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<center>나만의 <strong style=\"color:#2D2D2D; font-size: 20px;\">이력서</strong> 홈페이지</center>\n<h2 id=\"-목차\" style=\"position:relative;\"><a href=\"#-%EB%AA%A9%EC%B0%A8\" aria-label=\" 목차 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><strong>💎 목차</strong></h2>\n<ul>\n<li><a href=\"#-%EC%84%9C%EB%A1%A0\">서론 (Introduction)</a></li>\n<li><a href=\"#-%EB%B3%B8%EB%A1%A0\">본론 (Main)</a></li>\n<li><a href=\"#%F0%9F%A5%80-%EA%B2%B0%EB%A1%A0\">결론 (Conclusion)</a></li>\n</ul>\n<h2 id=\"-서론\" style=\"position:relative;\"><a href=\"#-%EC%84%9C%EB%A1%A0\" aria-label=\" 서론 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><strong>🌱 서론</strong></h2>\n<p>여러분은 문서화로 된 이력서를 작성해 본 적이 있나요 ? 🤔</p>\n<p>네! 입학원서, 회사 및 아르바이트 이력서를 작성한 경험이 있습니다.</p>\n<p>때는 2017년 학교에서 주최한 포트폴리오 경진대회에서 진행할 당시</p>\n<p>많은 학생들이 워드, 파워포인트, <a href=\"https://prezi.com/ko/\">prezi</a>를 통해 자신만의 포트폴리오를 제작하였습니다.</p>\n<p>그러나 저는 <a href=\"https://ko.wix.com/\">Wix</a>라는 홈페이지 제작 서비스를 사용하여 포트폴리오를 제작하였고,</p>\n<p>그 결과 내용에 차이점도 존재하지만 뛰어난 실력으로 최우수상을 수상하였습니다.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 136.48648648648648%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAbCAYAAAB836/YAAAACXBIWXMAABcSAAAXEgFnn9JSAAAE30lEQVRIx31VaU9aWRj2z5pm5kvTxCatH2oaPziJnaqxtqNjmmrqEivaxU7r0kJZFVFUVFAEQbYLXLbLerlwn3nfAyjazpzkyVnuuc95l+e8p6dWbyCSkOH2eHF4fIajk3P4LkJifB64Er3PH8LZRRihqIRCSUVOqQrkizWkMgqikqxLcgFVVVN69GYTlXIJ2YyMbDaDHCOXFXOlkBfjAvU8LpeKaGh1aHUVGvU8VtUaqpWyrtaqaDYbSg+oFRQF1WqVh6jXNTQaTeTzBZRKZdxtuq4TbvrOcvsbWUirqqoK1Go17O/vw+PxEGnjl2iSRx3wnP/TNE0ntAiZuVgsklsFgd7eXjx48EBs5sO6CVporfE33pPL5dgQnYmvLeze3Gma1hBoWdbsQnuNLbyxVG+KELQtlBIxWM1G/DAZYbNa4D0+hNW0hXDQD/+ZFw6bBS6XE1I8hgP3HuxWM3ynpwhenCF0GYDLadfDV1dMRYTEHCbZnFwmcByM48gfwXkkhbNwgiDBG5LguYjilL5fxGT4wkkcB1rz08s47U3jJBjXI5LcItQaGtZ/HGN0YhmjrwxY/LCL4fEljLxaxdyqE+/WDrD69Rgvptfwx+gixv56D8MXD5Y/H2Lp0z6mZjcwOrmmO9zBFmGzXIb8dRPB1Y8IfViDtGGE3/AeFysfkVj/jozRAvm7BZHP62L9au0L0t/NyJisSG2ZEF//htjHf/S8xdZ2OZOB5tpFPBaFHLmCqhRQz2dRy8qo0xhtfXJTSdw3kxrUfB46CRqloo69PRaj0lMn7VXcbhTtNigOB8pOJ6bv38fL339DwWaHSro0v3yJzZERwig2nj/Ht7ExVF0uNA4O0Tw6gu526yVKkrCQ9ZOhm8JIkw65fzE1hZEXE5CydO3IQgedbtnegYkO+EGHWunQDGm3SP9WSNAVko2cz98Q5shtOZVCmiCn0xh48gT9jx4hnUzBc+DGu4U5fFo14NP7FdEvL85ja/0reVpErVJh6FniuCbMkiUpJpNlofw/nz3D4OAgEokE3eciHA47LGYzHBQWq8VMsIAJypRQrgEEPdNNyBNJSghSJpx7+xbT09NIJpNQKAQrKyuYn1/A0tIS9fNYWFwUhzNhhSwk3CbkO5xMSpBpkQnGKOhDQ0PipwLF5unTp+jv7xd4+LAPfX0PyQBJXLt6vS6uHhty4zIRcfz4FAZbNzExISyORCKYnZ3FmzdvrsHfvV4vhaP0awtzFMNYLIZkm3RgYACPHz9GmhLEpWxzc1Nga2sLRqMRGxsb1JuEZ+2yd5uQk8IupFJpKqx5jI+PY3h4GKFQSNTH7e1t7OzswEly4d5qtcJudyBOSWOXf0pKrpNlWmTCmZkZ/E1avKIK4ibRM9EeabEDPmR3d1cY0SFko64JOfhhsiYWiwuX+/r6cO/ePUSiUVHmDQYDJicn8fr1a9FP0WFMxpLhOFK2dQ5PqzhQpjhD0WgE4XBYgON2SlfpMhhANBKG33+OQCBAiTgVSerIi2PI1Z6UoTNxqzhQY1LOVpeu+J2g17CIKr2IKt139oS/895ftNuP1P81Lvc1Iusmar14t6Dr3U/A3Q2iOhEJJ6hIQueeY8susvD5kDv/3Vj485vbIkynU7DZbELAPp8Pu5RpF5Us194+ESv/SfgvfR6raL3W5qoAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"1\"\n        title=\"1\"\n        src=\"/static/b821f253a77d44837d6ed854d122a78e/fcda8/1.png\"\n        srcset=\"/static/b821f253a77d44837d6ed854d122a78e/12f09/1.png 148w,\n/static/b821f253a77d44837d6ed854d122a78e/e4a3f/1.png 295w,\n/static/b821f253a77d44837d6ed854d122a78e/fcda8/1.png 590w,\n/static/b821f253a77d44837d6ed854d122a78e/dba9a/1.png 652w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<p>이처럼 보는 사람의 이목을 집중시켜야 하며 나를 정확하게 표현해야 한다고 생각합니다. 👀</p>\n<p>그러므로 투박한 문서로 된 포트폴리오 보다는 시각화에 특출난 웹 환경 이력서가 적합하다고 판단하였고</p>\n<p>시간을 흘러 2️⃣0️⃣1️⃣9️⃣,</p>\n<p>타 업체 서비스를 이용하지 않고 나만의 이력서 홈페이지를 제작하게 되었습니다.</p>\n<br />\n<p><strong><a href=\"#-%EB%AA%A9%EC%B0%A8\">⬆ 목차</a></strong></p>\n<hr />\n<h2 id=\"-본론\" style=\"position:relative;\"><a href=\"#-%EB%B3%B8%EB%A1%A0\" aria-label=\" 본론 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><strong>🌹 본론</strong></h2>\n<h3 id=\"▸-기술-스택\" style=\"position:relative;\"><a href=\"#%E2%96%B8-%EA%B8%B0%EC%88%A0-%EC%8A%A4%ED%83%9D\" aria-label=\"▸ 기술 스택 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><strong>▸ 기술 스택</strong></h3>\n<p>개발에 앞서 먼저 어떻게 개발을 해야하는지 생각을 해보았다.</p>\n<p>웹 페이지를 구성할려면 기본적으로 <code class=\"language-text\">프론트엔드</code>, <code class=\"language-text\">호스팅 서버</code>가 필요합니다.</p>\n<h4 id=\"▸-프론트엔드\" style=\"position:relative;\"><a href=\"#%E2%96%B8-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C\" aria-label=\"▸ 프론트엔드 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><strong>▸ 프론트엔드</strong></h4>\n<p>프론트 엔드란,</p>\n<p>간단하게 사용자들이 보이는 웹 화면을 의미합니다.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 67.56756756756756%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAABJ0AAASdAHeZh94AAAD/klEQVQ4yxWTa0yTBxSGP5nKHZVNEhELLbTcb4II6rxUhSgOGdMxYDgKVGoHaMGCTi6FQqUiKFNAlJugqFzduKoMRYXpyCYhmq0jbjNzyYxZzJJdTLbk2bcf76/3vM85JydHeEt/GUHbJuq8qE6iQpSoFgnELbXjQ4kbOoUHmUFyUnw8WbXUkQSZhMUZpxAKuxEOdSDkifnDXbjI/OgfnkSQaYysqWpl9/GrhJ/sImXDdkoEgVwPGZb6i8zvPMCjde9jMdTToM0kSfQ8VQYiq/tZX9RETE4F65QfEBQQQO/wPQTdoWyKx86zKS2D8qluzhxUEyOGlBtCeeIfxzNFPN/qa5gWfDBmapF6udNaa2T2NQz/+ieWp08p2BjI1qgwrg2JwMGRQR6/mCfy4if89O8fdJdpWWK/iF1pKr6PVvFzbhXPOq4zE55Iq8FAtlbFrY5GJv6Cjl/+Zvbl7xwsLscnKJSB0fsI3SfS+e35PA9/mOHZj8+53qhG4S1BbTrBPzfGeLFBzeybm3lR18VIayXl+7fx5GEfllevmRNhz1++ormxkvBgBX2jXyJM1K7mSoaEoWPvci5xObWqKALXbaSsvoXbwwO0FZTSlJLF+OgoF9pb2Lh1C9WNTUzdu8vtyUnuTN4lMn4frl5+DN4UgY8qrZnMXIilQOBKnEDpDjkBcnf8AkNxtnNgoa0NixztsLe2FmExRCjfwWNTIvWXrvHN9A0y8oqxUmxmhdSb4fEHCLW+AkUygUtJcr5q2IbZUIhqbzxuritYYPUGdja22Nva4ujgxALxWCbDUQZu3aGwUE9ncToVJhO37k+j0Wq5+tkEQnJEFBFSX8pMBXT0mSk6qqWu6ihlx83ExO7CTeKOo9MSHOwdCFkdSkPjSWaeWFDtzyI/Px/T6bO09/STqc2m5/PbCIaa0xzQH6FUl4JlpInLzUZKNVuoO9dMTX0j7yWnIvOUY21tiyZLTbXpCJNfz3HmXBNdvQOUGCvRFxvI0GjpHbqDUFN/gSpTCS36TbyaHufMKSN7tq+m+vSn6I6V8JHmY3z9/LF3XEpFUaFYa6RnbJw0dRYGkxnNwTzMdWfR5OroGRQnrGpoo9O4j74cT+qazbR3VJKcEouusIRUsWtCahqubhJWSqQYzdWUV5l58Pg7diTs4dCRIpIzs2gTV87O19P7P9AvwJfDsYHookPQH04WJ8gmNyeJt9cGIZOtxEshxdnJFg+XZUSHKditXMvNqYdErV9D+JpgvL09ONvaTmrGfgZGxE+JUYbgEhXNyu17WbE5lojYneSqlKjTd+LkF4aVeyD2/pEslykIXuWAdNliXOX+oheBlWcQNopQpHIvnJ2d+WJ6jv8Ap6x53Cu/efcAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"2\"\n        title=\"2\"\n        src=\"/static/6041775da80083608230ad77e91ba28d/fcda8/2.png\"\n        srcset=\"/static/6041775da80083608230ad77e91ba28d/12f09/2.png 148w,\n/static/6041775da80083608230ad77e91ba28d/e4a3f/2.png 295w,\n/static/6041775da80083608230ad77e91ba28d/fcda8/2.png 590w,\n/static/6041775da80083608230ad77e91ba28d/efc66/2.png 885w,\n/static/6041775da80083608230ad77e91ba28d/d30ee/2.png 980w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span>\n<br /></p>\n<p>해당 이미지는 웹 개발자들 사이에서 유명한 원피스 3대장 패러디 이미지이다.</p>\n<p>좌측 부터 <code class=\"language-text\">Vue (뷰)</code>, <code class=\"language-text\">Angular (앵귤러)</code>, <code class=\"language-text\">React (리액트)</code>라 불리며</p>\n<p>그 중에서 나는 <code class=\"language-text\">React (리액트)</code>로 개발을 진행하였습니다.</p>\n<br />\n<hr />\n<h4 id=\"▸-호스팅-서버\" style=\"position:relative;\"><a href=\"#%E2%96%B8-%ED%98%B8%EC%8A%A4%ED%8C%85-%EC%84%9C%EB%B2%84\" aria-label=\"▸ 호스팅 서버 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><strong>▸ 호스팅 서버</strong></h4>\n<p>웹 사이트를 구축하기 위해서는 웹 서버가 필요합니다.</p>\n<p>예를들어, 만들어지 홈페이지를 (www.domain.com) 입력하여 볼수 있도록 해주는 네임 서버입니다.</p>\n<p>그러나, 소규모 웹 사이트 구축에 비용을 지불하기에는 부적합하다고 판단</p>\n<p>무료 호스팅 서버인 <a href=\"https://zeit.co\">ZEIT</a>를 사용하였습니다.</p>\n<h5 id=\"▸-zeit\" style=\"position:relative;\"><a href=\"#%E2%96%B8-zeit\" aria-label=\"▸ zeit permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><strong>▸ ZEIT</strong></h5>\n<p>웹 사이트를 배포 지원해주는 서비스입니다.</p>\n<p>사용 방법에 대해 차근차근 살펴보도록 하겠습니다.</p>\n<p><strong>1. npm now 설치</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"sh\"><pre class=\"language-sh\"><code class=\"language-sh\">$ npm install -g now</code></pre></div>\n<p><code class=\"language-text\">now</code> 글로벌 패키지를 통해서 편하게 cli를 통해서 접근이 가능합니다.</p>\n<br />\n<hr />\n<p><strong>2. ZEIT 회원가입</strong></p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 65.54054054054055%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsTAAALEwEAmpwYAAABUUlEQVQ4y5VTPU/DMBDNP2NhphIrsLDBv0Ds8BMqmGDuTpaIJRYtCUMSUEUlGJqmLW3SpkljP+wElxCcUE46nT+e3z2fz5rv+0iSBMIYY9jWJJZSijRNEccxVqsVNDERixIkgSKKdZWXE8szck+rZtxWaR1Gq6qS4/l8DkIIBoMBHMeB67p5NAwDs9nsB77sWl1mURNd12FZFnrdbu4eJ7Vtq7HmWpVMgqIowoQrCSZTjKcf8INxPh6OAoRhWOAVpDWEvMg8jl77cHsmXuwHeI8EnkUw7D+DZtkvAUpCafLAU6eD4919nOwd4rR1hIOdFvT2Vb6XUSYYm6+8yUoL4Jvj4/rsDjcXBLeXJtrn93DN96/+Y3/XsPowGY8L/jjLNMOCixa+ZkX16jqrkVBcPV4u+Q/gPyFliBOKdfbdYthWobol2MYZk/N/KlQ1bnlPZZ8kBPAy1/8HdQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"3\"\n        title=\"3\"\n        src=\"/static/2d506bd63755824cb863a5bf2fd1af99/fcda8/3.png\"\n        srcset=\"/static/2d506bd63755824cb863a5bf2fd1af99/12f09/3.png 148w,\n/static/2d506bd63755824cb863a5bf2fd1af99/e4a3f/3.png 295w,\n/static/2d506bd63755824cb863a5bf2fd1af99/fcda8/3.png 590w,\n/static/2d506bd63755824cb863a5bf2fd1af99/efc66/3.png 885w,\n/static/2d506bd63755824cb863a5bf2fd1af99/7a1fb/3.png 1030w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span>\n<br /></p>\n<p><a href=\"https://zeit.co\">ZEIT</a> 홈페이지에 접속하여 회원가입을 진행하였습니다.</p>\n<p>저는 <code class=\"language-text\">Continue With GitHub</code>를 선택하였다.</p>\n<br />\n<hr />\n<p><strong>3. now cli 연동</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"sh\"><pre class=\"language-sh\"><code class=\"language-sh\">$ now login\n&gt; UPDATE AVAILABLE The latest version of Now CLI is 16.2.0\n&gt; Please run `npm install -g now@latest` to update Now CLI.\n&gt; Changelog: https://github.com/zeit/now-cli/releases/tag/16.2.0\n&gt; Enter your email: [Your email Address]</code></pre></div>\n<p><code class=\"language-text\">now login</code> cli를 통해서 회원가입한 email을 연동해 주었습니다.</p>\n<p>해당 email에서 메일을 수신하면 정상적으로 접근이 가능해집니다.</p>\n<br />\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 100%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAACiElEQVQ4y41US4/TMBDeHw8n9g9wQSAt4nFYlUXsSnCC9lJuK/pQ36WFVZs2bdK0eTWeYT7XDkm2Qlj6MuOx/WVe9gURcRVKKS2zLGOMbrfL9Xpd67DZPXZfERf42FHUi6PRaHCtVju7Vj1/YZjJLFAcx9l2u80OhwMJOAgCiqJIe7Pb7djYeLFYsOwrkRYJ9RyfzWbDvV6PB4MB9/t9mkwm3Ol0eDqdcqvVYsyHwyE3m01tO0sI/Xg8snjni/5F0ES6bCT8HyPPIUKRoXzf5/F4/CChPJnP5y/E0xTeuq5LkAhvtVppCYhdRwOkafrXQ0OoczWbzVjIdCjL5RL5ov1+z2EYMvKI3CGHAOxW2m4ohQyjHCI5nAFJkuhCSRooNCSi5+1SRZVQG+E6cgkphFqfTqQY7Q7/aLd5NBrpNRBjHV7jR6WQLSGM6/Vah4r8IF+Ye57Ph43L8Wad5w52x3FKRGc9DM0f4QFkKDINfG5fv+Hv7684ngw4FK9tCoqhVvqQT41NCh+5WypDVhWJnkRZ+90r/vbyuaKfg6Nppxxy7ihQhpByDw9RTJNfS57+XgkcLReOq0OMPJfiravDLFa06Jnhk7bREyI/Iu456jD31PVsq16PXHobJHyVKb519sRByvey8alsv5SDz0QHLk826hpGZQiZNiFxZ6misUufg4RuxPZJ8CHN6OtKCPcJzWR+I4fuBLcGd2L7KPKhFLJ9IJSkMMmIj4oKIZ0igDz31BXfgtJrU7i3xaTrIphFVS1IoTD0qCjoKVwtPFEArhTmFrBBWjvmuP9on9LjYAnR9agiGhrNjeaFbhvZNjpgHo18DX37qLFxlTzPy72oegTgKv7r6QL+AHwlCIwWtjrRAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"4\"\n        title=\"4\"\n        src=\"/static/48facb22a6245f8484e7547c43f175e8/fcda8/4.png\"\n        srcset=\"/static/48facb22a6245f8484e7547c43f175e8/12f09/4.png 148w,\n/static/48facb22a6245f8484e7547c43f175e8/e4a3f/4.png 295w,\n/static/48facb22a6245f8484e7547c43f175e8/fcda8/4.png 590w,\n/static/48facb22a6245f8484e7547c43f175e8/af590/4.png 626w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<p>메일이 도착하면 <code class=\"language-text\">VERIFY</code>를 클릭\n<br /></p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 77.02702702702703%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAsUlEQVQ4y+1SQQrEIAz0/y/q0U/0UvRS8GDRehELre0sWUiRxbKW7nEDgxMNkwlGdF0HKSUo9n3HcRx4EoLJU6FTkFwRSlE6W1AzIj473HFaqxWlI+bsmjm/E885V10yF7WOy7JgGAaM44i+76GUgjEGWus3KE8pXY9cdqDCEAKcc/DeY5omWGvPnEB8nmfEGOsOywsaaV1XbNt2ibKmaeQ78XXk1pVp+pSfLPZf8HG8AB/EosOj9USQAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"5\"\n        title=\"5\"\n        src=\"/static/587342146725847e45c09d607bf76e65/fcda8/5.png\"\n        srcset=\"/static/587342146725847e45c09d607bf76e65/12f09/5.png 148w,\n/static/587342146725847e45c09d607bf76e65/e4a3f/5.png 295w,\n/static/587342146725847e45c09d607bf76e65/fcda8/5.png 590w,\n/static/587342146725847e45c09d607bf76e65/31aff/5.png 823w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span>\n<br /></p>\n<p>성공적으로 이메일 인증이 되었다.</p>\n<br />\n<div class=\"gatsby-highlight\" data-language=\"sh\"><pre class=\"language-sh\"><code class=\"language-sh\">$ now login\n&gt; UPDATE AVAILABLE The latest version of Now CLI is 16.2.0\n&gt; Please run `npm install -g now@latest` to update Now CLI.\n&gt; Changelog: https://github.com/zeit/now-cli/releases/tag/16.2.0\n&gt; We sent an email to &#39;ljlm0402@naver.com&#39; Please follow the steps provided\ninside it and make sure the security code matches Eager Jaguar.\n✔ Email confirmed\n&gt; Ready! Authentication token and personal details saved in &quot;~/.now&quot;</code></pre></div>\n<p>터미널에서도 이메일 인증을 확인할 수 있다.</p>\n<br />\n<hr />\n<p><strong>4. 프로젝트 선택</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"sh\"><pre class=\"language-sh\"><code class=\"language-sh\">$ now init\n&gt; UPDATE AVAILABLE The latest version of Now CLI is 16.2.0\n&gt; Please run `npm install -g now@latest` to update Now CLI.\n&gt; Changelog: https://github.com/zeit/now-cli/releases/tag/16.2.0\n&gt; Select example: (Use arrow keys)\namp\napollo\nbash\ncharge\ncreate-elm-app\n❯ create-react-app\ndocz\nexpress\nexpress-twitter-dreamify\nflaskex-postgresql\ngatsby\ngo-image-to-ascii\ngridsome\nhtml-minifier\n(Move up and down to reveal more choices)</code></pre></div>\n<p><code class=\"language-text\">now init</code> 를 통해 다양한 프로젝트에서 원하시는 프로젝트를 선택합니다.</p>\n<p>저는 리액트로 개발하기 위해서 <code class=\"language-text\">create-react-app</code>을 선택하였습니다.</p>\n<br />\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 62.83783783783784%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAACA0lEQVQ4y32T2W7bQAxF/ROOJUuzSDParHiV5SVLU3RBUgRwGvQlj0HRD+j/v9yQTGS7TtuHi6E40J1Dcqb3+fYel5fXmM0bLBYtlssVRuMZymoE7zy8z5DnOa0eSZKQUqRpKutBieRYva+7H7j5+AnzZoWm3WC9vUJVj1HXNSaTKcbj1zjLckRRBKUU4jgmqSPF+3xvdbHBfNHAE0VelEKWEtl0fI522WA2I9qyFEL+yRgDay20VifSst+bNS1W7QrurTxWkjok1RSxdW808Z6Cy6uqCtpYREqLYqUPhC4rpBwWm2X0bckw9OcYkpQ2cnpHwIT1iPpb1ghMhtB4DLTDUFkyjMiQTcSoM8yFMOMWeCdEbNQZcrlFUdCgMljKsclAJQhi80rome7E0KbUr9kH1O01DWZCuUwm2BHyd0yxUkxuZFhhEPzP0CFyFVKKjdFi0hGycXcA0/Iea9/Dvxlyyc4RETVeJDRqXzJPncvm+LgdB8PsveFw8QXh8g6xH70bCpsx4fH0uez9lP2JuIfhaI2w3srF5UkLKa3GJnJXi7KS2NJL4SsUDiPpa69wCYqUynA0PVLp6RkZBWc1ylRLPlUhdNiHGZ79ITscwEYDiRXtx0GfXsrTb1T3v5DdPiO/e0bx7SfUzRP66+8Ito+is/UD+qvdPxVsHmCvHqEvdngBSANy9EqVVvAAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"6\"\n        title=\"6\"\n        src=\"/static/66b83e0e9c5688925d6b504f86595cf0/fcda8/6.png\"\n        srcset=\"/static/66b83e0e9c5688925d6b504f86595cf0/12f09/6.png 148w,\n/static/66b83e0e9c5688925d6b504f86595cf0/e4a3f/6.png 295w,\n/static/66b83e0e9c5688925d6b504f86595cf0/fcda8/6.png 590w,\n/static/66b83e0e9c5688925d6b504f86595cf0/efc66/6.png 885w,\n/static/66b83e0e9c5688925d6b504f86595cf0/c83ae/6.png 1180w,\n/static/66b83e0e9c5688925d6b504f86595cf0/79daf/6.png 2792w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span>\n<br /></p>\n<p>프로젝트가 성공적으로 생성되었고 실행 해보겠습니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"sh\"><pre class=\"language-sh\"><code class=\"language-sh\">$ npm install\n\n$ npm start</code></pre></div>\n<br />\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 54.72972972972974%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAABFElEQVQoz52S30rDMBTG+zCubWpqkrZpJqXdFMXdCIJ3goJ33nglorO1lW3ojfgQgs/5mWQq29z/ix/n5Jx8H4ecOFUzxMPTC8p6iKoZ2VjWo/Uoa/QfG1Ra068GKJ8HcGLVAYszS5TmcygQqR9mezKD0LpY50KOa06LCLSCCK7G5nPY8Zjlf09rguma49MEyyChBG0fgKouyF6KVfeXGro+Bzs8Rff+DZ27V4RFz9a2M9STuT6DPL9G7+MLJ++fSM4u4W1j6O3GfxMGsoC6ukV6cQOS5HAJn7qz9oRGEIp9vckcXG9SJONfQHl7odlKw0AvwRjw7BgsOwJlytY2NvwVmGjR72kwX2uyt/GEk/nseZHuG0hfasKDMTz1AAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"7\"\n        title=\"7\"\n        src=\"/static/f0cb4902bd7ad7cd872c2c9db2a38be7/fcda8/7.png\"\n        srcset=\"/static/f0cb4902bd7ad7cd872c2c9db2a38be7/12f09/7.png 148w,\n/static/f0cb4902bd7ad7cd872c2c9db2a38be7/e4a3f/7.png 295w,\n/static/f0cb4902bd7ad7cd872c2c9db2a38be7/fcda8/7.png 590w,\n/static/f0cb4902bd7ad7cd872c2c9db2a38be7/efc66/7.png 885w,\n/static/f0cb4902bd7ad7cd872c2c9db2a38be7/c83ae/7.png 1180w,\n/static/f0cb4902bd7ad7cd872c2c9db2a38be7/5068c/7.png 1917w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span>\n<br /></p>\n<p>성공적으로 실행이 되었으며 웹 호스팅을 진행해보겠습니다.</p>\n<br />\n<hr />\n<p><strong>5. 프로젝트 빌드</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"sh\"><pre class=\"language-sh\"><code class=\"language-sh\">$ now\n&gt; UPDATE AVAILABLE The latest version of Now CLI is 16.2.0\n&gt; Please run `npm install -g now@latest` to update Now CLI.\n&gt; Changelog: https://github.com/zeit/now-cli/releases/tag/16.2.0\n&gt; Deploying ~/Desktop/create-react-app under ljlm0402\n&gt; Using project my-react-app\n&gt; Synced 1 file (506.69KB) [2s]\n&gt; https://my-react-app-gksvou2um.now.sh [v2] [2s]\n⠏ Building...\n\n&gt; Ready! Aliased to https://my-react-app.ljlm0402.now.sh [in clipboard] [49s]</code></pre></div>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 569px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 32.43243243243243%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsTAAALEwEAmpwYAAABDUlEQVQY03VQy2qEQBD0N/2oQH4hEPCQU86J4AcEIkRzUYL70F10fczo+lhnptIzrrAsSUHRNN1dUzWWUgr/Qc/+4i2EEKiqCn3fm94axxG+7yMIAniehzAM4boumqa5ikpIEpFyoUae54iiCF3XIUkS2LYNx3EWQSXpQBCprpjn+d7rDRfn677eTdMUjDEztS5SoBl6sLox1ouiQFmWxsWJ6rlleP2SePCApw+gakcoulmF7+NbgxLYswr77Q6bzQZxHJsYK7MsxWdc4vH5HS9vPs7DBHV1twoesx8cdt9L5EnM4OSQMw7GGeq6Nv+nyanXUaae43TYgpVHingxMbUbQbf6X7uWo6Uk+oFfwUnJzePvoQ8AAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"8\"\n        title=\"8\"\n        src=\"/static/0b1ba272899cd293fd38bfb44bf66ce7/854dc/8.png\"\n        srcset=\"/static/0b1ba272899cd293fd38bfb44bf66ce7/12f09/8.png 148w,\n/static/0b1ba272899cd293fd38bfb44bf66ce7/e4a3f/8.png 295w,\n/static/0b1ba272899cd293fd38bfb44bf66ce7/854dc/8.png 569w\"\n        sizes=\"(max-width: 569px) 100vw, 569px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span>\n<br /></p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 47.2972972972973%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsTAAALEwEAmpwYAAABmklEQVQoz31SS0sCURSePxARQYgUSLQpaFO71m3CFllG0AN3Lf0J0aa/0IM0ahnRAyFyXdAfSBEzCVoojuOMY+o87p35uueWklkd+Djcc+757j3fOUq5XIZZ1wXqaLfbsG0blmWBcw7f93tARt51XZlnjElQijEHjt2CQsVMJDuX/7PvxB3zPE+Sc+Epo+zs7iG6toXN2LbE8uoG7h8eoWkaCoUCisUicrkcTNPsI6XfxeNxRCIRhMNhpNN3UJai6wgExzETiWFqbh4jgRAur1OyoNlsShkajYZs8ycheVVVQbKVSiW0WqLlhcUVDA6PIjQ5i7GJaQwMBXF+cSULDMOAy3hfy7+13jHlJnWLg6MkjpOnSJycYf8wgefCixyMplXRshy4vMvYi18eUf4aAIktPQku0HYcMBGjKPEzUUwa0lY4IkeSUI1ii4Neq6Bh6tB1A5VKRXgddbFGltCP00qYBvSnDKrZPNRMHrVsDs7bKzxBajFXknUJ6RecM3H43DsKdtDVyXXg11R4tSq4gKep8N+/po5eLT8An+KRyjbCOwIAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"9\"\n        title=\"9\"\n        src=\"/static/51c6c104faeb863204a793d6851e483b/fcda8/9.png\"\n        srcset=\"/static/51c6c104faeb863204a793d6851e483b/12f09/9.png 148w,\n/static/51c6c104faeb863204a793d6851e483b/e4a3f/9.png 295w,\n/static/51c6c104faeb863204a793d6851e483b/fcda8/9.png 590w,\n/static/51c6c104faeb863204a793d6851e483b/efc66/9.png 885w,\n/static/51c6c104faeb863204a793d6851e483b/22475/9.png 1039w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span>\n<br /></p>\n<p><code class=\"language-text\">now</code> cli를 통해서 현재 프로젝트를 <a href=\"https://zeit.co\">ZEIT</a> 빌드를 하였습니다.</p>\n<p>마지막으로 빌드 성공후 제공된 DOMAINS로 접속해보록 하겠습니다.</p>\n<p>상단 이미지에 DOMAINS에 표시된 주소로 접속을 하시면 되겠습니다.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 55.4054054054054%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAABHklEQVQoz51Sy07CQBTtx5ROaelj+nJQ2hINDxcuTFxr/AKjiQsjQrUIJC74Bhd+5/F2CrGRQK2Lk3PvmXtO7kxGyfIlJrM5nqe55NnbirCsxZTmstd3PE1y2b9kC+IFlED0wYMebO8YPIzhHyW7EClxuqMHUUze0uNFpaaouotWm0MzPMmqXkF7A82GypwfrXK+9bQ2s4reCXAQpg/rZAAzTKn3UTd/MJDR1s7pBfqPKyQPc9jJORht8c/AEIyeI7i8xnj9hdHHJ/j4SmqNA5lZXk0zOMzuGcTtPcTNHQy6drF1debPGxYGi3fhcCHhFr+A0HHF3rDaQNOOZCiPh3B7A1kbpDUO3BoKLr4TsyjECsu6ctZ4w2r9u9/n+wZC2Wur7+oCzAAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"10\"\n        title=\"10\"\n        src=\"/static/17581001a4db4b0b2519ae7bc33e67ff/fcda8/10.png\"\n        srcset=\"/static/17581001a4db4b0b2519ae7bc33e67ff/12f09/10.png 148w,\n/static/17581001a4db4b0b2519ae7bc33e67ff/e4a3f/10.png 295w,\n/static/17581001a4db4b0b2519ae7bc33e67ff/fcda8/10.png 590w,\n/static/17581001a4db4b0b2519ae7bc33e67ff/efc66/10.png 885w,\n/static/17581001a4db4b0b2519ae7bc33e67ff/c83ae/10.png 1180w,\n/static/17581001a4db4b0b2519ae7bc33e67ff/ec09f/10.png 1916w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span>\n<br /></p>\n<p>짠! 상단 주소검색창과 제공되었던 도멘인을 확인하시고</p>\n<p>정상적으로 홈페이지가 접속되면 이번 포스팅에 내용은 잘 따라오셨습니다.</p>\n<br />\n<p><strong><a href=\"#-%EB%AA%A9%EC%B0%A8\">⬆ 목차</a></strong></p>\n<hr />\n<h2 id=\"🥀-결론\" style=\"position:relative;\"><a href=\"#%F0%9F%A5%80-%EA%B2%B0%EB%A1%A0\" aria-label=\"🥀 결론 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><strong>🥀 결론</strong></h2>\n<p><img src=\"/fc95730c4e3c1f1cf051916fa5c5b691/11.gif\">\n<br /></p>\n<p>잘 따라오시느라 고생하셨습니다. 👏🏻</p>\n<p>오늘 배운 내용을 정리하면</p>\n<ol>\n<li>ZEIT NOW 웹 호스팅 셋팅</li>\n<li>create-react-app 프로젝트 생성</li>\n</ol>\n<p><strong>2탄</strong> 에서는 <code class=\"language-text\">GitHub Webhook 통한 CI / CD</code> 해보겠습니다.</p>\n<br />\n<p><strong><a href=\"#-%EB%AA%A9%EC%B0%A8\">⬆ 목차</a></strong></p>\n<hr />\n<br />\n<h1 id=\"여러분의-댓글이-큰힘이-됩니다-๑̀ㅂ́و✧\" style=\"position:relative;\"><a href=\"#%EC%97%AC%EB%9F%AC%EB%B6%84%EC%9D%98-%EB%8C%93%EA%B8%80%EC%9D%B4-%ED%81%B0%ED%9E%98%EC%9D%B4-%EB%90%A9%EB%8B%88%EB%8B%A4-%E0%B9%91%CC%80%E3%85%82%CC%81%D9%88%E2%9C%A7\" aria-label=\"여러분의 댓글이 큰힘이 됩니다 ๑̀ㅂ́و✧ permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>여러분의 댓글이 큰힘이 됩니다. (๑•̀ㅂ•́)و✧</h1>","frontmatter":{"title":" 이력서 홈페이지 💎 ▻ 1탄 ","date":"September 18, 2019"}}},"pageContext":{"slug":"/project/resume/1/","previous":{"fields":{"slug":"/nodejs/nodemailer/"},"frontmatter":{"title":" 이메일 📬 ▻ nodemailer ","category":"Node Js"}},"next":{"fields":{"slug":"/project/resume/2/"},"frontmatter":{"title":" 이력서 홈페이지 💎 ▻ 2탄 ","category":"Project"}}}},"staticQueryHashes":["3128451518","3956431471"]}