์ปค๋ฆฌ์ด์์ ์ธ ๋ฒ์งธ ๋์์ธ ์์คํ ์ ๋ง๋ค๊ณ ์๋ค. ๊ทธ์ค ํ ๋ฒ์ ์ฒ์๋ถํฐ ๋ง๋ค์๊ณ ๋ ๋ฒ์ ๊ธฐ์กด ์์คํ ์์์ ์ฌ๊ฐ๋ฐํ๋ค. ์ด ์ธ ๋ฒ์ ๊ณผ์ ์์ ์ค์ํ ๊ฒ๊ณผ ๊ทธ๋ ์ง ์์ ๊ฒ์ ์๊ฒ ๋๊ณ ๊ทธ ๊ณผ์ ์์์ ๊ฒช์ ์ฌ๋ฌ ์ด๋ ค์์ ๊ธ๋ก ์ ๋ฆฌํ๋ค. ๋ง๋ค๊ธฐ ์ ์ ๋ชฉํ ์ค์ํ ๊ฒ์ ํ๋ฆฌํฐ ๋์์น ๋ง๋ค๊ธฐ ๋ง๋๋ ์ค์ ๋์์น ์ํธํ๊ธฐ ์ฝ๋๋ ๊ธฐ๋ณธ์ด๋ค ์ ์๊ฐ ์ ๋ถ๋ค ํ๋๋ง โฆ
12์ ํ๊ณ ์์ฆ์ด๋ค. ์ฌ ํด๋ ๊ฐ์ธ์ ์ผ๋ก๋, ์ผ์ ์ผ๋ก๋ ์ํ์ ์ผ๋ก ๋์ด์ง ํ ํด์๋ค. ๊ธฐ์ต์ ๋จ๋ ๊ฒฝํ์ ์ค์ฌ์ผ๋ก ํ๊ณ ๋ฅผ ์์ฑํ๋ค. ์๋ก์ด ํ, ์๋ก์ด ๋์์ธ ์์คํ ์ฌ ํด 3์ ํ ์ค์ PC Design Platform Team์ ํฉ๋ฅํ๋ค. โํ ์ค์ PC์ ํ์ด ์์ด?โ๋ผ๊ณ ์๊ฐํ ์ ์์ง๋ง ํ ์ค ์ปค๋ฎค๋ํฐ(๊ณ์ด์ฌ)์๋ ๋๊ณ ๊ฐ ์ ํ๋ถํฐ ์ด๋๋ฏผ๊น์ง PC์ ํ์ดโฆ
์ด๋ฒ ๊ธ์์๋ ์ฑ๋ฅ ๊ฐ์ ์ ๊ด์ ์์ ๋ ๋๋ง์ ๋ค์ ์ดํด๋ณด๋ ค ํ๋ค. ๋ ๋๋ง ์ฑ๋ฅ ์ต์ ํ๋ ์ด๋ป๊ฒ ์ ๊ทผํด์ผ ํ ๊น? ์น ์ฑ๋ฅ ์ต์ ํ๋ ๊ฐ์ฅ ๋น ๋ฅธ ๋ ๋๋ง ํจ์ค๋ฅผ ๊ตฌํํ๋ ๊ฒ์ด ์๋๋ค. ๋ ๋๋ง ๊ณผ์ ์ ์ ์ ์ผ๋ก ๋ธ๋ผ์ฐ์ ์์ ์งํ๋๋ ๊ฒ์ผ๋ก, ๋ ๋๋ง ๊ณผ์ ์์ฒด๋ฅผ ๊ฐ์ ํ ์๋ ์๋ค. ๋ฐ๋ผ์, ์ฑ๋ฅ โ๊ฐ์ โ์ ์ ๊ทผ ๋ฐฉ์์ ๋ ๋๋ง ๊ณผ์ ์์ฒด์ ๊ฐ์ ์ด ์๋๋ผ ๊ณผ์ ์ค ๋ณ๋ชฉ์ดโฆ
๋ค์ด๊ฐ๋ฉฐ ์ต๊ทผ ๊ฐ์ธ ํ๋ก์ ํธ์ ๋ ๋๋ง ์ฑ๋ฅ์ ๊ฐ์ ํ๋ฉฐ ๋ธ๋ผ์ฐ์ ๋ ๋๋ง ๊ณผ์ ์ ๋ํด ์ ๋ฆฌํ๊ณ ์ ํํ ๋ฌด์์ด ์ฑ๋ฅ ์ ํ์ ์์ธ์ธ์ง, ์ด๋ป๊ฒ ๊ฐ์ ๋ ์ ์์๋์ง ์ ๋ฆฌํด๋ดค๋ค. ๋ ๋๋ง ํ์ดํ๋ผ์ธ ๋ ๋๋ง ์ฑ๋ฅ์ ๊ฐ์ ํ๋ ค๋ฉด ๋จผ์ ๋ ๋๋ง ๊ณผ์ ๊ณผ ์ด์ ๊ด์ฌํ๋ ์์๋ฅผ ๋ํด ์์์ผ ํ๋ค. ์ด ๊ธ์์ ๋ค๋ฃฐ ๋ด์ฉ์ Blink์์ง ๊ธฐ์ค์ด๋ฉฐ, RenderingNG ๊ธ๊ณผ 2020๋ โฆ
๋งค๋ ํ๊ณ ๊ธ์์ โ์ฌํด๋ ํน๋ณํ๋ค.โ๋ผ๊ณ ์ ๋ ๊ฒ ๊ฐ์ง๋ง, ์ด๋ฒ ํด๋ ์ข ๋ ๊ทธ๋ ๋ค. ์ผ(work)๊ณผ ์ปค๋ฆฌ์ด, ๊ฐ์ธ์ ์ถ์์ ํฌ๊ณ ์์ ๋ณํ๊ฐ ์์๋ค. ์ฌ๋ฌ ๊ฐ์ง ๋ณํ ์ค ๊ธฐ์ต์ ๋จ๋ ๋ช ๊ฐ์ง ํค์๋๋ค๋ก ํ๊ณ ๋ฅผ ์์ฑํ๋ค. flex 2.0๊ณผ ํ์ ์ ๋ํ ๊ณ ๋ฏผ ํ์ฌ flex ์ ํ์ ํ์ ํฉ๋ฅํ๋ ์์ ๊ณผ ๋ค๋ฅด๋ค. 2021๋ 8์๋ถํฐ โ2.0 ํ๋ก์ ํธโ๋ผ๋ ์ดโฆ
์ด ๊ธ์ FEConf2022 ๋์์ธ ์์คํ , ํํ๋ฅผ ๋์ด์ ๋ฐํ์์ ๋ค๋ฃจ์ง ์์ linear๋ผ๋ Design System์ ๋ํ ๊ณ ๋ฏผ๊ณผ ๊ฒฐ์ ์ ๋ํ ๊ธ์ ๋๋ค. Table of Contents Principle Problem from Principle Interface Compound Component Headless ์์ 1. Trigger ์์ 2. ๋คโฆ
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๊ด๋ จ ๊ณต๋ถ์๋๋ฐ ์ฌํด ์๋ก์ด ๊ณณ์ผ๋ก ์ด์งํ๊ณ ์ ์ ์์ด ๋ณด๋ด๋ค ๋ณด๋ ํ๊ณ ๋ฅผ ์ธ ์ฆ์์ผ ์ด ๋จ์ด๋ฅผ ๋ค์ ๋ ์ฌ๋ฆฌ๋ ๊ฑธ ๋ณด๋ฉด ์ฌ๋ฌ ๊ฐ์ง ์ฐ์ ์์ ๋ค์ชฝ์์ ์ค๋ ๋ฐฉ์นํด๋๋ค๋ ๋ป์ด๊ฒ ๋ค. ์๋ก์ด ๊ณณ์ ๋น์ฐํ ์์คํ ์ด ๋ค๋ฅด๊ณ ,โฆ