{"componentChunkName":"component---src-templates-blog-post-js","path":"/etc/vscode/","result":{"data":{"site":{"siteMetadata":{"title":"아구몬","author":"[AGUMON]","siteUrl":"https://ljlm0402.netlify.com","comment":{"disqusShortName":"","utterances":"ljlm0402/tech-blog"},"sponsor":{"buyMeACoffeeId":""}}},"markdownRemark":{"id":"3e0bb2b6-222d-533b-ae4f-d0415f61aec2","excerpt":"💎 목차 서론 (Introduction) 본론 (Main) 결론 (Conclusion) 🌱 서론 안녕하세요~ 👋 오늘의 주제는 제가 즐겨쓰는 에디터 VS Code EXTENSIONS에 대해 알아보겠습니다. 개발에 용이한 패키지들을 제공하는데요 제가 사용하는 EXTENSIONS 위주로 설명하겠습니다. 😝 참고, 저는 ,  중점 언어로 개발합니다. ⬆ 목차 🌹 본론  현재 사용하고 있는 EXTENSIONS는 다음과 같습니다. 이제 차근차근 하나씩 살펴 보겠습니다. ▸ Bracket Pair…","html":"<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 313px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 51.35135135135135%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAIAAAA7N+mxAAAACXBIWXMAAAsTAAALEwEAmpwYAAABIUlEQVQoz2MwNy4nGzEgcyxNKyxMyNJsZlSuoZJrYlAK45YZ65fCGCUWJhVAo+F2IDQDOUAV5iblUydv9/FsMzUstTKrtDav8nRttjQFMfy82oz0ig11isBOqzDULYJqBip1tK1bvPDAyuVHnj19W1QwH2hQecnimsplne3rbS2rSwoXRoX3x0ZNDA/prSxdXFwwPzKsD+hMhOaliw+uXnXs6ZO35aWLlGQzuzrWFxcsaGteGxHaV16yKD15OlBkzqzdE/u3AK2ZPHEr0CMozrYwrZgxfaefd7uBTpGDTa2ddY2vZxvQkY52dQG+He7OjUA7PN2anR3qnezqQN7EEmD6pUANZoZlpoZlEOOBDCO9EmDgQURMDUrhgUqlqCIDAQA0Zcua9d1SWQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"logo\"\n        title=\"logo\"\n        src=\"/static/0591bdbbf895e2afff6323999195ecc6/80977/logo.png\"\n        srcset=\"/static/0591bdbbf895e2afff6323999195ecc6/12f09/logo.png 148w,\n/static/0591bdbbf895e2afff6323999195ecc6/e4a3f/logo.png 295w,\n/static/0591bdbbf895e2afff6323999195ecc6/80977/logo.png 313w\"\n        sizes=\"(max-width: 313px) 100vw, 313px\"\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>MS에서 제공하는 <strong style=\"color:#302D6C; 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>오늘의 주제는 제가 즐겨쓰는 에디터 <strong>VS Code</strong> EXTENSIONS에 대해 알아보겠습니다.</p>\n<p>개발에 용이한 패키지들을 제공하는데요</p>\n<p>제가 사용하는 EXTENSIONS 위주로 설명하겠습니다. 😝</p>\n<p>참고, 저는 <code class=\"language-text\">JavaScript</code>, <code class=\"language-text\">TypeScript</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<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 387px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 231.75675675675674%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,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'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"1\"\n        title=\"1\"\n        src=\"/static/8c46d48d473f305a7c2b69c8bcf75e09/691c3/1.png\"\n        srcset=\"/static/8c46d48d473f305a7c2b69c8bcf75e09/12f09/1.png 148w,\n/static/8c46d48d473f305a7c2b69c8bcf75e09/e4a3f/1.png 295w,\n/static/8c46d48d473f305a7c2b69c8bcf75e09/691c3/1.png 387w\"\n        sizes=\"(max-width: 387px) 100vw, 387px\"\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<br />\n<p>현재 사용하고 있는 EXTENSIONS는 다음과 같습니다.</p>\n<p>이제 차근차근 하나씩 살펴 보겠습니다.</p>\n<h3 id=\"▸-bracket-pair-colorizer\" style=\"position:relative;\"><a href=\"#%E2%96%B8-bracket-pair-colorizer\" aria-label=\"▸ bracket pair colorizer 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>▸ Bracket Pair Colorizer</strong></h3>\n<p><a href=\"https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer\" target=\"_blank\">VSC Extension Link</a></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: 20.945945945945947%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA7klEQVQY0z2PXW+CMBRA+R+KmoVFKC2wQluLqPtSY0KiaEz2J7b//3ZWSbaHk5v7cu65kZQKbTV3L8hTQbfpGK5XhuFK3/ecTqeRy2XgeNhTlYrWGUzT0DQm0GCtpSxLptMpkQuSe2/5Ple8iBylJK9Bevx8R4kUXVW0bYuxjlommHzBulig0gS38njvSZIErTVFURBts4yfr5quNVShdlloVocz9e6AC3O1fQs1NcYYrHOjwPt23B9Vs9mMOI7H+SAqM8G6yslDSS4ynpRB7m/Eeof4uPFcWkS6RIT6LByXUoYvFPP5nMlk8i/84xfWjX+NtVuejwAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"2\"\n        title=\"2\"\n        src=\"/static/dc1216267e4bb9da680483a3f88e9318/fcda8/2.png\"\n        srcset=\"/static/dc1216267e4bb9da680483a3f88e9318/12f09/2.png 148w,\n/static/dc1216267e4bb9da680483a3f88e9318/e4a3f/2.png 295w,\n/static/dc1216267e4bb9da680483a3f88e9318/fcda8/2.png 590w,\n/static/dc1216267e4bb9da680483a3f88e9318/74866/2.png 668w\"\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<br />\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: 45.27027027027027%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsTAAALEwEAmpwYAAABZUlEQVQoz43R3U7aYBzH8V4BGSEuWd+e1kFbStVFY1w2DXq0K7GEuBtgXoZQdjV4I4D1AEICGW8Ch1/7PJodIeHg2/bk/8kvqTafz1m+vLBer1llrf+3YrXav+VyibS0xWLBaDTiqdcl7ffodXt0u336TynPaUq6Z9KQlrbZbGj8uccMTokuqlxe/+Tm+pyzbyU838P3fYIs/4PCMETXdRqNBtLSZrMZtVrMJ6NI6ccvTq+qfD+u4LsWwaFAmKY6MAxja7Ztk8vliOMYaWnT6TQDaxifv+BFJzjCIXBsysWvHHlFXEeoIyHE1lzXpVAoKENaCozjWw50mygqEx4dUyyfYJkWerbOsqydOY5DPp9XCxX4L3v8vqtjCpMwCgnCCl45ypaKD1dtW1iv19/AyWTC42OHv+2E5kOTZvNB1Wq1SLJaO0qSRNVut+l0OkhL/ZTxeMxwOGQwGDBQ7/fvPZO30pDWK7UAxku9SAUEAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"3\"\n        title=\"3\"\n        src=\"/static/968823d684873a9c3fefecaee06d6d99/fcda8/3.png\"\n        srcset=\"/static/968823d684873a9c3fefecaee06d6d99/12f09/3.png 148w,\n/static/968823d684873a9c3fefecaee06d6d99/e4a3f/3.png 295w,\n/static/968823d684873a9c3fefecaee06d6d99/fcda8/3.png 590w,\n/static/968823d684873a9c3fefecaee06d6d99/efc66/3.png 885w,\n/static/968823d684873a9c3fefecaee06d6d99/c83ae/3.png 1180w,\n/static/968823d684873a9c3fefecaee06d6d99/21b4d/3.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></p>\n<br />\n<p><code class=\"language-text\">function</code> 괄호는 노란색</p>\n<p><code class=\"language-text\">object</code> 선언은 분홍색으로 색상을</p>\n<p>나뉘어 구별하기 쉽습니다.</p>\n<p>기본적으로 <code class=\"language-text\">()</code> <code class=\"language-text\">{}</code> <code class=\"language-text\">[]</code> 를 제공하고 있습니다.</p>\n<br />\n<hr />\n<h3 id=\"▸-css-peek\" style=\"position:relative;\"><a href=\"#%E2%96%B8-css-peek\" aria-label=\"▸ css peek 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>▸ CSS Peek</strong></h3>\n<p><a href=\"https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek\" target=\"_blank\">VSC Extension Link</a></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: 14.864864864864865%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAADCAYAAACTWi8uAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAo0lEQVQI122OQQ6CMBREuQeUFEhEabG0iLRCNaIU4f73GWsTV7p4eT+ZSeZHbt0wWAslJdZlwWO6QzYNlFIQ3q1g2OUpEkKQZRmIdxzHf0mSBBFJKfRZY5od7ORwm1/oeg1jDHrt3XIMncBRCFg/LP1wXdfgnAd/b+HzsiwRjfYKNz9RnS4oxxV7u6FqDThjoSwaiUPFQCkNfL7M8/yHoihC9gamWluLrhbVJgAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"4\"\n        title=\"4\"\n        src=\"/static/8e465a10d1529c6712d299857eacb443/fcda8/4.png\"\n        srcset=\"/static/8e465a10d1529c6712d299857eacb443/12f09/4.png 148w,\n/static/8e465a10d1529c6712d299857eacb443/e4a3f/4.png 295w,\n/static/8e465a10d1529c6712d299857eacb443/fcda8/4.png 590w,\n/static/8e465a10d1529c6712d299857eacb443/efc66/4.png 885w,\n/static/8e465a10d1529c6712d299857eacb443/36c33/4.png 946w\"\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<br />\n<p>클래스와 아이디에 한하여 CSS, SCSS 코드를 살펴볼수 있다.</p>\n<p><img src=\"/7e6a689230500450f5123b78d0fb6410/5.gif\"></p>\n<br />\n<p><code class=\"language-text\">css</code> 연동 후 클래스네임을 비춰보면 <code class=\"language-text\">style</code>을 확인할 수 있다.</p>\n<br />\n<hr />\n<h3 id=\"▸-docker\" style=\"position:relative;\"><a href=\"#%E2%96%B8-docker\" aria-label=\"▸ docker 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>▸ Docker</strong></h3>\n<p><a href=\"https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker\" target=\"_blank\">VSC Extension Link</a></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: 19.594594594594593%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA/UlEQVQY0yWOy07CQABF+xkKtBTa0nY6nWmHPuUhKESNEoPBDbp250/448cRFyc3uYtzr+PHGVePJwbdHUmacno78rDfkWeC9WpF23Y0OqEtIg5ywkbnSKUJggCZ54x9n9FodMF1XZxAzRl+/+C+fBDHMfvNmmXfUuQZy8WCqqoxMqJTUyoR0FQVfd8jpaSpa9IkIbTyKIoIwxBnpgy3n1+Y+ycm9m35fCbbvtIdzpi6pZrPqZuWpusxVv43Gs9mpEJYMjIrFplEKYWwneN5Hv40wBv7NqeU/Qrd3JBXHaUxGEtRFP+p9eWZVjmJKom2R5LdiWT/zjASDAfX/AJ4G31sGestCQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"6\"\n        title=\"6\"\n        src=\"/static/42180c3415558a783379995492b8fd31/fcda8/6.png\"\n        srcset=\"/static/42180c3415558a783379995492b8fd31/12f09/6.png 148w,\n/static/42180c3415558a783379995492b8fd31/e4a3f/6.png 295w,\n/static/42180c3415558a783379995492b8fd31/fcda8/6.png 590w,\n/static/42180c3415558a783379995492b8fd31/97655/6.png 819w\"\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<br />\n<p>컨테이너화 된 응용프로그램을 빌드, 관리, 배포를 쉽게 할 수 있다.</p>\n<p><img src=\"/bb521496c25d90781c0385b1fb9f6ad1/7.gif\"></p>\n<br />\n<p>플랫폼 엔진을 선택하면 자동으로 <code class=\"language-text\">Dockerfile</code>, <code class=\"language-text\">docker-compose.yml</code> 생성</p>\n<br />\n<hr />\n<h3 id=\"▸-gitlens---git-supercharged\" style=\"position:relative;\"><a href=\"#%E2%96%B8-gitlens---git-supercharged\" aria-label=\"▸ gitlens   git supercharged 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>▸ GitLens - Git supercharged</strong></h3>\n<p><a href=\"https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens\" target=\"_blank\">VSC Extension Link</a></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: 21.62162162162162%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAAsTAAALEwEAmpwYAAABC0lEQVQY0yWPS07CUBiFuwQTTCiUigk03vZeKL19UEpbihaJKSGAwYW4CHXiRlyPA1fi9LPBwZ9zzuA8fsPqdsmcinx2ot/rUdc1h8ORPC9IkoSmadjv9zxuNpyPO3bbNf5EMp/PCYIA27YZDodYlnU5w+xI3l6/+fn8pTQrJtqlrtqCRcpUScrVirJcMZ0oskBQhALtKxZZRpqmaK3JsiVKKTzPw7geucj3L17yD8ZXI9R6i1+fmNZHguqJKNREcXwxRnFCoEOE6+I4DkIIpPRwW62kbLnEuBn0sa0BHbNPzzLx0wJd1PjLe3RWEuqAuA0Mw7DFqH1z9h/QLrpzJeO8QTw8I+ozt1HFH+gigrBfVvLYAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"8\"\n        title=\"8\"\n        src=\"/static/a4dcf1a9d26dd7440485c0d69e37b0f6/fcda8/8.png\"\n        srcset=\"/static/a4dcf1a9d26dd7440485c0d69e37b0f6/12f09/8.png 148w,\n/static/a4dcf1a9d26dd7440485c0d69e37b0f6/e4a3f/8.png 295w,\n/static/a4dcf1a9d26dd7440485c0d69e37b0f6/fcda8/8.png 590w,\n/static/a4dcf1a9d26dd7440485c0d69e37b0f6/c8e86/8.png 758w\"\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<br />\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: 44.5945945945946%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsTAAALEwEAmpwYAAABQ0lEQVQoz42SyXLCMBBE/R/WvuKSsSm8QAJUrvn/H+q0HMo3Qg5dY5WlVr8ZNSEESCmhlHqp+t9oA+0zlIuoZ2KMVHoqIqUE5xya4D1EK3hIPSUhnyZSir1665DPD0xf37jfbjifJ6zrBcuyYp4XXK8fKKWnYT7AWANnFYwSsJpVtlsyTZMqYyysj/DdiNKPCOkA7zy8D7sc11VNOa3ol09Ml5m3LpiHEcvlimG+I5cTEnXoWCNxradxgCVaxa6InoT121rLiw2azI3m0MO43821RzrwMFOJtoWsEu2GrfYWvFaTQoKPAfdH7UmPfpqZ6ghrNPtmWM2WTHMo74ZX1UQaWi1QTiMxJwxDh9JlZE7tGD1yoFkq7LH7n2FFthzINDHdckPojhuiEAKtkBAVZUOW+xP603AohTgCuqL94z2+S/gDbPv88DLaF6YAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"9\"\n        title=\"9\"\n        src=\"/static/7d8566d3156c86ac7120b84069d8a53e/fcda8/9.png\"\n        srcset=\"/static/7d8566d3156c86ac7120b84069d8a53e/12f09/9.png 148w,\n/static/7d8566d3156c86ac7120b84069d8a53e/e4a3f/9.png 295w,\n/static/7d8566d3156c86ac7120b84069d8a53e/fcda8/9.png 590w,\n/static/7d8566d3156c86ac7120b84069d8a53e/f96df/9.png 849w\"\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<br />\n<ul>\n<li><code class=\"language-text\">ljlm0402</code> 아이디</li>\n<li><code class=\"language-text\">4 days ago</code> 일자</li>\n<li><code class=\"language-text\">first commit</code> 메시지</li>\n</ul>\n<p>커밋에 관련한 정보를 볼수 있다.</p>\n<br />\n<hr />\n<h3 id=\"▸-import-cost\" style=\"position:relative;\"><a href=\"#%E2%96%B8-import-cost\" aria-label=\"▸ import cost 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>▸ Import Cost</strong></h3>\n<p><a href=\"https://marketplace.visualstudio.com/items?itemname=wix.vscode-import-cost\" target=\"_blank\">VSC Extension Link</a></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: 526px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 27.7027027027027%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsTAAALEwEAmpwYAAABmElEQVQY00WQTWsTURSG518EIpnYmSQ2k/lI5s4kk5lkErJwk2RhNoFAFilYURcu3JeiG3+D4EpLXVQoBSmCOy2C2IUfGCmI2JZ0YV24cft452688HLPOXDf9zxXu/z9h4+flrw5OiY7L/b2CMOQxWLBfD5nPB4zmUyYTqf4vk+SdGgnqVSXuNOVfaJULBbJ5XJomcnq4pLlt5/K8PWrQ/lQMJvNGI1G9Pt9hsOhMnVdF7/uEAcukW/TEh6u5yGEj2VZVCoVtK/LU07PVqzOL3j5/S8PHj+n4dRox7FKtR1H1b1ej5rtUDULdJ08SS1PaOlcNUw8aToYDEjTFO3s/BcnJz/4cPyFjSfvuX73EQ17nShq02qGStkGTfkNQRCQSMxWu4MII7y6L2dCIZum+R/56N1n9g/eKuTDg32uNFLS2w+xJndYG0yJb27h3tiUeHUZ0JRhLRUSCCHriFgSZGG6rqPt7Oyyees+i417PH22y/b2Fnl9jXVPYFRdiuUq11wfs2pjGAalUkkp2yi7y+WyUtYXCgX+Afg/9HJK8pN2AAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"10\"\n        title=\"10\"\n        src=\"/static/61cde8b3f8fae3e231c633c41fe1c06a/2d7ab/10.png\"\n        srcset=\"/static/61cde8b3f8fae3e231c633c41fe1c06a/12f09/10.png 148w,\n/static/61cde8b3f8fae3e231c633c41fe1c06a/e4a3f/10.png 295w,\n/static/61cde8b3f8fae3e231c633c41fe1c06a/2d7ab/10.png 526w\"\n        sizes=\"(max-width: 526px) 100vw, 526px\"\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<br />\n<p>패키지의 크기를 인라인으로 표시합니다.</p>\n<p><img src=\"/2db7c8e03f575e26584b54a5c2ccace6/11.gif\"></p>\n<br />\n<p>패키지 크기를 표시하여 효율적인 <code class=\"language-text\">import</code> 혹은 <code class=\"language-text\">require</code>를 한다.</p>\n<br />\n<hr />\n<h3 id=\"▸-indenticator\" style=\"position:relative;\"><a href=\"#%E2%96%B8-indenticator\" aria-label=\"▸ indenticator 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>▸ Indenticator</strong></h3>\n<p><a href=\"https://marketplace.visualstudio.com/items?itemname=sirtori.indenticator\" target=\"_blank\">VSC Extension Link</a></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: 534px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 26.351351351351354%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAAAsTAAALEwEAmpwYAAABK0lEQVQY0z2QzU7CQBRGeQtjW0pbmDoznWkrFFqkRlA2xL+gC0mMujTRnb5/jsMsXHy5m3tvzvkG6SjFKkupS6qiQmQCpRSHw8Fnv9/7udvtqOuai9XKpWfVX9J2S0ZJQhAEhGFIFEUMhsMhpSmx0jKrGkQqEEJw//Doj4y1XK3XrDcblDaYScSFPmVlQpYmZpIlNM2cruswxjCYiAlt2/Lx8s7v1w9Pd8+kyYi+bWinlaOWmDO300yZzRoqa2jn5xgliIITRxaQ5zmF1h5kcMQtZEHj6LrZEi0kQ6FZv36zeHjDbJ/pXz45v75lMW/+dafuubGlr0FK6bW98jgdo3Llu8vHOVmcEI3P0JtHsm5LWPcUN3uyeknubKRUnuj4xDpa6yrRji6OY58/O+mcswCM1XEAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"12\"\n        title=\"12\"\n        src=\"/static/80b5df6e86de9766bdad4f3872468134/a07a7/12.png\"\n        srcset=\"/static/80b5df6e86de9766bdad4f3872468134/12f09/12.png 148w,\n/static/80b5df6e86de9766bdad4f3872468134/e4a3f/12.png 295w,\n/static/80b5df6e86de9766bdad4f3872468134/a07a7/12.png 534w\"\n        sizes=\"(max-width: 534px) 100vw, 534px\"\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<br />\n<p>들여 쓰기 깊이를 시각적으로 강조 표시 합니다.</p>\n<p><img src=\"/658dde14f675f8f981852e5c40064702/13.gif\"></p>\n<br />\n<p>시각적인 표시로 코드를 이쁘게 작성하고 읽기도 편리하다.</p>\n<br />\n<hr />\n<h3 id=\"▸-live-server\" style=\"position:relative;\"><a href=\"#%E2%96%B8-live-server\" aria-label=\"▸ live server 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>▸ Live Server</strong></h3>\n<p><a href=\"https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer\" target=\"_blank\">VSC Extension Link</a></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: 18.243243243243242%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA90lEQVQY0x2P206DUBBF+QqjkUsxwgHKnQOHA01jatO0Pthb1ER90/j/f7Dk8DDZeyaZPbMs4UVI0dKnmrptOJ8vHI8n9ocDbdvSdR291si6pK9isuAesbjF9RaIMMT3fVzXJQgCHMfB2tztuTx8cB3fyIqU/W7HdrNBdS1lkdP3agocyBNBl/qoxKGOHOJkyWocKcuScArW01ETar3evPPt/PC5/iJIYlZPz9RqYJxU6RGlFOO0KGUze6W6ucznpjcUUkqGYZhn1sL3EEHE8jHGqybs6x+ufqE4/RLpLXm6JC8KsiyjqiqapkEIgW3bcxlMg2y80X+nv36yTUyYgwAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"14\"\n        title=\"14\"\n        src=\"/static/47faa360d3f2f54812796c11e0a19417/fcda8/14.png\"\n        srcset=\"/static/47faa360d3f2f54812796c11e0a19417/12f09/14.png 148w,\n/static/47faa360d3f2f54812796c11e0a19417/e4a3f/14.png 295w,\n/static/47faa360d3f2f54812796c11e0a19417/fcda8/14.png 590w,\n/static/47faa360d3f2f54812796c11e0a19417/3d4b6/14.png 712w\"\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<br />\n<p>정적 및 동적 페이지를 위한 라이브 리로드 기능을 갖춘 개발 로컬 서버 서비스</p>\n<p><img src=\"/09f614ddd02873edfd78025fda181bdc/15.gif\"></p>\n<br />\n<p>정적 페이지를 라이브 로드로 실시간 업데이트가 편리하다.</p>\n<br />\n<hr />\n<h3 id=\"▸-material-icon-theme-vs-vscode-icons\" style=\"position:relative;\"><a href=\"#%E2%96%B8-material-icon-theme-vs-vscode-icons\" aria-label=\"▸ material icon theme vs vscode icons 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>▸ Material Icon Theme VS vscode-icons</strong></h3>\n<p>두가지의 폴더 및 파일 디자인 테마를 소개합니다.</p>\n<p>저는 <code class=\"language-text\">Meterial Icon Theme</code>를 사용하고 있지만</p>\n<p>많은 분들은 <code class=\"language-text\">vscode-icons</code>를 사용하고 있습니다.</p>\n<p>각각에 대하여 소개하겠습니다.</p>\n<br />\n<h4 id=\"▸-material-icon-theme\" style=\"position:relative;\"><a href=\"#%E2%96%B8-material-icon-theme\" aria-label=\"▸ material icon theme 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>▸ Material Icon Theme</strong></h4>\n<p><a href=\"https://marketplace.visualstudio.com/items?itemname=pkief.material-icon-theme\" target=\"_blank\">VSC Extension Link</a></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: 22.2972972972973%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAAsTAAALEwEAmpwYAAABDklEQVQY0z3QvUrDYBTG8XeS4qiCS5sGG2iqtEn6vibkoza1KQ0kMX4sgoLgTQjiWhW9FJ3Fe3BycHUSb+NvksHhNx14znOO2DY9xPQWEd+x2ffwXcnJ6RlZnpOmKfMkIakURYHvB0gpcT2PfddFKdXQdZ1Op9MQ68WK5/dvbl6+WMtWWJZFmWcs5oeMbQtXSWbTCWEQ4Jg6ymwTDdsMDI2xVERRiGEY2LbdEK3yidePH94+f2mVj/SHDl68QE2qwDDGckMc/wAZVKJZ1czD6PWaNt1u95+maQ2xNZwhlveI9IGNvRjDUjjH14yyS3aX5wziEju7YCfKGR9dYdbzqvmouqS+pn6B4zhNaL3kDzV5h9DjMNpaAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"16\"\n        title=\"16\"\n        src=\"/static/e1f0d315de082bd35f950e27c15ec206/fcda8/16.png\"\n        srcset=\"/static/e1f0d315de082bd35f950e27c15ec206/12f09/16.png 148w,\n/static/e1f0d315de082bd35f950e27c15ec206/e4a3f/16.png 295w,\n/static/e1f0d315de082bd35f950e27c15ec206/fcda8/16.png 590w,\n/static/e1f0d315de082bd35f950e27c15ec206/ace37/16.png 666w\"\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<br />\n<p><strong>File icons</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: 245.27027027027026%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,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'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"17\"\n        title=\"17\"\n        src=\"/static/fae86ebba4008f641d367b296a1fcd74/fcda8/17.png\"\n        srcset=\"/static/fae86ebba4008f641d367b296a1fcd74/12f09/17.png 148w,\n/static/fae86ebba4008f641d367b296a1fcd74/e4a3f/17.png 295w,\n/static/fae86ebba4008f641d367b296a1fcd74/fcda8/17.png 590w,\n/static/fae86ebba4008f641d367b296a1fcd74/efc66/17.png 885w,\n/static/fae86ebba4008f641d367b296a1fcd74/78797/17.png 1125w\"\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<br />\n<p><strong>Folder icons</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: 125%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAZCAYAAAAxFw7TAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEMUlEQVQ4y0VV2WLjOAzLb0ycxolP3Ydl5+w00939/1/igrTTeZQlgiQA0ru4OAopUNd2VB0OdNEjRe+obVs6VAcaoyYXPDVNI/dXZSj5QMZa+vg4ktIdebxXSuH8QbsyO4rR0zAMVAHgt+sRYKnr+VyRmUcAWmrOK+DTKNx78iEIgAOQd4601ivgoiJFF5BJCcDXo6Mpc4JRziWPFAB4ZkAkTHOHAgCgtNwnu5CzHvfnFXAqFgFubYkBo6EpBgE4HCpy4x0Bger6KIDz01AuicZxlHO+9Ghf0fF4XAG/uWVnhI8DWvo2gTI4+qhrOTfpQi4mareEZgrgPNIJ9wz4596hC0+n01ZhYT4sKoQIElBuZAHYoIW1ArSMFt8c3tyI94aOkhAcgnPusOt6KWB3R7bgOcMJqlZU5wcpcFIf14qHciELAd4VunSFIJEUWt4j4WM6kzMjEpzWCp82UoIoTdusNimOPFQfN1E8ALWx0iJz2k4vMj4iwVkqftkB8bhHBwL4uVhKKLlGBq7IZ0cpb6Tj/HVTNCUkGJVQ4JAsoqtVlIq0v6Hi9FdlGzM5v7bEgIErRAJjrDy4L1mM+054Tok0fCcUoeJzmlDxyrkAqlAE0BgjAS+nycOkTDhTcJtbMnqgA1zwAYBjuZMBhyIa3jtvIIyTwRBROLsxWnzEH+a7RkteRpEraOY7RIk/HThYhEdRRnO/p+PtQSMA67cPh+kGVR04WFuqIoyMNtS4jt44vyjmmSysUiFB9oVSytusV9SnL4iYUTHiGfA3FkMOQUjlBw8IEgNPRi0tHuKTFFxwwqTwfVueqDhJAdX+F/2KnxAmSQFSoc5XMs5vtoBtAiYDthiGXiqcLppGNayjxaIsVwCgbWybAUpfsCwiWu7fHDZlAcnhh+QRAllnpWIGfN4V2lU/o5n1lYKLYp2maWmee7jArB2JbS43cJRlBbGyhX2GBKcN8DsZfNvOAPw0fI40lSJW+l5ameX6PcvLA5yBR5aePywaPrR24/RAcdYITmKr/b6iyx2TAQAPmmQ/5igLuT5tozdwy5sx2SYnV+Rs9LrvhjBBxSiAfL5dvCyDtoOtqj3V5UW9tiKaADoOAACv8D0C/sNKTwju+l5G7XU9UU7Y4N0gKh9hMzZ297YNfMoFvG23a8sn5rdgAwMQRl1ANvPJJHOAKzMWapHZ5YAlDkgQZd19IOEe21yBIo7nmN394WmaovwTZLtY/RPA5wgLJSzYvuvE2P+6TBn8HcWnB/gwiEtYSLbWzqBlpc2PD63O8o94/+XKkCngrLafkMZGt7yQm7O87zG2Dr5kyqTlYZplQ4/bqLV5+Tu7OHcLj2KWJcy2ei4DqrHiQRalmZ4U8iTxAuiWJ2m7bWx8uKtABQADHrBN2NgFlPD8MuA/DyV/xXOzitLhn8OADsPAs/w/rfXX2A4xJk0AAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"18\"\n        title=\"18\"\n        src=\"/static/5332316d696460439f6f3e7c86861693/fcda8/18.png\"\n        srcset=\"/static/5332316d696460439f6f3e7c86861693/12f09/18.png 148w,\n/static/5332316d696460439f6f3e7c86861693/e4a3f/18.png 295w,\n/static/5332316d696460439f6f3e7c86861693/fcda8/18.png 590w,\n/static/5332316d696460439f6f3e7c86861693/efc66/18.png 885w,\n/static/5332316d696460439f6f3e7c86861693/78797/18.png 1125w\"\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<br />\n<h4 id=\"▸-vscode-icons\" style=\"position:relative;\"><a href=\"#%E2%96%B8-vscode-icons\" aria-label=\"▸ vscode icons 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>▸ vscode-icons</strong></h4>\n<p><a href=\"https://marketplace.visualstudio.com/items?itemname=vscode-icons-team.vscode-icons\" target=\"_blank\">VSC Extension Link</a></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: 19.594594594594593%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA4klEQVQY002OSW6DQBBFuUK2ppvRYAY13RaDcUCJosACMiwisYmU4+QAOfGL1RnkxdMvfVX9X44+3XJ8eMZTNeZo2LaNdV1ZloV5ntFa0/c9wzDQti2nxjB2hvIQEgQBSZJYjaLI4lSPr4j3T+JhplKKp2W1QdM0WcqypK5rxnGkqip0FtCrEJMKsuxgS9I0pSgK1OXeUdMbNx9f7O9eyFROd3/GGEPTNHY5z3M8z7Ptvu/jSZfAEz9cfRiGIXEc42TKULUdcp8TmoR00ux2O1zXtQghkFL+q7yES/nHlf87fwMXAHnrrkwbHwAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"19\"\n        title=\"19\"\n        src=\"/static/0d2265d16d0c9c3e0d3ac968e482bb3d/fcda8/19.png\"\n        srcset=\"/static/0d2265d16d0c9c3e0d3ac968e482bb3d/12f09/19.png 148w,\n/static/0d2265d16d0c9c3e0d3ac968e482bb3d/e4a3f/19.png 295w,\n/static/0d2265d16d0c9c3e0d3ac968e482bb3d/fcda8/19.png 590w,\n/static/0d2265d16d0c9c3e0d3ac968e482bb3d/cab43/19.png 755w\"\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<br />\n<p><img src=\"/ebdbdbcbb2a81813b90fa5c3b36bdd22/20.gif\"></p>\n<br />\n<p>원하시는 파일, 폴더 아이콘을 보시고</p>\n<p>적용하시면 좋을것 같습니다. 🤣</p>\n<p>또한, 그밖에 <a href=\"https://marketplace.visualstudio.com/search?term=icon%20theme&#x26;target=VSCode&#x26;category=Themes&#x26;sortBy=Relevance\">테마 링크</a>를 통해서 설치도 가능합니다.</p>\n<br />\n<hr />\n<h3 id=\"▸-npm\" style=\"position:relative;\"><a href=\"#%E2%96%B8-npm\" aria-label=\"▸ npm 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>▸ npm</strong></h3>\n<p><a href=\"https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script\" target=\"_blank\">VSC Extension Link</a></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: 20.945945945945947%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAAsTAAALEwEAmpwYAAABBklEQVQY0zWQTU7CUBSFuwOjCZSY0vdaEPtqy09pS58JtAQRjIkOmMjEARtw7sAFOGDgSlyGa3DmSj7blzC4OSe5Oeeecy1pd5CtFp5t47TbVFXFdvtAPBySZRmz2YwsTYkGksB3kFLS7/fNnLgQgm63i+u6WD/vH/wdv/j9PPL9emA8HrEsF8ShYppMjKHveYReB+VfGmEURQzrg71ez6CUAsdxzM56KTRvqzWHcslGhSi9YnS/I17vSO6ejSAIAgbXChVGhjfik0EzTUIhJG6N1kXH5qyufF5XbniU5GSLFZPbkqmek6YZWmvyPKcoCvOGOI7rJmOTNKieCDd7brZ7ruaP/APCvH3yHbpEeQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"21\"\n        title=\"21\"\n        src=\"/static/8a5ced03ce035b93959e7263285dd888/fcda8/21.png\"\n        srcset=\"/static/8a5ced03ce035b93959e7263285dd888/12f09/21.png 148w,\n/static/8a5ced03ce035b93959e7263285dd888/e4a3f/21.png 295w,\n/static/8a5ced03ce035b93959e7263285dd888/fcda8/21.png 590w,\n/static/8a5ced03ce035b93959e7263285dd888/ef3e1/21.png 759w\"\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<br />\n<p><code class=\"language-text\">package.json</code>파일에 정의 된 npm 스크립트를 실행하고,</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: 68.24324324324324%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAIAAACgpqunAAAACXBIWXMAAA7DAAAOwwHHb6hkAAABpElEQVQoz32T246bMBCGeZHdbcDg89kYO8YEgqqq3d27qlXf/0U65DLKRvo00sgz9j//QJOyXrd6zsE6YaycpphzNsZgjPt+eE4jFPZe2aCpwFJh66Q23FguJSEEPafBpEXoldcqt81Hs65pueQxGqVpP3wb8OkJjfPMaJI/3s+fv7b37/vPvZwd50gprDUx5hmNtQwG9Jdc/v3Nf37HH1vZU7mOIUrn4Ijor2kI7TBuuWGsRposnSxbJuY5yNaagrZ++Fo2ZQj6ZbA8RzVqJgZKT5z3jPdCDEfKEPjykIaLAZq1VyJHEb0IBnZmLfdBpux9UELgW2n3oPm4GJ/0nGWdleX7XuY6gWA469Bbh17Q8Aq2P3S+gcU6L6lmbHRMkRBknGyIBpOTMbwupZR8Liml6L29o4mTnGsaR60VpRS13cuN4zUY23ltnQLg41Oa39HMGZV5Wrd5uZS65JQ8pPkcnFfQTGh7i91AHrldc1vmuF0r9EO87st1PyKklxUUjynDRRJ8hep7w4xutWGHw07e/g0OpceSDQ+jVooMpIURHq7qPyvhlFUJCZdNAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"22\"\n        title=\"22\"\n        src=\"/static/ce50d535e6e8ad4101eb6872f766cec6/fcda8/22.png\"\n        srcset=\"/static/ce50d535e6e8ad4101eb6872f766cec6/12f09/22.png 148w,\n/static/ce50d535e6e8ad4101eb6872f766cec6/e4a3f/22.png 295w,\n/static/ce50d535e6e8ad4101eb6872f766cec6/fcda8/22.png 590w,\n/static/ce50d535e6e8ad4101eb6872f766cec6/6e6fb/22.png 618w\"\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<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: 23.64864864864865%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAIAAADKYVtkAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAj0lEQVQY043KSw6CMBRA0e7BoAlONED/4ZOW94qUCoIYY+LQ/S9FVkCanNzRJfh4ly6o1ivwGoYYaisGWiOh868I30OzJGY92VeM7TyaNaknIoZP45+yWxiMKTdnYfelwlyqTrr5Wjpib/cp+A5AMsbyfB/NMi2Eg3YcfKkVqaBHREBHKSsKGoNzaW3LufgDJqA2MpQUd3AAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"23\"\n        title=\"23\"\n        src=\"/static/601eb309d7c60c00c83542bc77bf6c73/fcda8/23.png\"\n        srcset=\"/static/601eb309d7c60c00c83542bc77bf6c73/12f09/23.png 148w,\n/static/601eb309d7c60c00c83542bc77bf6c73/e4a3f/23.png 295w,\n/static/601eb309d7c60c00c83542bc77bf6c73/fcda8/23.png 590w,\n/static/601eb309d7c60c00c83542bc77bf6c73/0a47e/23.png 600w\"\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<br />\n<p>패키지 관리에 편리성을 제공한다.</p>\n<br />\n<hr />\n<h3 id=\"▸-peacock\" style=\"position:relative;\"><a href=\"#%E2%96%B8-peacock\" aria-label=\"▸ peacock 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>▸ Peacock</strong></h3>\n<p><a href=\"https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock\" target=\"_blank\">VSC Extension Link</a></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: 14.18918918918919%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAADCAYAAACTWi8uAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAlklEQVQI122OSwrCMBRFu4eCIwdpsOTT+OmHWKKUEkpxIg50E+5/AUdSEAQ7OHC5cN872aF8kvd35jgSx4G2afDe408apyTOOYwxCCGQUlIUxR+/fSaGN3l4EaeZYbrRhyuXEAid49zsl+N1XaO1pqoqrLUL6Uki5dR/c7aJD7ZCUbYXdn5EHTuMUhibxtVillgzWzP8AE0ZWiDgPtKMAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"35\"\n        title=\"35\"\n        src=\"/static/38bcf38de1546431917653970c22df34/fcda8/35.png\"\n        srcset=\"/static/38bcf38de1546431917653970c22df34/12f09/35.png 148w,\n/static/38bcf38de1546431917653970c22df34/e4a3f/35.png 295w,\n/static/38bcf38de1546431917653970c22df34/fcda8/35.png 590w,\n/static/38bcf38de1546431917653970c22df34/efc66/35.png 885w,\n/static/38bcf38de1546431917653970c22df34/c61d0/35.png 1145w\"\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<br />\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: 55.4054054054054%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAAC4ElEQVQoz1WRu1NTURDGT27uuTHI4AMJeZMACknIA/JCQXkYkkhMjCS5SCBi5YyFhY7gY4ZCCjsLC3ulAYERAoOmYWz8B+wcRy0sLa0cc7mfeyPjaPHNzpyz+9tvd9nblzk8SEdRGA+gOBZCIRlHMRXFVDKGqcwI5KsTkLMjmM4MQb40iGK6IbWYorxkTE3HRtdciTv9nDHWfC3P2IfXFdyPToFNP4Xx5iIM6QLEiSJ4SoaUlmHIlGHI34BhcobeS9AnZehT09BPlFR9ooAjyTwMWfmXcXZuq3X+6jD7tD2Dh5ErYI/ewLazhpOpBLg7AsHhhUjSd/TBGBpBk28IUmcAxq4QKahyt5/+fCqpLth8B5IrAFPg3Dr7slXGcrgAtliFfXsDrslJNNkGwNo8YKd6/8jiBzN5wR39MHZEYXAMQHIOqNwZUiVnCEK7/5fO5EFbd/QF+0zAxxECLlRh2VlFey6No+5BCE6C2ijZHgKzB6GzBsCdYYgUGRWztsNmp3pUZuqtU0SzO7zCPm7OYDkuk8MdWHdfofXiBRjtEeg1kFbY7iVwsOFS1NwRVLD8A9WiydMAtrgHVti3vVl1OVJQ2eI2LNuratsoAW1hMLP3T4EmAurMfeQgAoncclsfuJ0aaKtoQL11DXysd3iFfd8rY6knU2f3qgfWvQ3VND6EZmdU1Vn6/jrQOYIQOgjWGYPgjoN3nYWh+xyaTw/SWxTcFa2LNFGr7/wKe7dZPliKZWjkPVj2q4olMaQYrSGFEhTB7FNoP4ro7FcEV1yhPSp6q1+h8RXuCCrH3UGlxRVUuNX/U6CJWjrDL5i8nwwuZFPPz9ze+WHZXUfLxTE0OeOQOsKHO/TQMehAZtqb2Ueue7RD/K/GJL0acJ3dWkuwUiXPvtqrncUnq89O3q28O1opvDXIl2u8NFnj1y7XxOtXSLnDmK+J8/kan8vVpJlsTSpna3w290aczrw/UZm69xsQCFAobTwFzgAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"36\"\n        title=\"36\"\n        src=\"/static/ac223676ee354d69e5f62fcc9a4a3634/fcda8/36.png\"\n        srcset=\"/static/ac223676ee354d69e5f62fcc9a4a3634/12f09/36.png 148w,\n/static/ac223676ee354d69e5f62fcc9a4a3634/e4a3f/36.png 295w,\n/static/ac223676ee354d69e5f62fcc9a4a3634/fcda8/36.png 590w,\n/static/ac223676ee354d69e5f62fcc9a4a3634/5a190/36.png 800w\"\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<br />\n<p><code class=\"language-text\">CMD + Shift + P &gt; Peacock: Enter a Color</code> 후, 원하시는 색상을 입력하시면 됩니다.</p>\n<br />\n<hr />\n<h3 id=\"▸-polacode\" style=\"position:relative;\"><a href=\"#%E2%96%B8-polacode\" aria-label=\"▸ polacode 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>▸ Polacode</strong></h3>\n<p><a href=\"https://marketplace.visualstudio.com/items?itemName=pnp.polacode\" target=\"_blank\">VSC Extension Link</a></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: 540px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 28.37837837837838%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsTAAALEwEAmpwYAAABVUlEQVQY0z2R22rbQBRF/RXBlnWt6tE9M5pRxpIlx8EufkhDoeCHFkpq6A8U+v+sSLLpw2bOgTPrXPYiimJEKkdVBEGI53kopZBSUhTFHAshSJKELMvI8pxPcYzremOtP9d7vo9/1+Kx6WmPR5rnL5SqJYwi3t6+cr1euVwuvL//pu97rLV0Xcdz3yHLjNBfEwXeHeTdwKMWL6cBYyWq60foeZ60rhXt+NkPAqqqYhgGaq0JAx+bPNDlK4bSQW4cRJJyOp04HA6UZcnidQTqRKC1pd0dSXLFkxS0T4aha7GNwdSS7ThhXWuWyyXr9ZqV47BaOTjjO+X/V97anvN2x4vdY5o9QRiTnn9gf/3D3X+n+PYH/fMvqW7RSs7Q6b6TjBmbmWaOXde9ATdJTlYZilITxZu526bSVNsBP31EKEve7Ig+T8aI2ZjJoDRNbybd8+l+E/ADJ/O3ui9SK84AAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"24\"\n        title=\"24\"\n        src=\"/static/37d83c1b8c9c30919c0f15e13e87a38e/07484/24.png\"\n        srcset=\"/static/37d83c1b8c9c30919c0f15e13e87a38e/12f09/24.png 148w,\n/static/37d83c1b8c9c30919c0f15e13e87a38e/e4a3f/24.png 295w,\n/static/37d83c1b8c9c30919c0f15e13e87a38e/07484/24.png 540w\"\n        sizes=\"(max-width: 540px) 100vw, 540px\"\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<br />\n<p>코드를 폴라로이드 형식의 캡쳐 지원 서비스</p>\n<p><img src=\"/b2f6a95ac83c04379158cbbb131c52fc/25.gif\"></p>\n<br />\n<p><code class=\"language-text\">CMD + Shift + P &gt; Polacode</code> 로 실행, 해당 소스를 드래그하여 캡쳐한다.</p>\n<br />\n<hr />\n<h3 id=\"▸-prettier---code-formatter\" style=\"position:relative;\"><a href=\"#%E2%96%B8-prettier---code-formatter\" aria-label=\"▸ prettier   code formatter 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>▸ Prettier - Code formatter</strong></h3>\n<p><a href=\"https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode\" target=\"_blank\">VSC Extension Link</a></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: 20.945945945945947%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA8UlEQVQY01WP22rCQBRF/YyAGmXMNJLL5KKZNJMYjBe02uIFrIV+Qf//A1Zjig99WHA4bBZ799zcUN0PNLsF1ouirmtun3fWmw2mLDmfz+z3e47Hdy7tXehZR64z5vM5aZoyHo8ZDocdvWLdsLlc+LqecOKULE1YLUpWdUWZZyilMMZQFAXSEQQTCyX7yMkIz/e7v+u6hGFIFEWtcLnj53tLcvjACjIi06Dfbsy2J/Tuis5fqdqmSZIwnU7x/QAhJgwGA+y2kW3b/+iFfkysUiwvoS89hNII3TCKDU62RDgSKf94CD2vzQjRzXsInlOf/AJefn3JMxbMIQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"26\"\n        title=\"26\"\n        src=\"/static/082faa99600c5c1f032b6133db4b56e6/fcda8/26.png\"\n        srcset=\"/static/082faa99600c5c1f032b6133db4b56e6/12f09/26.png 148w,\n/static/082faa99600c5c1f032b6133db4b56e6/e4a3f/26.png 295w,\n/static/082faa99600c5c1f032b6133db4b56e6/fcda8/26.png 590w,\n/static/082faa99600c5c1f032b6133db4b56e6/394f7/26.png 707w\"\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<br />\n<p>일관된 스타일을 적용하는 코드 포맷터입니다.</p>\n<p><strong>before</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: 48.64864864864865%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAABcUlEQVQoz6XQu1LCQBiG4VwCQwEBhICczEkSsoFASQEoegMMco9wF7QmlJTAwFBACpLuc/9EtFDGUYt3/tmdzTO7EU6nE87nM8IwRHApCKJ1SJMX/BCdJYMswfd9rFYruO4rPNeN8zy+dnl8enHL5fJqdJ4MsgSfq5PJC8p1BczpwrTbMM0GHIehxZpomQZY04SiKJBl+WNe0jQNxWIR4/E4vuF2u8XD6BlisQ6VdaCYLdzp9zCdDhi7h21qqJTLyOZyyH1TPp9HMplEv98HWcJ6vcbjaISy2kC764AZKjRVhW5Y0BsG9KaNqqzilqOFQoEnvc84ul0qlcJwOARZEfjEwexNngMN6Dp/Vq0KuVaBWq+iVuGQJEG6UqlU+goOBoPo2plMBum0iLQoQhQ/J+1fi56dSCTQ6/VicLPZYDqdRj/Xtm1YlvWrGGP8VXpkROBut8NiscB8PsdsNvtT9C0ZZAnH4xGHwwH7/f5fkUHWG2vq7F/xauX7AAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"27\"\n        title=\"27\"\n        src=\"/static/9b18751dc21f0e83f2b7c7bdf4a07cf1/fcda8/27.png\"\n        srcset=\"/static/9b18751dc21f0e83f2b7c7bdf4a07cf1/12f09/27.png 148w,\n/static/9b18751dc21f0e83f2b7c7bdf4a07cf1/e4a3f/27.png 295w,\n/static/9b18751dc21f0e83f2b7c7bdf4a07cf1/fcda8/27.png 590w,\n/static/9b18751dc21f0e83f2b7c7bdf4a07cf1/efc66/27.png 885w,\n/static/9b18751dc21f0e83f2b7c7bdf4a07cf1/c83ae/27.png 1180w,\n/static/9b18751dc21f0e83f2b7c7bdf4a07cf1/78612/27.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></p>\n<br />\n<p><strong>after</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: 46.621621621621614%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsTAAALEwEAmpwYAAABh0lEQVQoz52QuW4aURSG5xEQATtiWGZhGDabxY6LKEXyGogK8Ro4luh4AUA8Ck08INGajESJRcMuNgkhQfHlDsiVmSbFp19X557vHB1pt9ux3+85nU4cBScXjsejK079cDiw3W6R1us1w+GQ19c/dDsdOpZFR6Ql0rIu6by73a4rzp/BYICznPT+PqRWq+G5kUlkH0nln4iZJplsmsxdklwqTjJmEAqFkWX5E+FwGI/HQ7lcvmxo23/5/fLCl68h4nc54pkHjESK9MM37rP35IU4ZhjnxmsoioLP56NYLDKbzZD6/TeenysEdZMfv37y/SlDJpkQsjzZXJ507vE8QNOjKJHIJ6Gqqvj9/rNwOp06wj6VSoWAHCKZTpEwDQxNRVcVzKgmGhSCwaArETHE6/VSKBQuQtu2qVar3N7eEHW2EBNVTUMTfKSu664Y4hyBQIBSqXQRjkYjer0erVaLRqNxlXq9fpWPerPZpN1uM5/PkVarFcvl8mwfj8f/xWQyYbFYsNls+AfsQcFHE9s/ywAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"28\"\n        title=\"28\"\n        src=\"/static/8fb24015a70624c5da068d3ae5445091/fcda8/28.png\"\n        srcset=\"/static/8fb24015a70624c5da068d3ae5445091/12f09/28.png 148w,\n/static/8fb24015a70624c5da068d3ae5445091/e4a3f/28.png 295w,\n/static/8fb24015a70624c5da068d3ae5445091/fcda8/28.png 590w,\n/static/8fb24015a70624c5da068d3ae5445091/efc66/28.png 885w,\n/static/8fb24015a70624c5da068d3ae5445091/c83ae/28.png 1180w,\n/static/8fb24015a70624c5da068d3ae5445091/f09ab/28.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></p>\n<br />\n<p>위 처럼 코드를 자동으로 세미콜론 및 정렬을 해줍니다.</p>\n<ol>\n<li><code class=\"language-text\">CMD + Shift + P &gt; Format Document With</code></li>\n<li><code class=\"language-text\">Configure Default Formatter..</code></li>\n<li><code class=\"language-text\">Prettier - code formatter</code></li>\n</ol>\n<p>하면 (default)로 설정된다.</p>\n<p>그러면 <code class=\"language-text\">CMD + K + F</code> 명령어를 통해 자동으로 formatter 적용</p>\n<br />\n<hr />\n<h3 id=\"▸-rest-client\" style=\"position:relative;\"><a href=\"#%E2%96%B8-rest-client\" aria-label=\"▸ rest client 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>▸ REST Client</strong></h3>\n<p><a href=\"https://marketplace.visualstudio.com/items?itemName=humao.rest-client\" target=\"_blank\">VSC Extension Link</a></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: 20.945945945945947%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA9UlEQVQY03WPS0rDYACEsyjdqmDFVlJL0rxfJo2/SbT6SwgqYqHYW6h4AHGpKxWvIC6lC8XDdCFe5dNm4aLgYpiBYeAbpe2ENK+fady+slwcsZPEjM8nSCk5G43YFoIkSUjTFPGbNU1DVVW63W7ti1LWLu/pfXzTm85YefokimNOqpLDg33kcBfbMsmyjLwocCydsL/OwGoTGBv4QVh3pmkSRRFhGKK0Lu5oTb/ovM1YenjHSQSiPCUZlgzkMaLYo8jzmnQ+NIw+uq7/US5K6dg+zatHGjcvrOYVmh3gVRM2U4lXjjH8LTzHwXVdPM+rSeb5v9s/f2CCh3wRg6sAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"29\"\n        title=\"29\"\n        src=\"/static/78f3b88310de1dc097d3defd3c5ccc17/fcda8/29.png\"\n        srcset=\"/static/78f3b88310de1dc097d3defd3c5ccc17/12f09/29.png 148w,\n/static/78f3b88310de1dc097d3defd3c5ccc17/e4a3f/29.png 295w,\n/static/78f3b88310de1dc097d3defd3c5ccc17/fcda8/29.png 590w,\n/static/78f3b88310de1dc097d3defd3c5ccc17/7422e/29.png 697w\"\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<br />\n<p>HTTP 요청을 보내고 직접 응답을 확인 할 수 있습니다.</p>\n<p><strong>REST</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: 52.02702702702703%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAABgklEQVQoz52RyWrCUBSG8waioNEMN2a2DlUpXfTB1L0+hSboqq1gzFP4BLpzYXeuHHBAN5G/ObGWWoQWFx/nwOV89z/3cpvNBvv9HsHphCAI7oYc5OJ2ux1msw/4wyG8wQCeN8CQes+7CZ39xvf90DEDubjj8Yj3t1ekmQYtXwEzchAzGahSBkxIQ5eFsBdgKRIMJiIejyORSFwRi8XQ7/dxOBzAbbdbdLtdaKaJQrWMfLkEyzZh6TpMQ4dtGrCohlDNZrNXqKoKWZbR6/VALo72dh0XYphINRgUTQbLyhAEEaIYIkmQwoELjLFIIH/1hCAIcF33/IZkdToO7AcL1edHPL1UUaoUYVs2crkcNE2DoihhGiWqP7mklMJLr4TtThsiL8LUDBRLRRQKhUhm23aUMplMIpVK3YTn+egdHcc5r7xarTAajdBsNlGv11Gr1a5oNBp/0mq1Ige5uPV6jfl8jul0islk8s14PP43NEsOckWfQs1yucRisbgLmiUHuT4BfIID9fJKuRQAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"30\"\n        title=\"30\"\n        src=\"/static/ee325e17f09877dde05539d650cb6b10/fcda8/30.png\"\n        srcset=\"/static/ee325e17f09877dde05539d650cb6b10/12f09/30.png 148w,\n/static/ee325e17f09877dde05539d650cb6b10/e4a3f/30.png 295w,\n/static/ee325e17f09877dde05539d650cb6b10/fcda8/30.png 590w,\n/static/ee325e17f09877dde05539d650cb6b10/efc66/30.png 885w,\n/static/ee325e17f09877dde05539d650cb6b10/1ff84/30.png 1040w\"\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<br />\n<p><strong>Router</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: 48.64864864864865%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAABkklEQVQoz6WSOW7CQBSGaekALyI4ihewwbEtG0QHR2C5AjfgKkkMdKTmDoSlDBQUNAhRIhA0rC3iz4wtFkVpkoz0ad6bN/NptsDhcMDxePw31EMJ0OR8PuO+fc9v437tHtpOpxP2+70vXCwWeG828fb6Atd1UavV0Gg0SE9i9w6S1+t1D1q/QNe0Wi1st1tPGhgMPhFXNQhKEnJCgSw9gmMYCKKMB8qThJgUh0Bg+Sh4nkcoFEI4HEYkEkEwGEQ2mwXd2G63Q6DX68EwDChaCqbtwLENmDqJjWfYlgnbNGGRuklQNQ2yLEOSJA9FUSAIAvL5PKbTqS9stz/gOA6SqRR0y0YmYxGBDl2Nw9GTsD00mEkVqpqAKIpXIZXHYjHkcjlMJpOLsO0V6FE4lgXDsGBJz3IcGNaHxhSOQOddiEaj3vHT6fRNOBwOUalUUCwWUS6XCSWUSj7l0i3+CTq/UCigWq1iNpv5wvl8jtFoBHqX3W73V3Q6HfT7fYzHY+9RvFfebDZYrVZYLpd/Zr1eX7/NF1M0Fs1ygj0zAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"31\"\n        title=\"31\"\n        src=\"/static/e3867e5e93c1e1062341e8705fece092/fcda8/31.png\"\n        srcset=\"/static/e3867e5e93c1e1062341e8705fece092/12f09/31.png 148w,\n/static/e3867e5e93c1e1062341e8705fece092/e4a3f/31.png 295w,\n/static/e3867e5e93c1e1062341e8705fece092/fcda8/31.png 590w,\n/static/e3867e5e93c1e1062341e8705fece092/efc66/31.png 885w,\n/static/e3867e5e93c1e1062341e8705fece092/1ff84/31.png 1040w\"\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<br />\n<p><strong>Response</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: 356px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 50.67567567567568%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAABkklEQVQoz4WS6Y6jMBCE/RqTezbc4QyQAOEMkNVKs+//OLXVlohm+LM/Wu328XW5bJXnGfquQ1kW8MMIbWzjT+6g6XqYpondbofD4aBjv9+/x0u9xFKr6HxGYzvoHBe1QxBzwTqMIzyfT3R9hzzP3+A1ZN1IxYZBkKvjSkWSK9fDJQwwjiPqpsY4TcgITbMMbdeiaRo86oeOsirhUMjSUKWE9AT0rouU8I6Lvy8+UstCdrshTVNst1scj0d9QPLxdMKJIeO1YpUYJkbvgsTzUBYFqvsdtURVYZonfWVRJblpG/RDj46ei8qCvov6GxsvcJWbFiYCfQKH1wt+FKEgrHpU+rBAvv5+YaCf82vGMAzaipl7paFt2/rx3gpzXu3lB9q3ntd7BCEiQgU2zTMsrotHckjGZz6iZAEZtGiz2fx4MPW528OmXJsTvz4+YDHLBjkkEPFPQua+52W8fmmVXK+IkgQBVdVtyxziTg/9wEcUx1rR+v+t/+L3WoVhCI/+SRaTr2wgXyQmTGrDNH4o+V/8A4CoKyTABIbKAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"32\"\n        title=\"32\"\n        src=\"/static/41be6ac2ba52892e00a482eceea72f08/50ac3/32.png\"\n        srcset=\"/static/41be6ac2ba52892e00a482eceea72f08/12f09/32.png 148w,\n/static/41be6ac2ba52892e00a482eceea72f08/e4a3f/32.png 295w,\n/static/41be6ac2ba52892e00a482eceea72f08/50ac3/32.png 356w\"\n        sizes=\"(max-width: 356px) 100vw, 356px\"\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<br />\n<p><code class=\"language-text\">Postman</code> 이나 <code class=\"language-text\">테스트 프레임워크</code>를 사용하지 않아도, vscode에서 직접 응답을 확인 할 수 있다.</p>\n<br />\n<hr />\n<h3 id=\"▸-version-lens\" style=\"position:relative;\"><a href=\"#%E2%96%B8-version-lens\" aria-label=\"▸ version lens 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>▸ Version Lens</strong></h3>\n<p><a href=\"https://marketplace.visualstudio.com/items?itemName=pflannery.vscode-versionlens\" target=\"_blank\">VSC Extension Link</a></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: 22.2972972972973%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA50lEQVQY0z2QzW6CQBhFfQ9+0gRbHBCUMAzg8COWgmLKpqmLvv97nA40dXFzNzcz53wbLSXze8dQlSYaIQK+Hw/meWYYxrWVUkizUypDZUskRZ4ThiGWZeG67hrHcdjcqxNBIXkpMi5tTatPdKbPdUXgv3GMI5qmIdzvUYFDEbpIYRPutuiqpiwLPM8jTVOiKPp7UPZn4mvPfRrNQJNdJtKmJ+tuZK1pQ5QbooVU68psyie17/vYtv2k3KjkwKdRvnYtH+Y351VwmH4M8UjQfyHqG2LnE8fxqrh0khzNacSqu2j+6y75BQ94f+X+NzO+AAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"33\"\n        title=\"33\"\n        src=\"/static/8365d14351d51b0edaf981f6e0b44dc2/fcda8/33.png\"\n        srcset=\"/static/8365d14351d51b0edaf981f6e0b44dc2/12f09/33.png 148w,\n/static/8365d14351d51b0edaf981f6e0b44dc2/e4a3f/33.png 295w,\n/static/8365d14351d51b0edaf981f6e0b44dc2/fcda8/33.png 590w,\n/static/8365d14351d51b0edaf981f6e0b44dc2/3996e/33.png 648w\"\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<br />\n<p>npm 패키지 버전 정보를 표시 합니다.</p>\n<p><img src=\"/1be85ec1fced0d254742d8f71009e17c/34.gif\"></p>\n<br />\n<p>버전 텍스트를 바꾸지만 패키지는 자동으로 변경되지 않습니다.</p>\n<p>그러므로 변경 후에는 반드시 <code class=\"language-text\">npm install</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=\"#%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>끝까지 읽어주셔서 감사합니다. 👍🏻</p>\n<p><code class=\"language-text\">EXTENSIONS</code>은 어디까지나 편의를 위한 것이니 필수는 아닙니다.</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<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":" 비쥬얼 스튜디오 코드 📇 ▻ EXTENSIONS ","date":"September 30, 2019"}}},"pageContext":{"slug":"/etc/vscode/","previous":{"fields":{"slug":"/algorithm/programmers/sql/string,date/5/"},"frontmatter":{"title":" 프로그래머스 ▻ DATETIME에서 DATE로 형 변환 ","category":"Algorithm"}},"next":{"fields":{"slug":"/nodejs/swagger/"},"frontmatter":{"title":" RESTful 개발 도구 📋 ▻ swagger ","category":"Node Js"}}}},"staticQueryHashes":["3128451518","3956431471"]}