React Context API๋ React ์ปดํฌ๋ํธ ํธ๋ฆฌ ๋ด์ ์ ์ญ์ (global)์ธ ๋ฐ์ดํฐ๋ฅผ ๊ณต์ ํ ์ ์๋ ๋ฐฉ๋ฒ์ด๋ค. Provider๊ฐ ์ ์ธ๋ ์ปดํฌ๋ํธ ๊ธฐ์ค์ผ๋ก ํ์ ์ปดํฌ๋ํธ์์๋ ํด๋น Context์ ๊ฐ์ ์ฌ์ฉํ ์ ์๋ค. Provider ํ์์ปดํฌ๋ํธ์์ Context๋ฅผ ์ฌ์ฉํ ์ ์๋ค๋ ๊ฒ์, โConsumer๋ ๊ฐ์ฅ ๊ฐ๊น์ด Provider๊ธฐ์ค์ผโฆ
Intro ์ด๋ค ๋์์ธ ์์คํ ์์ ์ปดํฌ๋ํธ๋ฅผ ์ ๊ณตํ๋ค๋ฉด, ์ด๋ค ๊ธฐ๋ฅ๋ค์ ๊ธฐ๋ํ์๋์? ์ด ๊ธ์์๋ Select์ปดํฌ๋ํธ์๊ฒ ๋ฐ๋ผ๋ ๊ธฐ๋ฅ์ ์ค์ฌ์ผ๋ก ๊ตฌํ ๋ฐฉ๋ฒ๊ณผ ์์ ์ฝ๋๋ฅผ ์ค๋ช ํฉ๋๋ค. โ ๏ธย ์ด ๊ธ์์ ์๊ฐ๋๋ ์ฝ๋๋ ๋ชจ๋ ์๋์ฝ๋(pseudo code)์ ๋๋ค. ๋์์ฌ๋ถ๋ณด๋ค๋ ์๊ฐํ๊ณ ์ํ๋ ๋งฅ๋ฝ์ ์ค์ฌ์ผ๋ก ์์ฑ๋์์ต๋๋ค. Table of Contents Whโฆ
์ด ๊ธ์์๋ React 17๋ฆด๋ฆฌ์ฆ์ ํฌํจ๋์๋ JSX Transform์ RFC๋ฌธ์๋ฅผ ์ดํด๋ณด๋ฉฐ ์ด ๋ณ๊ฒฝ์ฌํญ์ด ์ด๋ค ์๋ฏธ๋ฅผ ๊ฐ์ง๊ณ ์๋์ง ์ ๋ฆฌํด ๋ณด์์ต๋๋ค. ์ค๊ฐ์ค๊ฐ ๋ด์ฉ์ ๋ํ ์ฒจ์ธ๊ณผ ์ฝ๊ฐ์ ์ถ์ธก์ ๋ง๋ถ์์ต๋๋ค. ๊ด๋ จํ์ฌ ํผ๋๋ฐฑ์ด ์์ผ์๋ค๋ฉด ๋๊ธ๋ก ๋จ๊ฒจ ์ฃผ์๋ฉด ๊ฐ์ฌํ๊ฒ ์ต๋๋ค. ๋ฐ๋จ React17์ 2020๋ 10์ 20์ผ์ ๋ฆด๋ฆฌ์ฆ๋์๋ค. ์ด ๊ธ์ด ๋ฆด๋ฆฌโฆ
์๋ ์ ์ผ๋ ์ด์ผ๊ธฐ ์ฌํด๋ฅผ ๋์๋ณด๋ ์๋ ํ๊ณ ๋ฅผ ์ธ ๋ ์๊ฐํ๋ ๋ฐฉํฅ๊ณผ๋ ๊ฝค ๋ค๋ฅธ ๋ฐฉํฅ์ผ๋ก ๊ฑธ์๋ค. ์๋ ์ ์๊ฐํ๋ ํฐ ๋ชฉํ ์ค ํ๋๋ Infra๊ด๋ จ ๊ณต๋ถ์๋๋ฐ ์ฌํด ์๋ก์ด ๊ณณ์ผ๋ก ์ด์งํ๊ณ ์ ์ ์์ด ๋ณด๋ด๋ค ๋ณด๋ ํ๊ณ ๋ฅผ ์ธ ์ฆ์์ผ ์ด ๋จ์ด๋ฅผ ๋ค์ ๋ ์ฌ๋ฆฌ๋ ๊ฑธ ๋ณด๋ฉด ์ฌ๋ฌ ๊ฐ์ง ์ฐ์ ์์ ๋ค์ชฝ์์ ์ค๋ ๋ฐฉ์นํด๋๋ค๋ ๋ป์ด๊ฒ ๋ค. ์๋ก์ด ๊ณณ์ ๋น์ฐํ ์์คํ ์ด ๋ค๋ฅด๊ณ ,โฆ
๋ค์ด๊ฐ๋ฉฐ ์ดํ๋ฆฌ์ผ์ด์ ์ ๊ฐ๋ฐ์๊ฐ ์ง์ ์์ฑํ ์ฝ๋, ์ธ๋ถ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ฑ ๋ค์ํ ์ฝ๋์กฐ๊ฐ๋ค๋ก ์ด๋ฃจ์ด์ ธ ์์ต๋๋ค. ์ดํ๋ฆฌ์ผ์ด์ ์ด ๋ณต์กํด์ง์๋ก ๋ฒ๋ค ์ฌ์ด์ฆ์ ์ ๊ฒฝ์ ์ฐ๊ฒ ๋๋๋ฐ์, ์ด๋ ํ์ํ ์ฝ๋๋ง ๋จ๊ธฐ๊ธฐ ์ํ ์์ , ํํ Tree Shaking์ด๋ผ๊ณ ๋ถ๋ฆฌ๋ ๊ณผ์ ์ด ์๋ฐ๋์ด์ผ ํฉ๋๋ค. ์ด ๊ธ์์๋ Tree Shaking์ ๋ํ ๊ธฐ๋ณธ ๊ฐ๋ ๊ณผ Tree Shakโฆ
2021๋ 10์ 23์ผ ๊ฒฐํผ์ ์๋๊ณ ๊ฐ์ธ์ ์ผ๋ก ์ฌ์ฉํ ๋ชจ๋ฐ์ผ ์ฒญ์ฒฉ์ฅ๊ณผ ํจ๊ป immutable.wedding์ด๋ผ๋ ๋ชจ๋ฐ์ผ ์ฒญ์ฒฉ์ฅ ํ ํ๋ฆฟ์ ๋ง๋ค์์ต๋๋ค. COVID-19์ํฉ์ด ์ ํ๋๋ฉด์ ๊ฒฐํผ์์ ์ทจ์ํ์ง๋ง, ์ฒญ์ฒฉ์ฅ ๊ฐ๋ฐ ํ๊ธฐ๋ฅผ ์ ์ผ๋ฉฐ ์์ฌ์ด ๋ง์์ ๋ฌ๋๋ด ๋๋ค. ๐ GitHub Repository ๐ ๋์ immutable.wedding ์งํ๋ฐฉ์ ๊ฐ์ด ์ฌโฆ
Table of Contents CSS in JS? Critical CSS์ CSS-in-JS Performance Atomic CSS ๋ง๋ฌด๋ฆฌ References CSS in JS? CSS-in-JS๋ ๋จ์ด ๊ทธ๋๋ก JavaScript์ฝ๋์์ CSS๋ฅผ ์์ฑํ๋ ๋ฐฉ์์ ๋งํฉ๋๋ค. 2014๋ Facebook ๊ฐ๋ฐ์์ธ Christopher Chedeau akaโฆ
์น ์ ํ๋ฆฌ์ผ์ด์ ์์ ๋ณต์กํ ๋ฌธ์ ์ค ํ๋๋ ์ฌ์ฉ์์ ์ ๋ ฅ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์ ์ฒ๋ฆฌํ๋ Form์ ๋๋ค. ์ด ๊ธ์์๋ Form์ ๋ค๋ฃจ๋ ์ฌ๋ฌ ๋ฐฉ๋ฒ๊ณผ ๋ํ์ form ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ค ํ๋์ธ react-hook-form์ ๋ํด ์๊ฐํฉ๋๋ค. ๊ฐ๋จํ Form Form์์ ๋ ์ฌ๋ฆด ์ ์๋ ๋จ์ํ ์์๋ Email๊ณผ Password๋ฅผ ๋ฐ๋ Login Form์ด๋ค. ์ด ๊ฒฝ์ฐ โฆ
์ด์ง ์ฌ์ ์ ๋ง๋ฌด๋ฆฌํ๋ฉฐ ์ค๋นํ๊ณ , ๊ฒฝํํ๋ ๊ฒ๋ค์ ๋ํด ์ ๋ฆฌํด๋ณด๋ ค๊ณ ํฉ๋๋ค. ๊ฐ์ธ์ ์ผ๋ก๋ ์ฝ ๋ ๋ฌ๊ฐ์ ์ฌ์ ์ ๋๋์๋ณด๊ณ ์ ํ๊ณ , ์ด์ง์ ๊ณ ๋ฏผํ์๊ฑฐ๋ ์งํ ์ค์ด์ ๋ถ๋ค์๊ฒ๋ ํ๋์ ๊ฒฝํ ๊ณต์ ๊ฐ ๋์์ผ๋ฉด ํ๋ ๋ฐ๋์ผ๋ก ๊ธ์ ์ ์ด๋ด ๋๋ค. ์ ์ด์ง์ ํ๋๊ฐ? ์ด์ง ์ฌ์ ์ ์์ํ๊ธฐ์ ์์, ์ด ์ง๋ฌธ์ ๋ต์ ์ฐพ๋ ๊ฒ์ ๋งค์ฐ ์ค์ํ๋ค. ์ด ์ง๋ฌธ์ ๋ํ ๋ต์ ์ฎ๊ธฐ๊ฒ โฆ
์ด ๊ธ์์๋ ๋์์ธ ์์คํ ๊ฐ๋ฐ ํ๊ฒฝ์ ๊ตฌ์ถํ๋ ๋จ๊ณ์์ rollup.js๊ณผ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ค์ ์ ๊ดํ ๋ด์ฉ์ ์ ๋ฆฌํ๋ ๊ธ์ ๋๋ค. ํ์ง๋ง ํ๊ฒฝ์ค์ ์ ๋ํ ํํ ๋ฆฌ์ผ์ ์๋๊ธฐ ๋๋ฌธ์ ํ์ํ ๋ชจ๋ ๋ด์ฉ์ ๋ค๋ฃจ์ง๋ ์์ต๋๋ค. ์ด ๊ธ์์ ๊ตฌ์ฑํ ํ๊ฒฝ ๊ตฌ์ถ ๋ด์ฉ๋ง ๋ณด๊ณ ์ถ์ผ์๋ค๋ฉด @soyoung/design-system-config ์์ ๋ณด์ค ์ ์์ต๋๋ค. Table โฆ