From 328df5cba7093c16312ec96ac55f9eea3c0e35c7 Mon Sep 17 00:00:00 2001 From: kangbyeonghyeon Date: Wed, 4 Sep 2024 23:56:00 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20"[=EC=B9=B4=EC=B9=B4=EC=98=A4=20?= =?UTF-8?q?=ED=85=8C=ED=81=AC=20=EC=BA=A0=ED=8D=BC=EC=8A=A4=202=EA=B8=B0]?= =?UTF-8?q?=201=EC=B0=A8=20=EC=BD=94=EB=93=9C=EB=A6=AC=EB=B7=B0=20?= =?UTF-8?q?=EB=B0=98=EC=98=81=20=EB=B0=8F=20=EB=A6=AC=ED=8C=A9=ED=86=A0?= =?UTF-8?q?=EB=A7=81=20=EC=A7=84=ED=96=89=EA=B8=B0"=20=ED=8F=AC=EC=8A=A4?= =?UTF-8?q?=ED=8C=85=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...1 \354\247\204\355\226\211\352\270\260.md" | 50 +++++++++++++++--- _site/feed.xml | 51 +++++++++++++++---- ...\354\247\204\355\226\211\352\270\260.html" | 49 +++++++++++++++--- 3 files changed, 125 insertions(+), 25 deletions(-) diff --git "a/_posts/2024-07-15-[\354\271\264\354\271\264\354\230\244 \355\205\214\355\201\254 \354\272\240\355\215\274\354\212\244 2\352\270\260] 1\354\260\250 \354\275\224\353\223\234\353\246\254\353\267\260 \353\260\230\354\230\201 \353\260\217 \353\246\254\355\214\251\355\206\240\353\247\201 \354\247\204\355\226\211\352\270\260.md" "b/_posts/2024-07-15-[\354\271\264\354\271\264\354\230\244 \355\205\214\355\201\254 \354\272\240\355\215\274\354\212\244 2\352\270\260] 1\354\260\250 \354\275\224\353\223\234\353\246\254\353\267\260 \353\260\230\354\230\201 \353\260\217 \353\246\254\355\214\251\355\206\240\353\247\201 \354\247\204\355\226\211\352\270\260.md" index df667ff..426a692 100644 --- "a/_posts/2024-07-15-[\354\271\264\354\271\264\354\230\244 \355\205\214\355\201\254 \354\272\240\355\215\274\354\212\244 2\352\270\260] 1\354\260\250 \354\275\224\353\223\234\353\246\254\353\267\260 \353\260\230\354\230\201 \353\260\217 \353\246\254\355\214\251\355\206\240\353\247\201 \354\247\204\355\226\211\352\270\260.md" +++ "b/_posts/2024-07-15-[\354\271\264\354\271\264\354\230\244 \355\205\214\355\201\254 \354\272\240\355\215\274\354\212\244 2\352\270\260] 1\354\260\250 \354\275\224\353\223\234\353\246\254\353\267\260 \353\260\230\354\230\201 \353\260\217 \353\246\254\355\214\251\355\206\240\353\247\201 \354\247\204\355\226\211\352\270\260.md" @@ -82,6 +82,8 @@ export default function PrivateRoute() { } ``` +
+ **PrivateRoute**는 라우팅과 관련된 컴포넌트로, 라우팅 기능과 밀접한 관계가 있다. 기존에 이 컴포넌트를 `components/common`에서 관리하고 있었지만, **Colocation** 원칙을 준수하여 **routes** 폴더로 이동시켰다. @@ -154,17 +156,11 @@ export default function PrivateRoute() { ![스크린샷 2024-07-09 오후 3.43.00.png](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F13897cab-0dd6-431f-b847-04477372a586%2F65e46791-93c0-40be-96e0-4e4639ff6b0f%2F%25E1%2584%2589%25E1%2585%25B3%25E1%2584%258F%25E1%2585%25B3%25E1%2584%2585%25E1%2585%25B5%25E1%2586%25AB%25E1%2584%2589%25E1%2585%25A3%25E1%2586%25BA_2024-07-09_%25E1%2584%258B%25E1%2585%25A9%25E1%2584%2592%25E1%2585%25AE_3.43.00.png?id=5655bcfc-f268-49fb-9e10-66423ee44f15&table=block) -이전 코드에서는 maxWidth에 대한 값들을 `assets/variants`라는 파일에서 관리하고 있었다. -
![스크린샷 2024-07-09 오후 3.43.31.png](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F13897cab-0dd6-431f-b847-04477372a586%2F07b05441-80a1-40ee-905f-1f48f33198d9%2F%25E1%2584%2589%25E1%2585%25B3%25E1%2584%258F%25E1%2585%25B3%25E1%2584%2585%25E1%2585%25B5%25E1%2586%25AB%25E1%2584%2589%25E1%2585%25A3%25E1%2586%25BA_2024-07-09_%25E1%2584%258B%25E1%2585%25A9%25E1%2584%2592%25E1%2585%25AE_3.43.31.png?id=16af2b38-fe81-4e65-9abe-fce08c84d9b3&table=block)|![스크린샷 2024-07-09 오후 3.43.46.png](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F13897cab-0dd6-431f-b847-04477372a586%2Fe0be7e07-9819-452e-a057-9c79c6ea5d76%2F%25E1%2584%2589%25E1%2585%25B3%25E1%2584%258F%25E1%2585%25B3%25E1%2584%2585%25E1%2585%25B5%25E1%2586%25AB%25E1%2584%2589%25E1%2585%25A3%25E1%2586%25BA_2024-07-09_%25E1%2584%258B%25E1%2585%25A9%25E1%2584%2592%25E1%2585%25AE_3.43.46.png?id=8a7d5a06-46c4-4891-a66c-30b409738f3e&table=block) -
- -기존에 Inner 컴포넌트에서 maxWidth라는 값을 number로 받고 있었는데, 해당 maxWidth값들을 varaints에서 관리하고 있다면, maxWidth값에 **제약 조건**을 걸어 유연하게 활용할 수 있도록 개선해볼 수 있었다. - -따라서 다음과 같이 `MaxWidth` 라는 타입 제약조건을 걸어서 `‘initial’`, `‘xs’` , `‘sm’` , `‘md’` , `‘lg’`로 구분해서 값을 받도록 개선하였다. +이전에는 maxWidth에 대한 값들을 `assets/variants`라는 파일에서 관리하고 있었다.
@@ -187,6 +183,38 @@ const Container = styled.div<{ maxWidth: number }>` `; ``` +
+ +기존에 Inner 컴포넌트에서 maxWidth라는 값을 `number`로 받고 있었는데, 해당 maxWidth값들을 varaints에서 관리하고 있다면, maxWidth값에 **제약 조건**을 걸어 유연하게 활용할 수 있도록 개선해볼 수 있었다. + +
+ +```tsx +import React, { ReactNode } from "react"; +import styled from "@emotion/styled"; +import { BREAK_POINTS } from "@assets/styles/variants"; + +type MaxWidth = "xs" | "sm" | "md" | "lg"; + +export interface InnerProps { + maxWidth: MaxWidth; + children: ReactNode; +} + +export default function Inner({ maxWidth, children }: InnerProps) { + return {children}; +} + +const Container = styled.div<{ maxWidth: MaxWidth }>` + max-width: ${({ maxWidth }) => BREAK_POINT[maxWidth]}px; + margin: 0 auto; +`; +``` + +
+ +따라서 위와 같이 `MaxWidth` 라는 타입 제약조건을 걸어서 `‘initial’`, `‘xs’` , `‘sm’` , `‘md’` , `‘lg’`로 구분해서 값을 받도록 개선하였다. + 또한 `Inner`라는 컴포넌트 명칭이 정확한 책임이 무엇인지 파악하기 어렵기 때문에 `CenteredContainer`으로 변경하여 요소들을 중앙으로 배치하는 Container라는 역할을 명확하게 알 수 있게 하기위해 다시 네이밍하였다.
@@ -220,7 +248,7 @@ const Container = styled.div<{ maxWidth: MaxWidth }>`

-# 7. spread operator 대신 명시적 Props 전달 +# 7. spread operator 대신 명시적으로 Props 전달 필자는 spread operator를 사용하면 더 간결하게 코드를 작성할 수 있다고 생각하여 작성하고 있었다. @@ -245,6 +273,8 @@ export default function GoodsItemList() { } ``` +
+ 하지만 spread operator를 사용하면 **존재하지 않는 props를 TypeScript가 인지하지 못하는 문제**가 발생할 수 있다. 때문에 spread operator를 사용하는 대신, **key-value 형태**로 props를 명시적으로 전달하도록 변경해야한다. @@ -305,6 +335,8 @@ const commonStyles = css` export default commonStyles; ``` +
+ 이후 resetStyles와 commonStyles를 모두 Global Provider에 styles에 전달해주어야 하기 때문에 styles디렉토리에 `index.tsx`로 컴포넌트 파일을 만들어 모든 style의 파일들을 하나로 모으고 Global Provider도 이안에서 관리하도록 분리해보았다. @@ -327,6 +359,8 @@ export default function GlobalStyles() { } ``` +
+ 이후 GlobalStyles 컴포넌트만 프로젝트 루트에 사용하기만 하면 된다.
diff --git a/_site/feed.xml b/_site/feed.xml index 4508399..d4d88cd 100644 --- a/_site/feed.xml +++ b/_site/feed.xml @@ -1,4 +1,4 @@ -Jekyll2024-09-04T21:55:07+09:00http://localhost:4000/feed.xmlKang Byeong-hyeon 👨🏻‍💻Kang Byeonghyeon's dev blog +Jekyll2024-09-04T23:55:55+09:00http://localhost:4000/feed.xmlKang Byeong-hyeon 👨🏻‍💻Kang Byeonghyeon's dev blog Kang Byeonghyeon[우선] 우선을 중단하며2024-07-28T00:00:00+09:002024-07-28T00:00:00+09:00http://localhost:4000/%5B%EC%9A%B0%EC%84%A0%5D%20%EC%9A%B0%EC%84%A0%EC%9D%84%20%EC%A4%91%EB%8B%A8%ED%95%98%EB%A9%B0<p><br /> <br /> <br /></p> @@ -422,6 +422,8 @@ <span class="p">}</span> </code></pre></div></div> +<p><br /></p> + <p><strong>PrivateRoute</strong>는 라우팅과 관련된 컴포넌트로, 라우팅 기능과 밀접한 관계가 있다.</p> <p>기존에 이 컴포넌트를 <code class="language-plaintext highlighter-rouge">components/common</code>에서 관리하고 있었지만, <strong>Colocation</strong> 원칙을 준수하여 <strong>routes</strong> 폴더로 이동시켰다.</p> @@ -501,8 +503,6 @@ <p><img src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F13897cab-0dd6-431f-b847-04477372a586%2F65e46791-93c0-40be-96e0-4e4639ff6b0f%2F%25E1%2584%2589%25E1%2585%25B3%25E1%2584%258F%25E1%2585%25B3%25E1%2584%2585%25E1%2585%25B5%25E1%2586%25AB%25E1%2584%2589%25E1%2585%25A3%25E1%2586%25BA_2024-07-09_%25E1%2584%258B%25E1%2585%25A9%25E1%2584%2592%25E1%2585%25AE_3.43.00.png?id=5655bcfc-f268-49fb-9e10-66423ee44f15&amp;table=block" alt="스크린샷 2024-07-09 오후 3.43.00.png" /></p> -<p>이전 코드에서는 maxWidth에 대한 값들을 <code class="language-plaintext highlighter-rouge">assets/variants</code>라는 파일에서 관리하고 있었다.</p> - <p><br /></p> <table> @@ -514,11 +514,7 @@ </tbody> </table> -<p><br /></p> - -<p>기존에 Inner 컴포넌트에서 maxWidth라는 값을 number로 받고 있었는데, 해당 maxWidth값들을 varaints에서 관리하고 있다면, maxWidth값에 <strong>제약 조건</strong>을 걸어 유연하게 활용할 수 있도록 개선해볼 수 있었다.</p> - -<p>따라서 다음과 같이 <code class="language-plaintext highlighter-rouge">MaxWidth</code> 라는 타입 제약조건을 걸어서 <code class="language-plaintext highlighter-rouge">‘initial’</code>, <code class="language-plaintext highlighter-rouge">‘xs’</code> , <code class="language-plaintext highlighter-rouge">‘sm’</code> , <code class="language-plaintext highlighter-rouge">‘md’</code> , <code class="language-plaintext highlighter-rouge">‘lg’</code>로 구분해서 값을 받도록 개선하였다.</p> +<p>이전에는 maxWidth에 대한 값들을 <code class="language-plaintext highlighter-rouge">assets/variants</code>라는 파일에서 관리하고 있었다.</p> <p><br /></p> @@ -540,6 +536,37 @@ `</span><span class="p">;</span> </code></pre></div></div> +<p><br /></p> + +<p>기존에 Inner 컴포넌트에서 maxWidth라는 값을 <code class="language-plaintext highlighter-rouge">number</code>로 받고 있었는데, 해당 maxWidth값들을 varaints에서 관리하고 있다면, maxWidth값에 <strong>제약 조건</strong>을 걸어 유연하게 활용할 수 있도록 개선해볼 수 있었다.</p> + +<p><br /></p> + +<div class="language-tsx highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="nx">React</span><span class="p">,</span> <span class="p">{</span> <span class="nx">ReactNode</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">react</span><span class="dl">"</span><span class="p">;</span> +<span class="k">import</span> <span class="nx">styled</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">@emotion/styled</span><span class="dl">"</span><span class="p">;</span> +<span class="k">import</span> <span class="p">{</span> <span class="nx">BREAK_POINTS</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">@assets/styles/variants</span><span class="dl">"</span><span class="p">;</span> + +<span class="kd">type</span> <span class="nx">MaxWidth</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">xs</span><span class="dl">"</span> <span class="o">|</span> <span class="dl">"</span><span class="s2">sm</span><span class="dl">"</span> <span class="o">|</span> <span class="dl">"</span><span class="s2">md</span><span class="dl">"</span> <span class="o">|</span> <span class="dl">"</span><span class="s2">lg</span><span class="dl">"</span><span class="p">;</span> + +<span class="k">export</span> <span class="kr">interface</span> <span class="nx">InnerProps</span> <span class="p">{</span> + <span class="nl">maxWidth</span><span class="p">:</span> <span class="nx">MaxWidth</span><span class="p">;</span> + <span class="nl">children</span><span class="p">:</span> <span class="nx">ReactNode</span><span class="p">;</span> +<span class="p">}</span> + +<span class="k">export</span> <span class="k">default</span> <span class="kd">function</span> <span class="nx">Inner</span><span class="p">({</span> <span class="nx">maxWidth</span><span class="p">,</span> <span class="nx">children</span> <span class="p">}:</span> <span class="nx">InnerProps</span><span class="p">)</span> <span class="p">{</span> + <span class="k">return</span> <span class="p">&lt;</span><span class="nc">Container</span> <span class="na">maxWidth</span><span class="p">=</span><span class="si">{</span><span class="nx">maxWidth</span><span class="si">}</span><span class="p">&gt;</span><span class="si">{</span><span class="nx">children</span><span class="si">}</span><span class="p">&lt;/</span><span class="nc">Container</span><span class="p">&gt;;</span> +<span class="p">}</span> + +<span class="kd">const</span> <span class="nx">Container</span> <span class="o">=</span> <span class="nx">styled</span><span class="p">.</span><span class="nx">div</span><span class="o">&lt;</span><span class="p">{</span> <span class="na">maxWidth</span><span class="p">:</span> <span class="nx">MaxWidth</span> <span class="p">}</span><span class="o">&gt;</span><span class="s2">` + max-width: </span><span class="p">${({</span> <span class="nx">maxWidth</span> <span class="p">})</span> <span class="o">=&gt;</span> <span class="nx">BREAK_POINT</span><span class="p">[</span><span class="nx">maxWidth</span><span class="p">]}</span><span class="s2">px; + margin: 0 auto; +`</span><span class="p">;</span> +</code></pre></div></div> + +<p><br /></p> + +<p>따라서 위와 같이 <code class="language-plaintext highlighter-rouge">MaxWidth</code> 라는 타입 제약조건을 걸어서 <code class="language-plaintext highlighter-rouge">‘initial’</code>, <code class="language-plaintext highlighter-rouge">‘xs’</code> , <code class="language-plaintext highlighter-rouge">‘sm’</code> , <code class="language-plaintext highlighter-rouge">‘md’</code> , <code class="language-plaintext highlighter-rouge">‘lg’</code>로 구분해서 값을 받도록 개선하였다.</p> + <p>또한 <code class="language-plaintext highlighter-rouge">Inner</code>라는 컴포넌트 명칭이 정확한 책임이 무엇인지 파악하기 어렵기 때문에 <code class="language-plaintext highlighter-rouge">CenteredContainer</code>으로 변경하여 요소들을 중앙으로 배치하는 Container라는 역할을 명확하게 알 수 있게 하기위해 다시 네이밍하였다.</p> <p><br /></p> @@ -572,7 +599,7 @@ <br /> <br /></p> -<h1 id="7-spread-operator-대신-명시적-props-전달">7. spread operator 대신 명시적 Props 전달</h1> +<h1 id="7-spread-operator-대신-명시적으로-props-전달">7. spread operator 대신 명시적으로 Props 전달</h1> <p>필자는 spread operator를 사용하면 더 간결하게 코드를 작성할 수 있다고 생각하여 작성하고 있었다.</p> @@ -596,6 +623,8 @@ <span class="p">}</span> </code></pre></div></div> +<p><br /></p> + <p>하지만 spread operator를 사용하면 <strong>존재하지 않는 props를 TypeScript가 인지하지 못하는 문제</strong>가 발생할 수 있다.</p> <p>때문에 spread operator를 사용하는 대신, <strong>key-value 형태</strong>로 props를 명시적으로 전달하도록 변경해야한다.</p> @@ -654,6 +683,8 @@ <span class="k">export</span> <span class="k">default</span> <span class="nx">commonStyles</span><span class="p">;</span> </code></pre></div></div> +<p><br /></p> + <p>이후 resetStyles와 commonStyles를 모두 Global Provider에 styles에 전달해주어야 하기 때문에</p> <p>styles디렉토리에 <code class="language-plaintext highlighter-rouge">index.tsx</code>로 컴포넌트 파일을 만들어 모든 style의 파일들을 하나로 모으고 Global Provider도 이안에서 관리하도록 분리해보았다.</p> @@ -675,6 +706,8 @@ <span class="p">}</span> </code></pre></div></div> +<p><br /></p> + <p>이후 GlobalStyles 컴포넌트만 프로젝트 루트에 사용하기만 하면 된다.</p> <p><br /></p> diff --git "a/_site/\354\271\264\354\271\264\354\230\244-\355\205\214\355\201\254-\354\272\240\355\215\274\354\212\244-2\352\270\260-1\354\260\250-\354\275\224\353\223\234\353\246\254\353\267\260-\353\260\230\354\230\201-\353\260\217-\353\246\254\355\214\251\355\206\240\353\247\201-\354\247\204\355\226\211\352\270\260.html" "b/_site/\354\271\264\354\271\264\354\230\244-\355\205\214\355\201\254-\354\272\240\355\215\274\354\212\244-2\352\270\260-1\354\260\250-\354\275\224\353\223\234\353\246\254\353\267\260-\353\260\230\354\230\201-\353\260\217-\353\246\254\355\214\251\355\206\240\353\247\201-\354\247\204\355\226\211\352\270\260.html" index 4db2233..d55322d 100644 --- "a/_site/\354\271\264\354\271\264\354\230\244-\355\205\214\355\201\254-\354\272\240\355\215\274\354\212\244-2\352\270\260-1\354\260\250-\354\275\224\353\223\234\353\246\254\353\267\260-\353\260\230\354\230\201-\353\260\217-\353\246\254\355\214\251\355\206\240\353\247\201-\354\247\204\355\226\211\352\270\260.html" +++ "b/_site/\354\271\264\354\271\264\354\230\244-\355\205\214\355\201\254-\354\272\240\355\215\274\354\212\244-2\352\270\260-1\354\260\250-\354\275\224\353\223\234\353\246\254\353\267\260-\353\260\230\354\230\201-\353\260\217-\353\246\254\355\214\251\355\206\240\353\247\201-\354\247\204\355\226\211\352\270\260.html" @@ -164,6 +164,8 @@

PrivateRoute

} +


+

PrivateRoute는 라우팅과 관련된 컴포넌트로, 라우팅 기능과 밀접한 관계가 있다.

기존에 이 컴포넌트를 components/common에서 관리하고 있었지만, Colocation 원칙을 준수하여 routes 폴더로 이동시켰다.

@@ -243,8 +245,6 @@

6. 타입 제

스크린샷 2024-07-09 오후 3.43.00.png

-

이전 코드에서는 maxWidth에 대한 값들을 assets/variants라는 파일에서 관리하고 있었다.

-


@@ -256,11 +256,7 @@

6. 타입 제

-


- -

기존에 Inner 컴포넌트에서 maxWidth라는 값을 number로 받고 있었는데, 해당 maxWidth값들을 varaints에서 관리하고 있다면, maxWidth값에 제약 조건을 걸어 유연하게 활용할 수 있도록 개선해볼 수 있었다.

- -

따라서 다음과 같이 MaxWidth 라는 타입 제약조건을 걸어서 ‘initial’, ‘xs’ , ‘sm’ , ‘md’ , ‘lg’로 구분해서 값을 받도록 개선하였다.

+

이전에는 maxWidth에 대한 값들을 assets/variants라는 파일에서 관리하고 있었다.


@@ -282,6 +278,37 @@

6. 타입 제 `; +


+ +

기존에 Inner 컴포넌트에서 maxWidth라는 값을 number로 받고 있었는데, 해당 maxWidth값들을 varaints에서 관리하고 있다면, maxWidth값에 제약 조건을 걸어 유연하게 활용할 수 있도록 개선해볼 수 있었다.

+ +


+ +
import React, { ReactNode } from "react";
+import styled from "@emotion/styled";
+import { BREAK_POINTS } from "@assets/styles/variants";
+
+type MaxWidth = "xs" | "sm" | "md" | "lg";
+
+export interface InnerProps {
+  maxWidth: MaxWidth;
+  children: ReactNode;
+}
+
+export default function Inner({ maxWidth, children }: InnerProps) {
+  return <Container maxWidth={maxWidth}>{children}</Container>;
+}
+
+const Container = styled.div<{ maxWidth: MaxWidth }>`
+  max-width: ${({ maxWidth }) => BREAK_POINT[maxWidth]}px;
+  margin: 0 auto;
+`;
+
+ +


+ +

따라서 위와 같이 MaxWidth 라는 타입 제약조건을 걸어서 ‘initial’, ‘xs’ , ‘sm’ , ‘md’ , ‘lg’로 구분해서 값을 받도록 개선하였다.

+

또한 Inner라는 컴포넌트 명칭이 정확한 책임이 무엇인지 파악하기 어렵기 때문에 CenteredContainer으로 변경하여 요소들을 중앙으로 배치하는 Container라는 역할을 명확하게 알 수 있게 하기위해 다시 네이밍하였다.


@@ -314,7 +341,7 @@

6. 타입 제

-

7. spread operator 대신 명시적 Props 전달

+

7. spread operator 대신 명시적으로 Props 전달

필자는 spread operator를 사용하면 더 간결하게 코드를 작성할 수 있다고 생각하여 작성하고 있었다.

@@ -338,6 +365,8 @@

7. spread operator 대 } +


+

하지만 spread operator를 사용하면 존재하지 않는 props를 TypeScript가 인지하지 못하는 문제가 발생할 수 있다.

때문에 spread operator를 사용하는 대신, key-value 형태로 props를 명시적으로 전달하도록 변경해야한다.

@@ -396,6 +425,8 @@

8. sr-only 클래스 관리 방식export default commonStyles; +


+

이후 resetStyles와 commonStyles를 모두 Global Provider에 styles에 전달해주어야 하기 때문에

styles디렉토리에 index.tsx로 컴포넌트 파일을 만들어 모든 style의 파일들을 하나로 모으고 Global Provider도 이안에서 관리하도록 분리해보았다.

@@ -417,6 +448,8 @@

8. sr-only 클래스 관리 방식} +


+

이후 GlobalStyles 컴포넌트만 프로젝트 루트에 사용하기만 하면 된다.