6. Global Style & Theme
1. Reset CSS
Reset CSS๋ ๋ชจ๋ CSS๋ฅผ ์ด๊ธฐํํด์ฃผ๋ ๋ฐฉ๋ฒ ๊ธฐ๋ณธ์ ์ผ๋ก ์ ์ฉ๋์ด ์๋ CSS๋ฅผ ์ด๊ธฐํํ ์ ์์ styled-reset๋ styled-components ๋ผ์ด๋ธ๋ฌ๋ฆฌ์์ Reset CSS๋ฅผ ์ฌ์ฉํ ์ ์๋๋ก ํ ๊ฒ
์ฌ์ฉ ๋ฐฉ๋ฒ
ํจํค์ง ์ค์น
App ์ปดํฌ๋ํธ์์ ์ฌ์ฉ
2. GlobalStyle
createGlobalStyle The 62.5% Font Size Trick
์ ์ญ ์คํ์ผ ์ง์ box model, font-size, word-break ๋ฑ์ ์ฃผ๋ก ์ด์ฉ
์๋ ๋จ์ em, rem
์ธ๋ถ ์์ธ์ ์ํฅ์ ๋ฐ์ ์ ๋์ ์ธ ๊ฐ์ ์ง๋๋ ๋จ์ em, rem์ ํ ์คํธ ํฌ๊ธฐ๋ฅผ ์กฐ์ ํ ๋ ์ฌ์ฉ font-size ์์ฑ ๊ฐ์ ๋น๋กํด ๊ฐ์ ๊ฒฐ์
em : ๋ถ๋ชจ ์์์ ๊ธ๊ผด ํฌ๊ธฐ
โ ๏ธ ์ฌ๋ฐฑ ํฌ๊ธฐ๋ฅผ ์ ํ ๋๋ ์๊ธฐ ์์ ์ ๊ธ์ ํฌ๊ธฐ๋ฅผ ๊ธฐ์ค์ผ๋ก ํจ
rem(root em) : ๋ฃจํธ ์์์ ๊ธ๊ผด ํฌ๊ธฐ
๋ฃจํธ ์์(html ์์)์ ๊ธฐ๋ณธ ๊ธ๊ผด ํฌ๊ธฐ : 16px
๐ก ์๋ ๋จ์๋ฅผ ์ฌ์ฉํ๊ธฐ๊ฐ ๋ณต์กํ๊ธฐ ๋๋ฌธ์ ์ ์ฒด์ font-size: 62.5%
๋ฅผ ์ค์
์ฌ์ฉ์๊ฐ ์ค์ ํ ํฐํธ ์ฌ์ด์ฆ์ ๋ฐ๋ผ๊ฐ
body์ ํฐํธ ์ฌ์ด์ฆ๋ ๋์์ธ์ ๋ฐ๋ผ ์ค์ ์ด ๋ฌ๋ผ์ง
โ๏ธ ์กฐ๊ฐ๊ธ
ํ์ ์๋ ๋จ์ ์ฌ์ฉํ๋ ๊ฒ์ ์ด๋ ค์ํ๋๋ฐ ์ด๋ฐ ์ข์ ๋ฐฉ๋ฒ์ด ์๋ค๋! ๊ทธ ์ธ์๋ box-sizing ์์ฑ ๋๋ฌธ์ ์ด๋ ค์์ ๊ฒช์ ์ ์ด ์๋๋ฐ GlobalStyle์์ ํ์ํ ๊ฒ๋ค์ ๊ธฐ๋ณธ์ ์ผ๋ก ์กํ๋๋ก ์ค์ ํด์ค์ ์ ์ฉํ ๊ฒ ๊ฐ๋ค.
์ฌ์ฉ ๋ฐฉ๋ฒ
GlobalStyle.ts
ํ์ผ ์์ฑ
GlobalStyle.ts
ํ์ผ ์์ฑsrc์ styles
ํด๋ ์์ฑ ํ GlobalStyle.ts
ํ์ผ ์์ฑ
box-sizing: inherit
๋ถ๋ชจ ์์ฑ ๋ฐ๋ผ๊ฐ๊ธฐfont-size: 62.5%
๊ธฐ๋ณธ์ ์ผ๋ก 1rem = 10px:lang(ko)
ํ๊ตญ์ด์๋ง ์ ์ฉ
App ์ปดํฌ๋ํธ์์ ์ฌ์ฉ
3. box-sizing ์์ฑ
์์์ ๋๋น์ ๋์ด๋ฅผ ๊ณ์ฐํ๋ ๋ฐฉ๋ฒ์ ์ง์ ๐จ ๊ธฐ๋ณธ๊ฐ์ด content-box ์ด๊ธฐ ๋๋ฌธ์ ๋ฐ์ํ๋ ์ค๋ฅ๊ฐ ๋ง์
content-box : Content ์์ญ์ ๊ธฐ์ค์ผ๋ก box์ size๋ฅผ ์ ์ฉ, โ ๏ธ๊ธฐ๋ณธ๊ฐ
์ํ ์ฌ๋ฐฑ๊ณผ ํ ๋๋ฆฌ๋ ํฌํจํ์ง ์์
border-box : Border ์์ญ์ ๊ธฐ์ค์ผ๋ก box์ size๋ฅผ ์ ์ฉ
์ฌ๋์ด ์ธ์ํ๋ ๋ฐ์ค ํฌ๊ธฐ๋ ๋๊ฐ border๋ฅผ ๊ธฐ์ค์ผ๋ก ํจ
content์ padding์ ํฌํจํ ๋ฐ์ค ํฌ๊ธฐ
4. word-break ์์ฑ
ํ ์คํธ๊ฐ ์ฝํ ์ธ ๋ฐ์ค ์์ญ ๋ฐ์ผ๋ก ๋์ณค์ ๋, ์ด๋ป๊ฒ ์ค์ ๋ฐ๊ฟ์ง ์ค์
keep-all(์ด์ ๊ธฐ์ค)
break-all(์์ ๊ธฐ์ค)
5. Theme
Theme
Theming Create a declarations file
๋์์ธ ์์คํ ์ ๊ทผ๊ฐ์ ๋ง๋ จํ๋๋ฐ ํ์ฉ ์ ์ ์ํ๋ฉด ๋คํฌ ๋ชจ๋ ๋ฑ์ ๋์ํ๊ธฐ ์ฌ์
๋์ ๋ณด์ด๋ ๋จํธ์ ์ธ ์ ๋ณด๋ฅผ ๋์ด์, ์๋ฏธ์ ์ง์คํ ์ ์๊ฒ ๋จ
Ex. ํฐ์์ด ์๋๋ผ, Primary Color
Ex. ํ๋์์ด ์๋๋ผ, ํ ๋๋ฆฌ์
๐ ๋
ธํ์ฐ์ ํ
์ปดํฌ๋ํธ๋ฅผ ๋ง์ด ๋๋ ๋ณผ ๊ฒ
๋์์ธ ์์คํ ์ ์ฌ์ฉํ์ง ์๋๋ผ๋, ๊ฐ์ธ ํ๋ก์ ํธ์์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฒ๋ค ๋ง์ด๋ผ๋ ๋ถ๋ฆฌํด์ ์ฌ์ฉํด๋ณด๊ธฐ
์ฌ์ฉ ๋ฐฉ๋ฒ
๊ธฐ๋ณธ Theme ์ ์ : styles ํด๋์
defaultTheme.ts
ํ์ผ ์์ฑ๋คํฌ ๋ชจ๋ ํ์ผ ์์ฑ
darkTheme.ts
, ๊ธฐ๋ณธ ํ ๋ง์ ๋์ผํ ํ์ ์ ์ง์ ํ์ ์ ์ ์ํ๊ณ defaultTheme์ ๋ง์ถ๋ ๊ฒ์ด ๋ถํธํ๋, ๋ฐ๋๋ก defaultTheme์์ ํ์ ์ ์ถ์ถ
type Theme = typeof defaultTheme;
styles/Theme.ts ํ์ผ๋ก ๋ถ๋ฆฌ
App ์ปดํฌ๋ํธ์์ ์ฌ์ฉ :
<ThemeProvider theme={defaultTheme}>
props.theme
์ฌ์ฉ ๊ฐ๋ฅ :GlobalStyle.ts
์์ ์ค์ ํ์ ๋ฌธ์ ํด๊ฒฐ์ ์ํ styled.d.ts ํ์ผ ์์ฑ
ํ์ ํ์ผ ๋ณ๊ฒฝ
๋ค๋ฅธ theme์ ์ถ๊ฐํ ๋ Theme ํ์ ์ ์ฌ์ฉ ํญ์ defaultTheme์ ๋จผ์ ํญ๋ชฉ์ ์ถ๊ฐ/์ญ์ ํ๊ณ , ๋๋จธ์ง๋ฅผ ์ฌ๊ธฐ์ ๋ง์ถ๋ฉด ๋จ
TypeScript์ ๋ ๊ฐ์ง ํ์ผ ์ ํ
.ts
ํ์ผ ํ์ ๋ฐ ์คํ ๊ฐ๋ฅํ ์ฝ๋๋ฅผ ํฌํจํ๋ ๊ตฌํ ํ์ผ.js
ํ์ผ์ ์์ฑํ๋ ํ์ผ์ด๋ฉฐ ์ผ๋ฐ์ ์ผ๋ก ์ฝ๋๋ฅผ ์์ฑํ๋ ์์น.d.ts
ํ์ผ ํ์ ์ ๋ณด๋ง ํฌํจํ๋ ์ ์ธ ํ์ผ.js
ํ์ผ์ ์์ฑํ์ง ์์ผ๋ฉฐ, ํ์ ์ฒดํฌ์๋ง ์ฌ์ฉ๋จ ํจํค์ง๋ฅผ ๋ค์ด๋ฐ์ ๋@types/
๊ฐ ๋ถ์ ๊ฒ์ด d.ts ํ์ผ์ ๋ชจ์๋ ๊ฒ
d.ts ํ์ผ
Type Declarations - .d.ts files Creating .d.ts Files from .js files
d.ts๋ ํ์ ์คํฌ๋ฆฝํธ ์ฝ๋์ ํ์ ์ถ๋ก ์ ๋๋ ํ์ผ
styled.d.ts ํ์ผ
ํ์ ๋ฌธ์ ๋ฅผ ํด๊ฒฐ styles ํด๋์ styled.d.ts ํ์ผ ์์ฑ
๋๋
6. ThemeProvider
styled-components์ <ThemeProvider>
๋ํผ ์ปดํฌ๋ํธ๋ ์ปจํ
์คํธ API๋ฅผ ํตํด ์๊ธฐ ์์ ํ์์ ๋ชจ๋ React ์ปดํฌ๋ํธ์ ํ
๋ง๋ฅผ ์ ๊ณต
๋ ๋ ํธ๋ฆฌ์์ ๋ชจ๋ ์คํ์ผ ์ปดํฌ๋ํธ๋ ์ฌ๋ฌ ๋ ๋ฒจ์ ๊น์ด์ธ ๊ฒฝ์ฐ์๋ ์ ๊ณต๋ ํ
๋ง์ ์ ๊ทผํ ์ ์์
โ๏ธ ์กฐ๊ฐ๊ธ
Context API๋ฅผ ํ์ตํ ๋, ์ด๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ Redux, React Router, styled-components ๋ฑ์ด ์๋ค๊ณ ๋ฐฐ์ ๋ค. ์ด ์ค styled-components๋ ์ ํฌํจ๋๋๊ฑธ๊น ๊ถ๊ธํ์๋๋ฐ ์ด๋ฒ ์๊ฐ์ ์๊ฒ ๋์๋ค. ThemeProvider๋ผ๋ ๊ฒ๋ ์ฒ์ ๋ค์ด๋ดค๋๋ฐ ํ ๋ง๋ฅผ ๋ง๋ค์ด์ ๊ด๋ฆฌํ ๋ ํธ๋ฆฌํ ๊ฒ ๊ฐ๋ค. ํ์ ์คํฌ๋ฆฝํธ์ ํ์ผ ์ ํ ์ค d.ts ํ์ผ์ ๊ฐ๋ฐํ๋ฉด์ ์์ฃผ ๋ดค๋๋ฐ ๋์ ์ธ์ด๋ก ์ค๋ช ํ๋ ค๋ฉด ๋งค๋๋ฝ์ง ์์์๋ค. ์ด๋ฒ์ ํ์ ์คํฌ๋ฆฝํธ ๊ณต์ ๋ฌธ์์ ๋ง์ดํฌ๋ก์ํํธ์์ ๋ง๋ ๋ฌธ์๋ฅผ ๋ณด๊ณ ์ ๋๋ก ์ดํดํ๊ฒ ๋๋ค.
App ์ปดํฌ๋ํธ์์ ์ฌ์ฉํ๊ธฐ
window.matchMedia
์๋ฌ ํด๊ฒฐ
window.matchMedia
์๋ฌ ํด๊ฒฐMocking methods which are not implemented in JSDOM
๐จ Jest ํ
์คํธ์์ window.matchMedia
๋ฌธ์ ๋ฐ์ - darkMode ๋๋ฌธ์ ๋ฐ์
src/setupTests.ts
ํ์ผ์ ๊ณต์ ๋ฌธ์์ ๋์จ ์ฝ๋๋ฅผ ๋ฃ์ผ๋ฉด ํด๊ฒฐ
jest.config.js
ํ์ผ์'<rootDir>/src/setupTests.ts',
๊ฐ ์๋์ง ํ์ธ
์ฐธ๊ณ ๋ ํผ๋ฐ์ค
Last updated