Updates

sungpaks · Oct 8, 2024 · b6e7ac9 · b6e7ac9
1 parent 51729e2
commit b6e7ac9
Show file tree

Hide file tree

Showing 83 changed files with 2,040 additions and 31 deletions.
diff --git a/css-styling-methods/index.html b/css-styling-methods/index.html
diff --git a/index.html b/index.html
diff --git a/page-data/css-styling-methods/page-data.json b/page-data/css-styling-methods/page-data.json
diff --git a/page-data/index/page-data.json b/page-data/index/page-data.json
diff --git a/page-data/render-props-and-dynamic-key-and-debouncing/page-data.json b/page-data/render-props-and-dynamic-key-and-debouncing/page-data.json
diff --git a/page-data/table-of-contents-in-gatsby-blog/page-data.json b/page-data/table-of-contents-in-gatsby-blog/page-data.json
diff --git a/page-data/tag/css/page-data.json b/page-data/tag/css/page-data.json
@@ -1 +1 @@
-{"componentChunkName":"component---src-templates-tag-post-tsx","path":"/tag/css/","result":{"data":{"site":{"siteMetadata":{"title":"조성개발실록"}},"allMarkdownRemark":{"nodes":[{"fields":{"slug":"/til/animation-in-react/"},"frontmatter":{"date":"October 05, 2024","title":"React 프로젝트에 애니메이션 넣기","description":"애니메이션 저도 참 좋아하는데요","tag":["TIL","React","CSS","Framer"]}},{"fields":{"slug":"/table-of-contents-in-gatsby-blog/"},"frontmatter":{"date":"June 09, 2024","title":"🗂️ Gatsby 블로그 깔@롱한 목차(Table Of Contents) 만들기","description":"응당 목차라면 블로그가 있어야.","tag":["Blog","Gatsby","JavaScript","CSS","TypeScript"]}},{"fields":{"slug":"/light-mode-and-dark-mode/"},"frontmatter":{"date":"June 06, 2024","title":"🔅 다크모드 5초컷 with CSS 채신기술 light-dark()함수 - (Gatsby 블로그)","description":"불좀 꺼줄래? 블로그좀 보게.","tag":["Gatsby","Blog","CSS","JavaScript","TypeScript"]}}]}},"pageContext":{"tags":"CSS"}},"staticQueryHashes":["2841359383"],"slicesMap":{}}
+{"componentChunkName":"component---src-templates-tag-post-tsx","path":"/tag/css/","result":{"data":{"site":{"siteMetadata":{"title":"조성개발실록"}},"allMarkdownRemark":{"nodes":[{"fields":{"slug":"/css-styling-methods/"},"frontmatter":{"date":"October 06, 2024","title":"🎨 CSS 라이브러리를 고민하는 당신을 위해 (+ 성능비교)","description":"CSS Module VS. CSS-in-JS VS. UI Library VS. Tailwind CSS","tag":["CSS"]}},{"fields":{"slug":"/til/animation-in-react/"},"frontmatter":{"date":"October 05, 2024","title":"React 프로젝트에 애니메이션 넣기","description":"애니메이션 저도 참 좋아하는데요","tag":["TIL","React","CSS","Framer"]}},{"fields":{"slug":"/table-of-contents-in-gatsby-blog/"},"frontmatter":{"date":"June 09, 2024","title":"🗂️ Gatsby 블로그 깔@롱한 목차(Table Of Contents) 만들기","description":"응당 목차라면 블로그가 있어야.","tag":["Blog","Gatsby","JavaScript","CSS","TypeScript"]}},{"fields":{"slug":"/light-mode-and-dark-mode/"},"frontmatter":{"date":"June 06, 2024","title":"🔅 다크모드 5초컷 with CSS 채신기술 light-dark()함수 - (Gatsby 블로그)","description":"불좀 꺼줄래? 블로그좀 보게.","tag":["Gatsby","Blog","CSS","JavaScript","TypeScript"]}}]}},"pageContext":{"tags":"CSS"}},"staticQueryHashes":["2841359383"],"slicesMap":{}}
diff --git a/page-data/tag/page-data.json b/page-data/tag/page-data.json
diff --git a/page-data/til/geolocation-based-running-tracker-prototype/page-data.json b/page-data/til/geolocation-based-running-tracker-prototype/page-data.json
diff --git a/page-data/til/html-audio-volume-control-with-recoil/page-data.json b/page-data/til/html-audio-volume-control-with-recoil/page-data.json
diff --git a/page-data/til/nextjs-pages-router/page-data.json b/page-data/til/nextjs-pages-router/page-data.json
diff --git a/page-data/til/page-data.json b/page-data/til/page-data.json
diff --git a/render-props-and-dynamic-key-and-debouncing/index.html b/render-props-and-dynamic-key-and-debouncing/index.html
@@ -430,7 +430,7 @@ <h2 id="먼저-searchablelist-컴포넌트를-만듭시다" style="position:rela
 저는 <code class="language-text">item</code>과 기타 여러 props를 받는 <code class="language-text">&lt;ScenarioListItem></code> 컴포넌트를 만들었어요.<br>
 사실 여러분 입장에서는 별 관심을 코드라서 여기에는 안 씁니다.</p>
 <p>이제 <code class="language-text">&lt;SearchableList></code>를 이용하여 시나리오 리스트 검색 컴포넌트를 만들 일만 남았네요</p>
-<div class="gatsby-highlight" data-language="tsx"><pre class="language-tsx"><code class="language-tsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SearchableList</span></span> <span class="token attr-name">items</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>scenarios<span class="token punctuation">}</span></span> <span class="token attr-name">keyFn</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token parameter">item</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>id<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
+<div class="gatsby-highlight" data-language="tsx"><pre class="language-tsx"><code class="language-tsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SearchableList</span></span> <span class="token attr-name">items</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>scenarios<span class="token punctuation">}</span></span> <span class="token attr-name">keyFn</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>item <span class="token operator">=></span> item<span class="token punctuation">.</span>id<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
   </span><span class="token punctuation">{</span><span class="token punctuation">(</span>item<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">ScenarioListItem</span></span> <span class="token attr-name">item</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span><span class="token plain-text">
 </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SearchableList</span></span><span class="token punctuation">></span></span></code></pre></div>
 <p>편하게 보시라고 안궁금하실 props 넣는 부분은 쳐냈습니다<br>