{"componentChunkName":"component---src-templates-blog-post-js","path":"/project/resume/3/","result":{"data":{"site":{"siteMetadata":{"title":"아구몬","author":"[AGUMON]","siteUrl":"https://ljlm0402.netlify.com","comment":{"disqusShortName":"","utterances":"ljlm0402/tech-blog"},"sponsor":{"buyMeACoffeeId":""}}},"markdownRemark":{"id":"0f9e5ad3-92f3-5c55-b78d-2b5cc90a01e0","excerpt":"💎 목차 서론 (Introduction) 본론 (Main) 결론 (Conclusion) 🌱 서론 \n 두둥! 드디어 마지막 3탄 으로 찾아 뵙습니다. 마지막으로 그 동안 배운 내용을 정리하면 ZEIT NOW 웹 호스팅 셋팅 create-react-app 프로젝트 생성 GitHub 레포지토리 생성 & 커밋 ZEIT 홈페이지에서 GIT INTEGRATION…","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=\"/a17cc10c65943d6b1f319b72aa4aa1d5/1.gif\">\n<br /></p>\n<p>두둥! 드디어 마지막 <strong>3탄</strong> 으로 찾아 뵙습니다.</p>\n<p>마지막으로 그 동안 배운 내용을 정리하면</p>\n<ol>\n<li>ZEIT NOW 웹 호스팅 셋팅</li>\n<li>create-react-app 프로젝트 생성</li>\n<li>GitHub 레포지토리 생성 &#x26; 커밋</li>\n<li><a href=\"https://zeit.co\">ZEIT</a> 홈페이지에서 GIT INTEGRATION 연결</li>\n</ol>\n<p>까지 진행하여 화면 구성만을 남아두고 있습니다.</p>\n<p>해당 포스팅의 경우는 <code class=\"language-text\">주관적인 요소</code>가 많이 포함되어 있으므로</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<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: 383px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 107.43243243243244%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAVCAYAAABG1c6oAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB8klEQVQ4y51Uy67aMBTkI6rqVpVuSRwnAZIKcnnkQZ4mToAIUFV1WamL/v8nTI9dlcJdYRbHWcQezZyZc0aewzFNUixP39EUJcqywmQyRRh+1V+H/nPuPlwj13FgzyKs5Q6tqFFWNYIg1GCMOfqSCehIP2AMw/ozqqJA3++peuR5cQU0Af0LSNV6X1DnGWS3hxA7xHFizO4OcBVZKLYxWtmjbaWu1Wp9x/IhQN/xwDcB5qcYRUoyidF7EOMecs7xkl6QFAJlniMh113XuwMy6iFjLn6cGTpZYX8YsFhEsCz7eYaO4+JUfISoc+pdhyzbYj5fGBvyXzI9nJMhOWVQCIGmEdplU0NuGHIEVYWK4nI8HlHXDYU7eD7Yqoe/Lx/QVDHETmKz2TwV6huXXfTJK3Y0erJTOWzh+xPYNruCqe8jwCOXDpuy+OvbJ7RNhh2ZMgwDSR8gZafDrYAfZmhzD0tuoQ9p9Gg6JJVyeTqd6VJMjSQzOgLPQzKP0NFiUMzSNMN4bOn6l8eHJTuMww98LLM3lEVFsyw1YBS9kTmxDrkRQ4d5BGhjtfUhmhaHw1EvBpXFinK5XK6M8jjixJCHM0TNFof+gPP5ok1RK0xdMJbs2mO8RiWs7idkXZLkTrNTstWCeHL0SJJtkzR+ZXKbPxPAP6MFdrfw9pdbAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"2\"\n        title=\"2\"\n        src=\"/static/b3b7f8287c07edb7beeeeb44aa92a1b3/d0c94/2.png\"\n        srcset=\"/static/b3b7f8287c07edb7beeeeb44aa92a1b3/12f09/2.png 148w,\n/static/b3b7f8287c07edb7beeeeb44aa92a1b3/e4a3f/2.png 295w,\n/static/b3b7f8287c07edb7beeeeb44aa92a1b3/d0c94/2.png 383w\"\n        sizes=\"(max-width: 383px) 100vw, 383px\"\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\">create-react-app</code> 앱에서는 볼수없는 파일이 존재합니다.</p>\n<p>바로 <code class=\"language-text\">now.json</code> 파일입니다.</p>\n<p>한번 살펴보겠습니다.</p>\n<h3 id=\"▸-nowjson\" style=\"position:relative;\"><a href=\"#%E2%96%B8-nowjson\" aria-label=\"▸ nowjson 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>▸ now.json</strong></h3>\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: 111.48648648648648%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAWCAYAAADAQbwGAAAACXBIWXMAAAsTAAALEwEAmpwYAAADGUlEQVQ4y51UyU4bQRT0jUtkS94Aezz7vnnGGNuxiSDJJRckQLYlfoflIxAKcEPiDxD/wyIQYjlxgMp7bSN8MAnkUGqrPV1TVa96Mvf393h6esLLywuen5//G8zBXJnHx0ecnZ1hb28PBwe/CQc4PDz8MI6OjrC/v4/T01M8PDwgc3t7i+FwiC/ZHKqyitnZWRQKeRTyeeQ/gGKxiJmZGayuruLm5gaZq6srDAcDeI0Ouj9/oRGHCF0HgWtDUVWo/4Cu60LExsYGzs/PR4QDIqxINXhxAtPQ4VsGHF2Foamo0r5Uq0GWZdTG6ySYlFWura29EbJltpn2vmNxsYWlZoqlbhetJEbiO6RCm0r2V8L5+XmYNh02LciqBs1yyLIGk8h07bOEZFnRTXhRHapC1iQJUqUCSaqiWq3SKgnbAuMIGPySqYScYZmCDdImPD9A6NFQfB+O40IzLFI4ypPV2pSxQYpNgjYezFTLxWIBaXcZIZHGvouFhaZQrJk2HVYR2OTAMhE6Fnz6zeBsVSKeqrBSqcKvp7BME7FrIbQN+k3TDkKYtOfZFhxSxy1QFAUy2eVVmW65T/WQ0OitII1jrDRjLDfr6DVitL920Vhso0dT76Wj/U4S0UttxBQNCyiWSlMUUvhuGMMmVXVSGDsMVmbC4Ox8UmpZCKijAf3H9j161iXlpXJZEF5cXEz2sIDG0g8kzTaSKECr1Uar3UZUT2ARIUfA5JKsiJdXx5OXyfbUDOfm5hARmev5Ivh64Al4ji2UWZSdmDCR88RFju/1kAm5b7YXiIc9UxdXz1QVUWqL7Gp0Z13a98jyaML6+z0cDge0WULS+YYoXUDokzLOk4gMxxO1YSKXcpPJMhf99ea828MyTSpqduAGEX1tbCRxBNf1oOqGKLaoDNl9tTp59UqTU768vMTm5ib1sELXTnm7s+Or9XqwNl4VBvdvDI0iKdOU19fX3xT2+31ks1kxPR7OZ8BCcrmc+MCK2lxfX+Pk5ARbW1vY3d3Fzs7Op8Bntre3cXx8DBaXubu7E59uZmfJ/wM+y8KY6w9I0Gf+FPdUWwAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"3\"\n        title=\"3\"\n        src=\"/static/eb333b285fa8d0713780cd07975abcdf/fcda8/3.png\"\n        srcset=\"/static/eb333b285fa8d0713780cd07975abcdf/12f09/3.png 148w,\n/static/eb333b285fa8d0713780cd07975abcdf/e4a3f/3.png 295w,\n/static/eb333b285fa8d0713780cd07975abcdf/fcda8/3.png 590w,\n/static/eb333b285fa8d0713780cd07975abcdf/efc66/3.png 885w,\n/static/eb333b285fa8d0713780cd07975abcdf/c83ae/3.png 1180w,\n/static/eb333b285fa8d0713780cd07975abcdf/58354/3.png 1396w\"\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.json</code> 파일은 ZEIT Now 빌드를 위한 파일입니다.</p>\n<p><code class=\"language-text\">name</code> <a href=\"https://zeit.co\">ZEIT</a> 홈페이지에서 프로젝트 이름입니다.</p>\n<p>그 다음으로 가장 중요시되는 파일 <code class=\"language-text\">package.json</code></p>\n<h3 id=\"▸-packagejson\" style=\"position:relative;\"><a href=\"#%E2%96%B8-packagejson\" aria-label=\"▸ packagejson 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>▸ package.json</strong></h3>\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: 120.94594594594594%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAYCAYAAAD6S912AAAACXBIWXMAAAsTAAALEwEAmpwYAAACt0lEQVQ4y6WVy1LiUBCG2bixXIjcBHMlN5IckhACCFrqTInlLITRjW69AO+jD6blE/gC3pgqLdz8c87RGR3LIDiLv3Kp9Ff9d5/uJO7v7/Hw8IDR0xNGo9GX9ERjGYOxEo+Pjzg7O8NWu42f3S46nQ52qDpcXXS747W7u4vNzU2cnp6CsRLD4S8cHx1hPp2DUQ4hC0uwZAGauMSVz2WRXFhAKpX6UNlsFjMzMzg5OcFwOETi9vYW/V4Pkmai8X0bJAjh+wFKpomiqkKlUhQlVpqmIZ1OYzAYgLE4sEfpBVlFa7sLv7EKz6+gZOgQRBEilSRJf6/vxaDJZBL9fv8VyB5SqTTN8AeijTbqyy0sBwQNn0BV5LHQD4E9arkgiCBhDaZDoNsEsqLCKKqQZQmC8Ap6D40F5vJLiNbbcKldYhRhGxpcU4dDZVP7okgBk2bILdPChqvfYLsENVJCldioew5qZQeuZfJ6Tl5DmmEqk0Fzawde1ECL1o9pLfSwUimj4trUujxdDbO5HCrNNfitdTiOi4ptInRLiGimTDa1/raW44Hs2EgyB5KoCdfzYWhF3mFmlYHiOh3flMVFuEEVpuvBMgzeENaYt8GTW+YZKqhtbIHUV2D7IZ8QQRDGwmKBA/owT1826nWst5ooE/JpZp8eG/aybOmo2gaqrgVL16DI8hdHj9Ywk8nCry3DCSI4XkAtK5BpgPwGNnENueX5JEKPoOp7iOj1z3HxbOt5SqQplwOrYeCUuO2KY9F7i08KsYzYKYnPkO6yQqEATddfPpSfLb4EsSmJU7FY5Iv2n314RDf23Nwc8vk8cnRiphFLZHZ2FoeHh8/A6+tr/k/Z29vDwcEB9vf3pxKLYbGMwViJm5sbXF1d4fLyEufn57i4uJhKLIbFMgZjJdiv7+7ujqf7P2IMxvoNyN+/3DJ4spYAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"4\"\n        title=\"4\"\n        src=\"/static/3d965017739ead6fcf2d9e5ed54184ef/fcda8/4.png\"\n        srcset=\"/static/3d965017739ead6fcf2d9e5ed54184ef/12f09/4.png 148w,\n/static/3d965017739ead6fcf2d9e5ed54184ef/e4a3f/4.png 295w,\n/static/3d965017739ead6fcf2d9e5ed54184ef/fcda8/4.png 590w,\n/static/3d965017739ead6fcf2d9e5ed54184ef/efc66/4.png 885w,\n/static/3d965017739ead6fcf2d9e5ed54184ef/c83ae/4.png 1180w,\n/static/3d965017739ead6fcf2d9e5ed54184ef/21b4d/4.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>기존 <code class=\"language-text\">create-react-app</code>과 동일합니다.</p>\n<p>하지만 저는 <code class=\"language-text\">TypeScript</code>로 개발하기 위해서</p>\n<p>몇가지 모듈을 설치하겠습니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"sh\"><pre class=\"language-sh\"><code class=\"language-sh\">$ npm install typescript\n\n$ npm install styled-components\n\n$ npm install node-sass\n\n$ npm install @types/node\n\n$ npm install @types/react\n\n$ npm install @types/react-dom\n\n$ npm install @types/styled-components</code></pre></div>\n<p><code class=\"language-text\">typescript</code>, <code class=\"language-text\">styled-components</code>, <code class=\"language-text\">scss</code> 모듈을 설치했습니다.</p>\n<p>그 후에 파일들을 js 파일을 ts로 변경 및 필요없는 파일들은 삭제</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 379px; \"\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,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAACVElEQVQ4y5WU2XKjMBBF/RnzkoxBILHHBgwIMGCbJTjL1MxU5v//5E5LrriSl5g8NGIRR7e7r7Qy1zbqxy3G3xLbhxTpboeikKiqGmEYgTELts0Xx0owE3Y1Ipz+4Wka0bQdDMOEZdngXOjxW0B14a6PwzHE8dihJaCUJdJ09211GmjRRdg2nqI77OuKwCecTr1OWylVk26p/PhdAx3O0Xk/0bUtXl5eMU2PpLSF7weLYWpUsbItUhgKxBnDLs/R7BtUZYWuOyCOk0VpXxcVQjVFgJcR+GMJt4hhMAbTsmCa7ApbpJJgIvBUU9RkB/fpCL8rEE0lPBnDMpfBPgE3wXsNBU5mBL9MCJrB36dwsw0sRhM5vwm+AkP/opALF8auh9dmiOYKwakA911YBtNKPxb+pkL9khSuo4JSTbQ6r0rgxJEON9+Ce+4yhZFSSA/M8fGjeYNTEaxNEVAdQ4qgl3oB23GWAXUN6SFwXOr0Gdu2QtrXiIcafrODV6e0anCzQfo9ZclVlw3yYWYbGDwD/ThjHiaUudT1Y2uqIVsAezc2NXGlfnD8EAlB1Jabz2cUUoKRF5UDVNhLmnLdekR1I45EejgfJJ6HEgN1e6R4om43ZHbGvvYiI6BLdS7SB6wY4/ACA1lhYSYPvvQEOhKwSbEhXwkq9i1jvwPzhIDcWOMuO0AMf/A29/j7+oxf84iha/R5+HH7fZUyp9FVe9miPeslKdmDzsFjg2I6Iu9bxLVcfMBeukz35NcVswQ27prSM2AXWwi5gbsnY+ebTw25DbwcDv8Bh9tWzhwIFeIAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"5\"\n        title=\"5\"\n        src=\"/static/5aa4491b5ab03fb13a21d8b926e13510/811d1/5.png\"\n        srcset=\"/static/5aa4491b5ab03fb13a21d8b926e13510/12f09/5.png 148w,\n/static/5aa4491b5ab03fb13a21d8b926e13510/e4a3f/5.png 295w,\n/static/5aa4491b5ab03fb13a21d8b926e13510/811d1/5.png 379w\"\n        sizes=\"(max-width: 379px) 100vw, 379px\"\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<h3 id=\"▸-source\" style=\"position:relative;\"><a href=\"#%E2%96%B8-source\" aria-label=\"▸ source 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>▸ source</strong></h3>\n<p><strong>App.tsx</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: 74.32432432432432%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAACEElEQVQ4y52UW27aQBSG2QAPoURcjA02GHvsARKS0iaAyjVSW1VClIZdwAOsg1cQO+GZrQBquCMkhISUvzOmJamUNJQjfZ6RPfP7P8dnbFutVtjtdrDi8RGHeD4/IrbbLbiWjV/m8znGkzHG4wfGeM/Dz/3I708mbD7BhI3T6fRFFovFXnCz2aDZbOI2cYO7z1+RKxSRzeVR/PINueId8pk8cpksCtkMUqkUksnkX6TTacTjcbRaLculbTabofK9As2ngkbjoIlbaJoBGkvAJDouNQ1mKAg1IEEUvHC7XXC5nvB6vbDb7ajValiv17DxtO5/3IPIOiihiF59AKExRK4/gpgUERIF0TVcXVBcRAyEVRV+v/+ALMs4Pz9HvV7HcrlkgqxG3KEsymwzhakSKGEC2TAhmwwtggAx4I9RqNSEzhxzIVEUIUkSAoEAnE6nJWjVkBe6VCqxhwJu3l8jbBiQKRONmFBYqqJPYPggCT5r9DH+iL0qWC6X4XznBNUplGAIEnMgiaxmvze9xD8dckHH2RmCehik8AmqSd4UfNOhw+FAmNUndBmFzFJ97uIkQd4CoSCrmSAcJfSqIG+bSqUCj8dzcPU/8C/Os+N9eHBYrVYth0HmkPcVf+sx8LWKorBmd6PRaDw57PV66HQ6aLfbJ9HtdtHv98FPnY0fai46HA4xGAxOYjQaWT8OflJ+AVHwmUO4kTfEAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"6\"\n        title=\"6\"\n        src=\"/static/1635c74b502a6e9223bf8994a5c04560/fcda8/6.png\"\n        srcset=\"/static/1635c74b502a6e9223bf8994a5c04560/12f09/6.png 148w,\n/static/1635c74b502a6e9223bf8994a5c04560/e4a3f/6.png 295w,\n/static/1635c74b502a6e9223bf8994a5c04560/fcda8/6.png 590w,\n/static/1635c74b502a6e9223bf8994a5c04560/efc66/6.png 885w,\n/static/1635c74b502a6e9223bf8994a5c04560/c83ae/6.png 1180w,\n/static/1635c74b502a6e9223bf8994a5c04560/78612/6.png 1260w\"\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>Header.tsx</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: 81.08108108108108%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAAAsTAAALEwEAmpwYAAACSElEQVQ4y52UzU7iUBTHeQEnQCAObaEt/aa0lC81YzKTeQyCW30LYOfGdwASXoSFFhJWoAt3JGwUAlFIjAks/nPvBYxfE4dZ/HPvSXt/53/OuW1gsVjg6ekJq9UKy+Xyv/X8/Iz5fI7Aw8MDhsMhLq8u0el00PGv4Hd8tvdp/ErdbvdT+b6P29tbUHMBCru4uIC4H4fnFZDKFpA2HKQ0DY6pIylLkCURkigikUggHo+/kSRJCIfDODs7WzscXA9Qq9UgcxLslAszW4RlpGGqGjKWzqB0NTWFQSnkNZgCI5EITk5OMB6PCbDfR7VaRfi7gNzBEYrHv+B6WRi2A8vLoVBwoapJCMIa9F5bYLlcxv39PQLXgwEDBoNB/D7I4Wc+g+Osg3zaIs4MUq704mrr7EtgZQM8zKQZKGebKDoWXFKuIksfIK/jD8DB1mEoCC9lIG8bZCAKMgQmiQnwHI84TyQIBCS86eGnwP6mh/w+D00zkUhqZDgG2StIJhXIhg7ZMiHpGmQSf+mwv3EYi8ZQcA9ge0U4OQearpL+yZApaBfgtuS9b3tsAIqdgnF4CDfrQVF1coj0kNuh5C0wFApBVRSoaRvWjyM4+SwURYVIXDI3m4v9XrIsIxqNsnv40sNKpcKy0Gw8GQDHcYjFYmQgHIsF4u5volBqplQqrYE3Nzc4Pz9nDy3LgmEYO4meEYn709PTNXA0GqHX66HVaqFer6PRaOysZrOJdruNyWSy/tvMZjP2Hd7d3bEsdP0Xbd+l63Q6xePjI/4ArDewWr0QfUEAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"7\"\n        title=\"7\"\n        src=\"/static/545720944ef3e65b2870637df16b62cd/fcda8/7.png\"\n        srcset=\"/static/545720944ef3e65b2870637df16b62cd/12f09/7.png 148w,\n/static/545720944ef3e65b2870637df16b62cd/e4a3f/7.png 295w,\n/static/545720944ef3e65b2870637df16b62cd/fcda8/7.png 590w,\n/static/545720944ef3e65b2870637df16b62cd/efc66/7.png 885w,\n/static/545720944ef3e65b2870637df16b62cd/c83ae/7.png 1180w,\n/static/545720944ef3e65b2870637df16b62cd/f09ab/7.png 1250w\"\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>Main.tsx</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: 80.4054054054054%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAAAsTAAALEwEAmpwYAAACPElEQVQ4y52Uy27aQBSGeYOgFLcBbGPsMb5iE8ylVF32JcBkHTV7BGs2PAlCPAi7EPMCbNglESgBJSGrv2eMkra5Nc3ik61h5uM/PsdOXF9f4/b2Fvf390/YxtftdvtP+L6bmxtwV2Kz2WA+n+N0OkUUnSE6I6LokdlshoiYvQHft1gswF2Ju7s7nPw8gS4zlKsNeEENvu0TFjzHAmMMOtPANA2qqj6D/35wcIDBYBCnTaxWKxy1j8CyKkzbg3VYgamZsGmjb+pwCwxFQ4euqZAkCaIo/kUul8P+/j56vd4u4XK5RNhu47OooFJv4LDWQKlaBzNM6G4JpaAM29IhkkyW5WcoioJUKoVut4v1ek0JSdhstfBFEPDja4DvZQ/fDosIXAumzqBQgpdErwp5wmazCYEWG6UiqkULDd+BQSU6VK6i5OJSHwTSk6QvCluUUBA+oebZcHQNvlWIk2UyWUhZjgiJnteD7E/pi8I2PUM5I0HVCsizAkxqgprPQy3oyFsmFJPWNRY34F0Jw1YIOS0h8OtwygEsKlvV9Z3QNKAYlFjV3i/kJe8l92iu8tA8F3a9DrdaoVTUXV62+J8lh2EYL/IhZT7NYq0Cq1KmhMbuIO/0K93mQoEmhM/hk6YI8YZsJoN0Oh2TofssNeUteNpkMolOp/NbeHx8HP+T67pwHOcRm2Pbb8LPaPRa9vv9nfDy8hKTyQSj0QjD4fBDjMdjTOnjwl/jxNXVFXjKi4sLnJ+ffwh+ljv45+sXR824xKvUScMAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"8\"\n        title=\"8\"\n        src=\"/static/a9fdad5df8f50fd98c4646fec044449c/fcda8/8.png\"\n        srcset=\"/static/a9fdad5df8f50fd98c4646fec044449c/12f09/8.png 148w,\n/static/a9fdad5df8f50fd98c4646fec044449c/e4a3f/8.png 295w,\n/static/a9fdad5df8f50fd98c4646fec044449c/fcda8/8.png 590w,\n/static/a9fdad5df8f50fd98c4646fec044449c/efc66/8.png 885w,\n/static/a9fdad5df8f50fd98c4646fec044449c/c83ae/8.png 1180w,\n/static/a9fdad5df8f50fd98c4646fec044449c/78612/8.png 1260w\"\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>Footer.tsx</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: 89.1891891891892%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAACXBIWXMAAAsTAAALEwEAmpwYAAACZElEQVQ4y52Ua07iUBiGuwJ/MIq0hV5PL7SUAqKUgMGYEQozcRPCmLALl6JxG/50KSDBC6iJCYmZd75TzEQnjsN4krenafo9+e7C/f09np+fsTw/8dmzWCzAWQJ/XF9fYzwek0bL+4rrKtFkMllJt7e3eHh4gPD4+IjjH8eoVyPsH8Ro7X/FXrOFvd0mWs0GarUaajs7iXbeURRFCIIAJycneHp6gsDpvbgHWzZhewGcYgW2ZsPVVfhMh0133tShqwpEUUQmk3kjSZKwtraGo6MjzOdzCOPRCN1v3yGpJgrlKorbdbieDycoISiVsFUuwDR0qKr6rnRdx8bGBgaDAe7u7ghIOWt3YuSyWcTNCI1qBY1KCN0wwSwGk7zLKQpyuVwi5eWd31yapmF9fR39fv8VsN2GuJlGPfSx5TuoFlwUXSuR8gb0FvYBsANZzKBRLhIsjzDvoFb04DATBhn8CfkQeEXAA/JQkUS0oy20qiF2K0UEro2y56DgWMi+Aq7kYSeOIWY2UfZd+Db7LUmWIZN4flfO4YiAvW6PQiZDVYei6WDMSH40TBOabUGj4qjG8ttKHnKgpTBUShG8sIxCmCco5c80oLsOjIJHYDup/GohdzpIfUnBsizY29SLey2EpRAGc6jKFOKrsFdqm5hymE6nE48MPw+7UoJFnmkUvkLN+7cKv59DPindbjJG/IcsLwSNkyzJyJJX/xK3SaVSyegt24Y2yuHhYTKnJhXBoOT/jxhjie1wOFwC+XK4uLjA2dkZTk9PP6Xz83NcXl7i5uYGwmw2w3Q6fdmHnxOPku9Uvm1+ATB5/BDWHgGLAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"9\"\n        title=\"9\"\n        src=\"/static/d138612c7cedf0c223b4a02a74745b5d/fcda8/9.png\"\n        srcset=\"/static/d138612c7cedf0c223b4a02a74745b5d/12f09/9.png 148w,\n/static/d138612c7cedf0c223b4a02a74745b5d/e4a3f/9.png 295w,\n/static/d138612c7cedf0c223b4a02a74745b5d/fcda8/9.png 590w,\n/static/d138612c7cedf0c223b4a02a74745b5d/efc66/9.png 885w,\n/static/d138612c7cedf0c223b4a02a74745b5d/c83ae/9.png 1180w,\n/static/d138612c7cedf0c223b4a02a74745b5d/78612/9.png 1260w\"\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\">header</code>, <code class=\"language-text\">main</code>, <code class=\"language-text\">footer</code> 구성하면 안정적입니다.</p>\n<ol>\n<li><code class=\"language-text\">App.tsx</code>에서 Header, Main, Footer 랜더</li>\n<li><code class=\"language-text\">styled-components</code> 모듈를 사용하여 스타일 적용</li>\n</ol>\n<br />\n<p><strong>결과</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: 42.567567567567565%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAo0lEQVQoz62RQQqDMBBF5/73Sond2QMkbqouKhoRQxT9dQKGVqKB0g+PCczMCyGESNZ19VUphZsQyLI7rLVfvbPQlVBr7YVSSozj+Lvwc3EYhnBOybyQh2JwlmVBURRo2zYIUxD+HHLO4cg0TaHO8+yJzcUgfk6MruvQNC+U5RN1XeNs7gjx4hFu9H2Pqqogtl/O8weMMeGiK+issS+ziEmJdt4hv7t+N8IJrwAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"10\"\n        title=\"10\"\n        src=\"/static/ebadd0e75967d1d9c420f3a63f8447c8/fcda8/10.png\"\n        srcset=\"/static/ebadd0e75967d1d9c420f3a63f8447c8/12f09/10.png 148w,\n/static/ebadd0e75967d1d9c420f3a63f8447c8/e4a3f/10.png 295w,\n/static/ebadd0e75967d1d9c420f3a63f8447c8/fcda8/10.png 590w,\n/static/ebadd0e75967d1d9c420f3a63f8447c8/efc66/10.png 885w,\n/static/ebadd0e75967d1d9c420f3a63f8447c8/105d8/10.png 1170w\"\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=\"/84884d4d70ed594f8da917371a5fa6bb/11.gif\">\n<br /></p>\n<p>다소 미흡하다만 잘 보고 따라하셨다면 자신만의 페이지를 만들었다고 생각합니다.</p>\n<p>또한 <a href=\"https://zeit.co\">ZEIT</a> 말고도 다른 호스팅 서비스와 비교해보는것도 좋을거같습니다.</p>\n<p>출처에는 관련 링크가 있으니 참고하면서 자신만의 페이지를 만들어보시기 바랍니다.</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<br />\n<blockquote>\n<p>출처</p>\n<p><a href=\"https://kyungmin-resume.now.sh/\" target=\"_blank\">Resume | 경민</a> <br />\n<a href=\"https://github.com/ljlm0402/resume\" target=\"_blank\">GitHub > resume</a></p>\n</blockquote>\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":" 이력서 홈페이지 💎 ▻ 3탄 ","date":"September 19, 2019"}}},"pageContext":{"slug":"/project/resume/3/","previous":{"fields":{"slug":"/project/resume/2/"},"frontmatter":{"title":" 이력서 홈페이지 💎 ▻ 2탄 ","category":"Project"}},"next":{"fields":{"slug":"/experience/secuprime/1/"},"frontmatter":{"title":" E-MODER KIOSK 💳 ▻ 1탄 ","category":"Experience"}}}},"staticQueryHashes":["3128451518","3956431471"]}