Updates

_gatsby/slices/_gatsby-scripts-1.html

@@ -2,6 +2,6 @@
           <script
             id="gatsby-chunk-mapping"
           >
-            window.___chunkMapping="{\"app\":[\"/app-7474751982414f54997e.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-deb86b43928e59b99a04.js\"],\"component---src-templates-blog-post-js\":[\"/component---src-templates-blog-post-js-0a10be500ee9bb5c641c.js\"],\"component---src-templates-category-posts-js\":[\"/component---src-templates-category-posts-js-26a1813ad7285813717f.js\"],\"component---src-templates-home-tsx\":[\"/component---src-templates-home-tsx-03eefa65fbc1efcc1917.js\"]}";
+            window.___chunkMapping="{\"app\":[\"/app-851f2323c81bdfc9b50c.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-deb86b43928e59b99a04.js\"],\"component---src-templates-blog-post-js\":[\"/component---src-templates-blog-post-js-0a10be500ee9bb5c641c.js\"],\"component---src-templates-category-posts-js\":[\"/component---src-templates-category-posts-js-26a1813ad7285813717f.js\"],\"component---src-templates-home-tsx\":[\"/component---src-templates-home-tsx-03eefa65fbc1efcc1917.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="f9dabc714bb58de142f3";</script><script src="/blog/webpack-runtime-25a6f32f5c8e3f830e8c.js" async></script><script src="/blog/app-7474751982414f54997e.js" async></script>
+        <script>window.___webpackCompilationHash="37455b86c201ad4a671a";</script><script src="/blog/webpack-runtime-7ab122d35026425ab6cf.js" async></script><script src="/blog/app-851f2323c81bdfc9b50c.js" async></script>

chunk-map.json

@@ -1 +1 @@
-{"app":["/app-7474751982414f54997e.js"],"component---src-pages-404-tsx":["/component---src-pages-404-tsx-deb86b43928e59b99a04.js"],"component---src-templates-blog-post-js":["/component---src-templates-blog-post-js-0a10be500ee9bb5c641c.js"],"component---src-templates-category-posts-js":["/component---src-templates-category-posts-js-26a1813ad7285813717f.js"],"component---src-templates-home-tsx":["/component---src-templates-home-tsx-03eefa65fbc1efcc1917.js"]}
+{"app":["/app-851f2323c81bdfc9b50c.js"],"component---src-pages-404-tsx":["/component---src-pages-404-tsx-deb86b43928e59b99a04.js"],"component---src-templates-blog-post-js":["/component---src-templates-blog-post-js-0a10be500ee9bb5c641c.js"],"component---src-templates-category-posts-js":["/component---src-templates-category-posts-js-26a1813ad7285813717f.js"],"component---src-templates-home-tsx":["/component---src-templates-home-tsx-03eefa65fbc1efcc1917.js"]}

manifest.webmanifest

@@ -1 +1 @@
-{"name":"Suu3 Blog","short_name":"Suu3 Blog","start_url":"/blog/home/page/1","background_color":"#efefef","theme_color":"#f45b49","display":"minimal-ui","icons":[{"src":"/blog/icons/icon-48x48.png?v=94eb39c58147f048d2b7747e975eab86","sizes":"48x48","type":"image/png"},{"src":"/blog/icons/icon-72x72.png?v=94eb39c58147f048d2b7747e975eab86","sizes":"72x72","type":"image/png"},{"src":"/blog/icons/icon-96x96.png?v=94eb39c58147f048d2b7747e975eab86","sizes":"96x96","type":"image/png"},{"src":"/blog/icons/icon-144x144.png?v=94eb39c58147f048d2b7747e975eab86","sizes":"144x144","type":"image/png"},{"src":"/blog/icons/icon-192x192.png?v=94eb39c58147f048d2b7747e975eab86","sizes":"192x192","type":"image/png"},{"src":"/blog/icons/icon-256x256.png?v=94eb39c58147f048d2b7747e975eab86","sizes":"256x256","type":"image/png"},{"src":"/blog/icons/icon-384x384.png?v=94eb39c58147f048d2b7747e975eab86","sizes":"384x384","type":"image/png"},{"src":"/blog/icons/icon-512x512.png?v=94eb39c58147f048d2b7747e975eab86","sizes":"512x512","type":"image/png"}]}
+{"name":"Suu3 Blog","short_name":"Suu3 Blog","start_url":"/blog/home/page/1","background_color":"#efefef","theme_color":"#f45b49","display":"minimal-ui","icons":[{"src":"/blog/icons/icon-48x48.png?v=6e2b60ec9474fec3ed6cee7f282cb18e","sizes":"48x48","type":"image/png"},{"src":"/blog/icons/icon-72x72.png?v=6e2b60ec9474fec3ed6cee7f282cb18e","sizes":"72x72","type":"image/png"},{"src":"/blog/icons/icon-96x96.png?v=6e2b60ec9474fec3ed6cee7f282cb18e","sizes":"96x96","type":"image/png"},{"src":"/blog/icons/icon-144x144.png?v=6e2b60ec9474fec3ed6cee7f282cb18e","sizes":"144x144","type":"image/png"},{"src":"/blog/icons/icon-192x192.png?v=6e2b60ec9474fec3ed6cee7f282cb18e","sizes":"192x192","type":"image/png"},{"src":"/blog/icons/icon-256x256.png?v=6e2b60ec9474fec3ed6cee7f282cb18e","sizes":"256x256","type":"image/png"},{"src":"/blog/icons/icon-384x384.png?v=6e2b60ec9474fec3ed6cee7f282cb18e","sizes":"384x384","type":"image/png"},{"src":"/blog/icons/icon-512x512.png?v=6e2b60ec9474fec3ed6cee7f282cb18e","sizes":"512x512","type":"image/png"}]}

page-data/@Private/Sass-사용기/page-data.json

@@ -0,0 +1 @@
+{"componentChunkName":"component---src-templates-blog-post-js","path":"/@Private/Sass-사용기","result":{"data":{"site":{"siteMetadata":{"title":"Suu3 Blog"}},"markdownRemark":{"id":"e4dc44e1-dcc1-5f4e-9ba1-88d2ef08a62f","excerpt":"CSS 프레임워크들에 대해 차츰 알아가던 작년의 나는 Sass를 회사에 입사하면서 처음 써보게 됐다. 작년만 해도, 강의를 들으면 흔히 사용하는 styled-components나 최근에 뜨는 기술이라며 써보게 된 tailwindCSS, CSS문법에서 크게 차이 나지 않는 postCSS…","html":"<p>CSS 프레임워크들에 대해 차츰 알아가던 작년의 나는 Sass를 회사에 입사하면서 처음 써보게 됐다.</p>\n<p>작년만 해도, 강의를 들으면 흔히 사용하는 styled-components나 최근에 뜨는 기술이라며 써보게 된 tailwindCSS, CSS문법에서 크게 차이 나지 않는 postCSS 정도만 써본 상태였다.</p>\n<p>초반엔 PostCSS 쓰듯이 그냥 nesting 문법 정도만 썼었는데, 사용하면서 보니 유용한 문법들이 많았다. (중간엔 내가 제대로 Sass를 사용하지 못하고 있었구나 반성하기도 했다ㅎ)</p>\n<p>Sass를 사용하면서 느낀 점들을 공유하려고 한다.</p>\n<h2 id=\"들어가기-앞서\" style=\"position:relative;\"><a href=\"#%EB%93%A4%EC%96%B4%EA%B0%80%EA%B8%B0-%EC%95%9E%EC%84%9C\" aria-label=\"들어가기 앞서 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>들어가기 앞서..</h2>\n<h3 id=\"css-전처리기\" style=\"position:relative;\"><a href=\"#css-%EC%A0%84%EC%B2%98%EB%A6%AC%EA%B8%B0\" aria-label=\"css 전처리기 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>CSS 전처리기</h3>\n<p>Sass는 CSS 전처리기이다. CSS 전처리기는 pure CSS에서는 쓸 수 없는 편한 문법들을 가지고 CSS를 작성하면, CSS로 변환해주는 프로그램이다.</p>\n<p>CSS 전처리기에는 Sass 말고도 less나 stylus도 있는데, sass가 가장 점유율이 높은 것 같다.</p>\n<p>반대로 CSS를 더 현대적으로 바꿔주는 CSS후처리기인 PostCSS도 있다.</p>\n<h3 id=\"sass\" style=\"position:relative;\"><a href=\"#sass\" aria-label=\"sass 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>Sass</h3>\n<p>Sass는 2006년에 나온 CSS 전처리기로, 당시 pure CSS가 갖고 있던 문제점들을 보완하기 위해 나왔다. mixin, nesting, 상속 셀렉터 등의 문법으로 가독성과 유지보수를 좋게 만들었고, CSS의 재사용도 가능하게 했다.</p>\n<p>아무래도 최근에 많이 쓰이는 CSS in JS나 atomic CSS와 비교하면 오래된 기술이긴 하다.</p>\n<p>하지만 나는 디자인 시스템이 자주 바뀌어 재사용성이 떨어지는 프로젝트를 많이 하기도 했고, CSS in JS를 사용할 때 태그가 많아질수록 선택자나 컴포넌트도 늘어나는 점이 불편했기 때문에 꼭 최신 기술을 쓰지 않아도 개발자 편의나 컨벤션에 맞춰서 쓰면 된다고 생각한다.</p>\n<p>(몇 달 전까지만 해도, 사실 지금도 좀 최신 기술을 쓰면 안될 것 같은 조급함이 있는데 최근에는 그런 마음을 누르고 협업 하는 사람들이 편한 기술은 무엇인가? 에 생각을 해보게 됐다.)</p>\n<h3 id=\"sass와-scss는-뭐가-다를까\" style=\"position:relative;\"><a href=\"#sass%EC%99%80-scss%EB%8A%94-%EB%AD%90%EA%B0%80-%EB%8B%A4%EB%A5%BC%EA%B9%8C\" aria-label=\"sass와 scss는 뭐가 다를까 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>Sass와 Scss는 뭐가 다를까</h3>","tableOfContents":"<ul>\n<li>\n<p><a href=\"#%EB%93%A4%EC%96%B4%EA%B0%80%EA%B8%B0-%EC%95%9E%EC%84%9C\">들어가기 앞서..</a></p>\n<ul>\n<li><a href=\"#css-%EC%A0%84%EC%B2%98%EB%A6%AC%EA%B8%B0\">CSS 전처리기</a></li>\n<li><a href=\"#sass\">Sass</a></li>\n<li><a href=\"#sass%EC%99%80-scss%EB%8A%94-%EB%AD%90%EA%B0%80-%EB%8B%A4%EB%A5%BC%EA%B9%8C\">Sass와 Scss는 뭐가 다를까</a></li>\n</ul>\n</li>\n</ul>","frontmatter":{"title":"Sass 사용기","date":"August 13, 2023","description":"Sass를 사용하면서 알게된 것들","category":"css","tag":["sass"]}},"previous":{"fields":{"slug":"/@Private/줄임말로-웹-용어-이해하기/"},"frontmatter":{"title":"줄임말로 웹 용어 이해하기"}},"next":null},"pageContext":{"id":"e4dc44e1-dcc1-5f4e-9ba1-88d2ef08a62f","previousPostId":"890ae116-10a9-5387-b997-f3eacda8ec6d","nextPostId":null}},"staticQueryHashes":["2841359383"],"slicesMap":{}}

page-data/@Private/vsc-snippet/page-data.json

@@ -0,0 +1 @@
+{"componentChunkName":"component---src-templates-blog-post-js","path":"/@Private/vsc-snippet","result":{"data":{"site":{"siteMetadata":{"title":"Suu3 Blog"}},"markdownRemark":{"id":"8f653c6f-b2d8-52a0-8061-5dfd5bfb3032","excerpt":"기존에도 익스텐션을 통해서 리액트 스니펫 등을 사용하고 있었지만, 생산성없이 유독 반복해서 적게 되는 코드들을 스니펫으로 추가해서 개발 속도를 높여야겠다는 생각이 들었다. 내 경우엔 회사에서 Sass를 사용하고 있었고, scss…","html":"<p>기존에도 익스텐션을 통해서 리액트 스니펫 등을 사용하고 있었지만, 생산성없이 유독 반복해서 적게 되는 코드들을 스니펫으로 추가해서 개발 속도를 높여야겠다는 생각이 들었다.</p>\n<p>내 경우엔 회사에서 Sass를 사용하고 있었고, scss 모듈을 불러와서 클래스 이름을 붙여야 했는데 너무 의미 없는 반복 작업으로 느껴져, 클래스 이름을 붙이는 코드 스니펫을 설정해야겠다는 생각을 했다.</p>\n<h2 id=\"코드-스니펫code-snippet이란\" style=\"position:relative;\"><a href=\"#%EC%BD%94%EB%93%9C-%EC%8A%A4%EB%8B%88%ED%8E%ABcode-snippet%EC%9D%B4%EB%9E%80\" aria-label=\"코드 스니펫code snippet이란 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>코드 스니펫(code snippet)이란?</h2>\n<p>코드 스니펫은 작은 코드 조각을 말한다. 개발자들이 자주 사용하는 패턴이나 기능을 간단하게 표현한 것이다.</p>\n<p>예를 들어 리액트를 쓰게 되면</p>\n<div class=\"gatsby-highlight\" data-language=\"jsx\"><pre class=\"language-jsx\"><code class=\"language-jsx\"><span class=\"token keyword\">import</span> React <span class=\"token keyword\">from</span> <span class=\"token string\">\"react\"</span>\n\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">Component</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">return</span> <span class=\"token comment\">//...</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">export</span> <span class=\"token keyword\">default</span> Component</code></pre></div>\n<p>위와 같은 코드를 컴포넌트를 하나 만들 때마다 반복해서 쓰게 되는데, 웬만한 규모의 프로젝트들은 컴포넌트가 어마어마하게 많을 것이므로 이런 반복 작업을 할 수록 개발자 경험은 떨어질 것이다.</p>\n<p>이때, 코드 스니펫을 설정하면 예를들어 rsc만 입력하여도 위와 같은 코드가 자동으로 입력되게 할 수 있다. 이를 테면 앱의 텍스트 대치 같은 것이다.</p>","tableOfContents":"<ul>\n<li><a href=\"#%EC%BD%94%EB%93%9C-%EC%8A%A4%EB%8B%88%ED%8E%ABcode-snippet%EC%9D%B4%EB%9E%80\">코드 스니펫(code snippet)이란?</a></li>\n</ul>","frontmatter":{"title":"개발 속도를 높이는 코드 스니펫 설정","date":"August 11, 2023","description":"프로젝트 별 Visual Studio Code 코드 스니펫 설정을 알아보자","category":"기타","tag":["vsc","snippet"]}},"previous":{"fields":{"slug":"/@Private/js-deepdive-권장-모음/"},"frontmatter":{"title":"책 모던 자바스크립트 Deep Dive 권장 사항 모음"}},"next":{"fields":{"slug":"/@Private/줄임말로-웹-용어-이해하기/"},"frontmatter":{"title":"줄임말로 웹 용어 이해하기"}}},"pageContext":{"id":"8f653c6f-b2d8-52a0-8061-5dfd5bfb3032","previousPostId":"fb900d0c-51ea-59d4-8ed0-caab4dd05094","nextPostId":"890ae116-10a9-5387-b997-f3eacda8ec6d"}},"staticQueryHashes":["2841359383"],"slicesMap":{}}