{"componentChunkName":"component---src-templates-blog-post-js","path":"/project/resume/2/","result":{"data":{"site":{"siteMetadata":{"title":"아구몬","author":"[AGUMON]","siteUrl":"https://ljlm0402.netlify.com","comment":{"disqusShortName":"","utterances":"ljlm0402/tech-blog"},"sponsor":{"buyMeACoffeeId":""}}},"markdownRemark":{"id":"66517d1a-b942-543d-ac01-5500566e5153","excerpt":"💎 목차 서론 (Introduction) 본론 (Main) 결론 (Conclusion) 🌱 서론 \n 안녕하세요~ 어느덧 가을 🍂이 찾아왔습니다. 1탄에 이어서 2탄을 진행 해보겠습니다. 그전에 배운 내용을 정리하면 ZEIT NOW 웹 호스팅 셋팅 create-react-app 프로젝트 생성 까지 진행했습니다. 2탄 에서는  해보겠습니다. ⬆ 목차 🌹 본론 ▸ GitHub Webhook Github webhook 이란, Github 저장소에 commit을 할 경우 자동으로 ZEIT…","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><img src=\"/055dc0020d74b76388a14ad5cd4d0576/1.gif\">\n<br /></p>\n<p>안녕하세요~ 어느덧 가을 🍂이 찾아왔습니다.</p>\n<p>1탄에 이어서 2탄을 진행 해보겠습니다.</p>\n<p>그전에 배운 내용을 정리하면</p>\n<ol>\n<li>ZEIT NOW 웹 호스팅 셋팅</li>\n<li>create-react-app 프로젝트 생성</li>\n</ol>\n<p>까지 진행했습니다.</p>\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<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=\"▸-github-webhook\" style=\"position:relative;\"><a href=\"#%E2%96%B8-github-webhook\" aria-label=\"▸ github webhook 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>▸ GitHub Webhook</strong></h3>\n<p>Github webhook 이란,</p>\n<p>Github 저장소에 commit을 할 경우 자동으로 ZEIT에 배포되는 방식입니다.</p>\n<p>차근차근 살펴보도록 하겠습니다.</p>\n<p><strong>1. 레포지토리 생성 &#x26; 커밋</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: 91.21621621621621%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAACXBIWXMAAAsTAAALEwEAmpwYAAACP0lEQVQ4y5VUuY7bMBDV/wMBUqYK0m26NEmqAGnSbrtAvOuVbPnURYnUSVF6mRnZsotdwyHwMOKIfHPTOx4jLBYvCMMQge/DDwLaL0iuYK2Fcw6ud5O8gXEcwctTSmG9CrE7JNjsEqy3McJtBJUpaK1RFAWMNvJdmpKkuegKLXrWzYRd16Gua5S1ha4dTDOisZgXH/wfEKHFMIwzge1aMlARGnRtO5PeS+4dowPW6wBRolA3LZI0Q0ApCDc7Ck2LMecGtLbDMA54b80ha51ju9tQ3vbIVC4kcZIiihLkhUGeF6JLVIZCF6gqSk9ZwpSGQP+0QlmVYD7xkC/sD0dk5FlGheDDbdsRWrlcVZXkuJbvWlLBurIyBCqa4ciq2VPPEEGaKvJEi0dd18NSm1h7klfoz9IxBoFzI+kpJVQL/u9JjoZhcpks8P6sYwwnyRCi/g24CXzW2+U9hRxjv99LqE3TCLjCHHbbXOQ4vF+UOWRuE5UlVIRYcsRknCcmEPJ6MsD74UR4ruibhM5ZmgCFOE5gaBKYQIpQTwVgMtZfk93sQ66YKadGlonhliCCs+SxKum/XLiHkC8+Py8RBGus6EFYLl/h+wH8V1/0KbXT1EqXkG/msOstUnogsjxHkqXSxOwV9yc3utYlqroVL+/K4djR/OoeXWHRKJpdByJoyAgbUIjiFIYeDjfe91h4f5JHPGx+4Nv+F75uf2Jd7aaLGK8H9f7X5nv4Gx+ePuPT3wd8fPqCF70SDn4Irg/eu/4BrCR2pASVIJEAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"2\"\n        title=\"2\"\n        src=\"/static/5d5a5d93689e5c405ac682f0e19bc9ac/fcda8/2.png\"\n        srcset=\"/static/5d5a5d93689e5c405ac682f0e19bc9ac/12f09/2.png 148w,\n/static/5d5a5d93689e5c405ac682f0e19bc9ac/e4a3f/2.png 295w,\n/static/5d5a5d93689e5c405ac682f0e19bc9ac/fcda8/2.png 590w,\n/static/5d5a5d93689e5c405ac682f0e19bc9ac/d0cc0/2.png 732w\"\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><strong>Repositoy name</strong> 을 <code class=\"language-text\">my-react-app</code> 설정하여 생성합니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"sh\"><pre class=\"language-sh\"><code class=\"language-sh\">$ git init\n$ git add .\n$ git commit -m &quot;first commit&quot;\n$ git remote add origin [Your GitHub Repository URL]\n$ git push -u origin master</code></pre></div>\n<p>그리고 앞서 생성했던 <code class=\"language-text\">create-react-app</code> 프로젝트를 커밋해줍니다.</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.70270270270271%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAAAsTAAALEwEAmpwYAAACPUlEQVQ4y5VUWZLTMBDV/U8BV4AqTsAJ+IEQhhmSGSfeZGuxFi95dMt2YpL5wVWvtHSr1XrdzyLLW5ylQyYDDqWDdRHDOCL2A/rhcXQh4pSXaJVB5zyKSqaxki2cDxCuKeC6Dtp0CDFCkaPSNhl53nUespmdraULO5fsHITtvG5bhYEu4wvFuVTJQSkNYyiYUtDa4HK5XLF+2zl/0zSBPNI89j20tRDKRrotYKRnrk7e/7sOIVAGw3Xdx/5mHyagp6BspkFEeqbWmoJ4OHoGHw40H68BxkRJTxmwjV/RNE16yUC8lqbGTv7Gkz4g8zlElhfIa4WyMThXLZSl7OimnhKI4zzyeiBUrSFYSO1QSI2qNvh2esKH/Sd83H/Gl+NXiJeTRNES8SbChAu0n9C68QGV8mgs8cQ+BOVpTwdIFSnjiII7xE4QeRPAXDM3zMuMaQHNaZ/bqKpqOtje9gmpKHTYEUV5WaeKi6zmm2dGt5XdVphHTV1gqYrremuPVCRuLS6myCoP3Q3vBlvBmXCvmbt2mi5z0wRq9lo2c2Ofmx6MLozvZollXAO+n+EcMGV4yErklUrS2iIsSPM4JH5YNVvbaveUoSKlWbIL7kFD3LDsmAvueHZiKXExVozTXKi0f29bisjnBDfo9x877HY/E/b7X3h+fsH/fbfiCVaAMSR2UoO1XVINa7lzLlWVNb7usUraReuzjvFQPMFOfw5HHI+vyLIMbwSeH1/fUJZV0nBMdMQkv7hQc/+jWHX+FybK26oOBXH6AAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"3\"\n        title=\"3\"\n        src=\"/static/7bd123a1d7960d542b0312c92d13b64e/fcda8/3.png\"\n        srcset=\"/static/7bd123a1d7960d542b0312c92d13b64e/12f09/3.png 148w,\n/static/7bd123a1d7960d542b0312c92d13b64e/e4a3f/3.png 295w,\n/static/7bd123a1d7960d542b0312c92d13b64e/fcda8/3.png 590w,\n/static/7bd123a1d7960d542b0312c92d13b64e/efc66/3.png 885w,\n/static/7bd123a1d7960d542b0312c92d13b64e/6bfd0/3.png 1011w\"\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>2. ZEIT 설정</strong></p>\n<p><a href=\"https://zeit.co\">ZEIT</a> 홈페이지를 접속합니다.</p>\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=\"4\"\n        title=\"4\"\n        src=\"/static/0b1ba272899cd293fd38bfb44bf66ce7/854dc/4.png\"\n        srcset=\"/static/0b1ba272899cd293fd38bfb44bf66ce7/12f09/4.png 148w,\n/static/0b1ba272899cd293fd38bfb44bf66ce7/e4a3f/4.png 295w,\n/static/0b1ba272899cd293fd38bfb44bf66ce7/854dc/4.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><strong>1탄</strong> 에서 빌드했던 프로젝트가 존재합니다.</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: 47.2972972972973%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsTAAALEwEAmpwYAAABi0lEQVQoz31Sy0rDUBDND4iIIFIUirhRcKM7126kLqxWBB9057KfIG78BR/Yii5FfFAQu1bwFwrWLqTYktqmTdqkSe5NjzMXUmqlDpzMTebOycyZ0SqVCsymQWjCcRy4rotOpwMpJbrd7i+wsfd9X8WFEAocEsKD59rQOFlQMLz8n/UThxYEgSKX5DmiHR4dI7G9j73kgcLG1i5eXt9Qq9VQKBRQLBaRz+dhmuYfUq4ulUohHo8jFoshl3uGtp7YwWRkBovxJOaXVzAxGcXdQ1YltNttONSB1WqpNgcJ2VerVbBs5XIZtk0tr65tYnR8CtG5JUzPLmBkLIKb23uV0CBdfSJEnySDmg6a9ph9wul5BheZK6Qvr3FylsZ74YMG46BGhHbpE/5XKRRxqK4htGEDYLH7RXeoHUFtBzwAKXoT5q3wPE9Jwnc1l16Mug7LNGAYDei6Tt5Ak6oL14e3wGj5+LYEqpZEvS3h+ZIIJDrCV2Q9Qq6C/8hBLpk/hujXiY8BQdKDfRgaFOEHzRaTXCekoiIAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"5\"\n        title=\"5\"\n        src=\"/static/b3087a67c7be7c207505183a39dd8229/fcda8/5.png\"\n        srcset=\"/static/b3087a67c7be7c207505183a39dd8229/12f09/5.png 148w,\n/static/b3087a67c7be7c207505183a39dd8229/e4a3f/5.png 295w,\n/static/b3087a67c7be7c207505183a39dd8229/fcda8/5.png 590w,\n/static/b3087a67c7be7c207505183a39dd8229/efc66/5.png 885w,\n/static/b3087a67c7be7c207505183a39dd8229/22475/5.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>GIT INTEGRATION <strong>Edit</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: 67.56756756756756%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAAAsTAAALEwEAmpwYAAACVklEQVQ4y31TS2taQRS+P6FNQ1qSNLSLkmxK94W2NAshW5dC6KL/xJVZuHDbpiQWhEjbtKEpMZrr616j1neW4gMRxFhRwQc+ql/nHDJyddGBjzN37sw333fOGcVz8QvnP3/A6/MhEAjAc3kJVVVxfX2NSCSyAFrTdZ33hcNhBINB+P1+hEIh+FUfvJ5zKPQRj8cFYojFYkgkEnwwGo0uYJlYzjOZDLLZLHK5HH6Ls8rRsRNO52c4RTwW8cvXb9A0jVVKkApJZASpdTgcsNvtsNlsODk5gbKyuo7Hz55ja/sF7q08wptdkyBQ4Xa7eQNFl8vFFolAgi6giy0WC8xmM/b29nBwcABl7eEmdl7uYueVCesbT7D/7j1ubm6QETbICllKpVNIJpMLkKmh/9I2rSn3Vzew9XQbD9Y28fqtCZVKBaVSCYVCgee3t7doNBpzNJtNNP400G63Oeek0qhaOfx0BMrjh4+HOD39jtFoiG63i16vx3EymYDGbDZjyDEcDufFMRZJoVsIkYjOkoejkSAdYTweYzqdCiZw5LkY/X4f5XKZL9N0jQtG+aVuIZXK1ZUXqu8CXq+Pf5ClarXKkdRJZZKwXq/j7OyM7cdEOwW0sCDW2TorJGUEWkin02i1WqjVaozBYDC3KwlJGeW40+lwf+rirLGVFDkJi5uIkJQVi0UuhlRnJMzn87BarayQHgTZXMihTCopTKVSnCO6naLMHeHvHSE5oP1zhf8jpP6SY3ZHYBzG4lDhlp8iW14uO71JalKyn71r7qyxyYUL2cyy94yE/wBK5af/IoA7TwAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"6\"\n        title=\"6\"\n        src=\"/static/a4072211ee5cf17b046cc824e89d409b/fcda8/6.png\"\n        srcset=\"/static/a4072211ee5cf17b046cc824e89d409b/12f09/6.png 148w,\n/static/a4072211ee5cf17b046cc824e89d409b/e4a3f/6.png 295w,\n/static/a4072211ee5cf17b046cc824e89d409b/fcda8/6.png 590w,\n/static/a4072211ee5cf17b046cc824e89d409b/efc66/6.png 885w,\n/static/a4072211ee5cf17b046cc824e89d409b/8ea22/6.png 1023w\"\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><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: 48.64864864864865%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAABoUlEQVQoz42SzUrDQBSF8xKCgj9VlCKKIvgHgg/gypUrQcG6ELftG3XbPkVtFXEhSJu0oS5abbGmTWaaNMlk5pgZW3+KBS98JGSSc+/JuVrXekO71YRtOxgMBuh2u3BdF7KEEL+QFUURPM9DGIbwfV+9GwQhKOmB2B1o8uA/NS48uo6XVizdoSQp3uImplzRVXfHceKpbRBCFD+FRvdBECCXyyGfzyObzcI0TWgzs8tY2TpAcvsQU9OLOD27VDbq9TpqtZq6GoYB/oeg67nIZDJIp9NIpVIoFArQFpdWsXN0gv3jU8wvJHF+cTXJ9C+bEy0nltextrGLtc09zCVWcX55jaDVwMt9Ee3HBxD9CW6zASaUCn7qSFEZ0gjOObRKxYBuVBXlso7Gawus0wYxddBnE/16FV679SkI8cX4BozQhOCQSHXGPhMPZUcu1H+Tn/txSIRS+AGLCdWayOAkbrxCcn0kckqNUgfUeY+D8GBZltpDu9cDjQUYY6qZH3JYfY4OjfBGItgejxtyNVHAI7Ch5eGE4ivBSfv3bfWPs7HHHwbR4EXN1Mn5AAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"7\"\n        title=\"7\"\n        src=\"/static/58c83315d46a2f57d4611a9f20d7e263/fcda8/7.png\"\n        srcset=\"/static/58c83315d46a2f57d4611a9f20d7e263/12f09/7.png 148w,\n/static/58c83315d46a2f57d4611a9f20d7e263/e4a3f/7.png 295w,\n/static/58c83315d46a2f57d4611a9f20d7e263/fcda8/7.png 590w,\n/static/58c83315d46a2f57d4611a9f20d7e263/efc66/7.png 885w,\n/static/58c83315d46a2f57d4611a9f20d7e263/1ac29/7.png 1022w\"\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><strong>No repository</strong> 가 변경된 것을 확인할 수 있습니다.</p>\n<p>추가적으로 <strong>Domains</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: 59.45945945945946%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsTAAALEwEAmpwYAAABhUlEQVQoz5WS3U7CQBCF+xw+kYnv4ivoE5BoVAICkRi90Cuv0JiQGMHfeGMCIVSkxgRDaW0p/d3u7rFbKoIWIpN82e52e6ZzZiRVVWEaOjRNg+t68H0/hlIKEZzzGUSId4yxeA3DcLJ3HAuSbduwLCsRdBEEQarQb9G0O0JUwpxYJLgokdRut9FqtSDLMhqNBprNJjzPm4guE+K+NBgMIHwUJfd6vZhp/5YN6T9Zl0GaNlQ0xXHceBWIs7mJkN4c6bss0X6l20X3tYM3RYH8IsN2nfhcdJ4QEhOQADSk4CGLvRYjNlPy9Gx96DbeNQ993cSnasDsj6Br0bM5hGFaMIfR3jBhWy7g/7Vm7CFPfp6L8vwxPPoAYh5ZXNwPLAEgoz6OSzs4PzuZWDNT8shnyFZ1ZCoqti4G2L7UUah7yNdc5K9d5BL2rhzk6iE2TxWsrG5gbT2HkKYKchw+UhTvKI6eGMoPFOX7EKVbgmLE/g1BISJbI8hUA+zWOA6egUpHCCVtitYvioqZwyRWczQAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"8\"\n        title=\"8\"\n        src=\"/static/d6e961ee3fe2369841b4d0c139183685/fcda8/8.png\"\n        srcset=\"/static/d6e961ee3fe2369841b4d0c139183685/12f09/8.png 148w,\n/static/d6e961ee3fe2369841b4d0c139183685/e4a3f/8.png 295w,\n/static/d6e961ee3fe2369841b4d0c139183685/fcda8/8.png 590w,\n/static/d6e961ee3fe2369841b4d0c139183685/efc66/8.png 885w,\n/static/d6e961ee3fe2369841b4d0c139183685/44a54/8.png 1017w\"\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>자신의 도메인이 원하는 도메인을 입력후 Add 버튼 클릭</p>\n<p><code class=\"language-text\">단, *.now.sh</code> 형식으로 도메인을 입력해야합니다.</p>\n<p>만약,</p>\n<div class=\"gatsby-highlight\" data-language=\"sh\"><pre class=\"language-sh\"><code class=\"language-sh\">[Youar Domain] is owned by another ZEIT account.</code></pre></div>\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: 72.2972972972973%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAAAsTAAALEwEAmpwYAAABoklEQVQ4y5VS7W7iMBD0+7/JVe2L8AeknhD8oWpSQSCAbew4iT8yt5tcrjlEWnWlzXrtzdgzuyLPP6BkidOpgHMOTdNAa422bcHWdR1GG9d8xu697+s5xhih5RGCk7pucL1e/x1OAR75Ixv3BWZsLJgDnXOx2WywWq2wXq+xXC6xWCz6197Tnbv0XhJR1zVsZcHRGNPrx3p8Re8rE98V/JjyuEgpQSmFsiwhpcT5fEYIYf4idA8vFSMtBtzv99i9vSHPc+x2ux6YR4ml4FhVFay1aB2NVNv1OUs1lUZ8djNBmgaFCijlDVYZ1BfSV1e9xgzIbgmkrQnQd3AExqM2nQjx34ikiBRDT+g7S/SA4FvEv7LcUeYEuNqIo/Y43hJ5h5PpcNAJJ8ovNvX7pUloCCPSX4Y+xjP45IXT5zY+wdYRNxegqzBEF2FJL0cUTTOASaXxnuXwWYYg1cDnvstsF6mRUeGhKHAsDsg+9lA0l9Pesm23W7y8PMM9/UL6/TrsUlMngENxSRyk63Ameq5lygPF2pO2pC8PfIjxU0cM1Kcs/wA3lEfR+/7QdQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"9\"\n        title=\"9\"\n        src=\"/static/36c80c90f743104af122f2c9f6b3d229/fcda8/9.png\"\n        srcset=\"/static/36c80c90f743104af122f2c9f6b3d229/12f09/9.png 148w,\n/static/36c80c90f743104af122f2c9f6b3d229/e4a3f/9.png 295w,\n/static/36c80c90f743104af122f2c9f6b3d229/fcda8/9.png 590w,\n/static/36c80c90f743104af122f2c9f6b3d229/efc66/9.png 885w,\n/static/36c80c90f743104af122f2c9f6b3d229/51ed8/9.png 1021w\"\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\">GitHub Webhook</code> 작업을 끝이 났습니다.</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: 101.35135135135135%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAACpUlEQVQ4y6WUyU5iQRSG2bhxoyJBhDvPAxev0IJTHNJ21LRccIp2p1dGEB/GjT4WHR/BNxCiCwE3f9epVlsNiqYX/62qm6qvzlQndnNzg7u7O3R7XXQ6bOx00OmSuugy9Xq9gbq/v+cMYsU6DHBxcYGtje84/PkLewc/sL+zj4O9Xezv7iCKKqhU3tb29jbW1tZwfn4OYsVub29Rr9VhJFX4QQFuMA1HMmDJIlxNRmYyhXh8HOPj/ZVMJjE0NITj42MQK9ZqtdBoNKAIKizTQs614TsWNF2HqirQNBWKorwpne1LJBI4OTlBu91GjD71eh2TzKpgagZh6DOQikx6EpmMgIzwV6IoQpKkp/FxTtCxsTHOeALWajWkkimEhQUEpSXMrG5gbmER04EPx9DgmgZkWf4HfQCS+gLJ3NGRERiOBzs/j1xxHoWlb5gqFDG7uIzZUhGha8K3Tdh+gICFxNI1Du4LpAX91DQN2SCAbtrQLQe+78P1PCiGA8v1kaW16zG5yLF90iCgbpgwbRcSc09SNKjsArpEkhXIisoTRPF9TMZAIG328yUUl77iy3SIGd9BjrlnsGzL7LDwkBzS4/xNYDwe54EPF1awvLKKlXwWc2EWoWezmJkvkiINSspzCy2bWeV7yDosjswyCr7Gxn6wDwE9FniSZdvcLUFg7j2rwdfgd4CjcHN52FMlngCRwV5b8ymXU6kULxWBBzzT92V8yOVWu4XTxinEtAiH1Z+lW7x0qGRkWeLJeE9UVtQkXrzlo6MjJEYTrDwMqKIClUHp/VInmZiYeFfpdBrDw8OcwYHX19c4OzvD+sY6okqEcrmM8tYWIjZGUTRQ1WoVm5ubnEEs3r6urq5weXmJZrOJ30zNT4rOEoNYMWrbZCot/kfEINYf4oYzxia+I/UAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"10\"\n        title=\"10\"\n        src=\"/static/eb003f8db7b935c77751d81da618ee26/fcda8/10.png\"\n        srcset=\"/static/eb003f8db7b935c77751d81da618ee26/12f09/10.png 148w,\n/static/eb003f8db7b935c77751d81da618ee26/e4a3f/10.png 295w,\n/static/eb003f8db7b935c77751d81da618ee26/fcda8/10.png 590w,\n/static/eb003f8db7b935c77751d81da618ee26/efc66/10.png 885w,\n/static/eb003f8db7b935c77751d81da618ee26/c83ae/10.png 1180w,\n/static/eb003f8db7b935c77751d81da618ee26/21b4d/10.png 1280w\"\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><strong>src/App.js</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: 59.45945945945946%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsTAAALEwEAmpwYAAABoklEQVQoz52Su27CMBSG8wpIgLjkSkjsAIW00DJ2ZYCZCakg6A7PBbwFU0rYGRhg4iaCUCOY/tqhVauWVirDp5Mo9pff51jY7/fwX32cTqerOB6PQfV9H9wlHA4HzGYzOC8OXHcMd8xwXYzf4c+TyeRPxmzPdDo9C/kfut0utKQKu1hG1i4hR3K4sQiDIpVKQVVVaJp2EV3XEY1GUa/Xsd1uIXh7D8+dDnKKBZvJ7or3KJAMkxqwMwRmWocoipAk6SKKoiAcDqNarWKxWEDY7XZot9uQpTQIzeD2hsIyDYhsMRfJrMqy/Cs8fSQSCYTz+Zwl9Dw0Wy3Ekxoeyo8olm5hEgLDMKDpaZZADZL8S9hiQt4HkyWkhIIwoWVZ0A0CRdX+J+RH7rAexmIxaOzjx8JA8i7ifVI+6jf4YHiYWq325chPTUhREVkzC0unoLkCFDbdeDyORCLxJ7zPoVAIlUrlM2Gv1wt6Zts28vn8Fwrf3n/C91BK0Wg0zlPebDZwHAfD4RD9fv8qBoMBRqMRlsslBH67+YVcr9dYrVZXwx28fW+woCw7MCIhUgAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"11\"\n        title=\"11\"\n        src=\"/static/4cb9696e58649bf111913ec9d8a44a7c/fcda8/11.png\"\n        srcset=\"/static/4cb9696e58649bf111913ec9d8a44a7c/12f09/11.png 148w,\n/static/4cb9696e58649bf111913ec9d8a44a7c/e4a3f/11.png 295w,\n/static/4cb9696e58649bf111913ec9d8a44a7c/fcda8/11.png 590w,\n/static/4cb9696e58649bf111913ec9d8a44a7c/efc66/11.png 885w,\n/static/4cb9696e58649bf111913ec9d8a44a7c/c83ae/11.png 1180w,\n/static/4cb9696e58649bf111913ec9d8a44a7c/21b4d/11.png 1280w\"\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><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: 70.94594594594594%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAlUlEQVQ4y+2PywrCMBRE8/+fJy4sbUxITZqgJY8KFfMYW8GFCBalyw4c7mJgOJeo6oCq3WNXU0ipYK3DPUbEmBBTwjjewIUCZSfwtgMT3yHDcIX3Ac57dNqgbhjokYNxgYbyJ1IZXHqHc28XIcYYaK0RQkDOeTKLH6TJdO5SWoZg5ZBSCtbkbXDO6/5tuPrL2+A2+HseyulPmvxwEp8AAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"12\"\n        title=\"12\"\n        src=\"/static/494d4ca74af4ff71e518a546d594aa15/fcda8/12.png\"\n        srcset=\"/static/494d4ca74af4ff71e518a546d594aa15/12f09/12.png 148w,\n/static/494d4ca74af4ff71e518a546d594aa15/e4a3f/12.png 295w,\n/static/494d4ca74af4ff71e518a546d594aa15/fcda8/12.png 590w,\n/static/494d4ca74af4ff71e518a546d594aa15/1e043/12.png 690w\"\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>해당 이미지처럼 나온다면 정상적으로 <strong>자동화 배포</strong> 가 되었습니다.</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=\"/3e36abc744d107b16c715b3240981652/13.gif\">\n<br /></p>\n<p>차근차근 잘 따라온 당신! 최고입니다. 👍🏻</p>\n<p>오늘 배운 내용을 정리하면</p>\n<ol>\n<li>GitHub 레포지토리 생성 &#x26; 커밋</li>\n<li><a href=\"https://zeit.co\">ZEIT</a> 홈페이지에서 GIT INTEGRATION 연결</li>\n</ol>\n<p><strong>3탄</strong> 에서는 <code class=\"language-text\">간단하게 화면구성</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":" 이력서 홈페이지 💎 ▻ 2탄 ","date":"September 19, 2019"}}},"pageContext":{"slug":"/project/resume/2/","previous":{"fields":{"slug":"/project/resume/1/"},"frontmatter":{"title":" 이력서 홈페이지 💎 ▻ 1탄 ","category":"Project"}},"next":{"fields":{"slug":"/project/resume/3/"},"frontmatter":{"title":" 이력서 홈페이지 💎 ▻ 3탄 ","category":"Project"}}}},"staticQueryHashes":["3128451518","3956431471"]}