๋ธ๋ก๊ทธ
2025
2024
- 2024๋ 2024๋ ๋ง์ง๋ง๋
- Decorator๋ก ์ง์กฐํ๊ธฐ๋ฌด๋์ด ์ด๋๋ , ๋ํ๋๋ผ ๊ฐ๋ฐ์ '์ธ๋ชจ'๋ 4์ด๋ '์๋ง ์๋น '๋ณด๋ค 'hello world'๋ฅผ ๋จผ์ ์ธ์น ์ฒ์ฌ ๊ฐ๋ฐ์์ด๋ค. '์ธ๋ชจ'๋ ์๋ผ์ ๋ํ๋๋ผ์์ ํต์ฌ ๊ฐ๋ฐ์๊ฐ ๋์ด ์ผํํ์ง๋ก ์ฝ๋๋ฅผ ์์ฐํ๋ฏ ์จ๋ด๋ ค๊ฐ๋ ๊ฐ๋ฐ์๋ก ์ด๋ฆ์ ๋ ๋ ธ๋ค.
- Proxy์ Reflect ์ด๋๋ค ์ฐ๋?Proxy์ Reflect๋ ES6์์ ์ถ๊ฐ๋ ๊ธฐ๋ฅ์ด๋ค. Proxy๋ ๊ฐ์ฒด์ ๊ธฐ๋ณธ ๋์์ ๊ฐ๋ก์ฑ๋ ๊ธฐ๋ฅ์ ์ ๊ณตํ๊ณ , Reflect๋ ๊ฐ์ฒด์ ๊ธฐ๋ณธ ๋์์ ๋์ ํ๋ ๋ฉ์๋๋ฅผ ์ ๊ณตํ๋ค. ์์๋ฅผ ํตํด ์์๋ณด์.
- Fly Me To The Moon
- React Compiler, ์ด๋ป๊ฒ ๋์ํ ๊น [4] - SSA๋ณํ(์ด๋ก ๊ณผ ๊ตฌํ)React Compiler์ SSA ๋ณํ์ ๋ํด ์์๋ณด์. SSA๋ Static Single Assignment์ ์ฝ์๋ก, ์ต์ ํ๋ฅผ ์ํด ์ฌ์ฉ๋๋ ์ค๊ฐ ํํ ์ค ํ๋์ ๋๋ค. SSA๋ ๋ณ์๊ฐ ํ ๋ฒ๋ง ๋์ ๋๋๋ก ์ ํํ๋ ํน์ง์ด ์์ต๋๋ค. SSA ๋ณํ ์๊ณ ๋ฆฌ์ฆ์ ํต์ฌ์ phiํจ์๋ฅผ ์ด๋์ ๋์์ง๋ฅผ ๊ฒฐ์ ํ๋ ๊ฒ์ ๋๋ค. React Compiler์ ๊ฒฝ์ฐ ์ด๋ค ์๊ณ ๋ฆฌ์ฆ์ ์ฌ์ฉํ๊ณ ์์๊น์?
- ๋ฐํ
- React Compiler, ์ด๋ป๊ฒ ๋์ํ ๊น [3] - HIR๋ก ๋ณํ (Lowering)React Compiler์ Lowering ๊ณผ์ ์ ์ดํด๋ณด์. AST๋ฅผ HIR๋ก ๋ณํํ๋ ๊ณผ์ ์ด๋ค.
- React Compiler, ์ด๋ป๊ฒ ๋์ํ ๊น [2] - useMemoCacheReact Compiler์ ์ฃผ์ ๊ตฌ์ฑ ์์ ์ค ํ๋์ธ useMemoCache์ ๋ํด ๊น๊ฒ ์์๋ณด์, useMemoCache์ ๋์ ์๋ฆฌ์, ๊ตฌํ์ ์ดํด๋ณด๊ณ , ์คํ์ ์ธ ๊ธฐ๋ฅ์ธ enableNoCloningMemoCache์ ๋ํด ์์๋ณด์.
- React Compiler, ์ด๋ป๊ฒ ๋์ํ ๊น [1] - ๋ฐ๋ฒจ ํ๋ฌ๊ทธ์ธ์ ํตํ ์ง์ ์ React Compiler์ ๋ํด ๊น์ด ํํค์ณ๋ณด๊ณ ์ ํ๋ค. ์ฐ์ ์ ๋ฐ๋ฒจ ํ๋ฌ๊ทธ์ธ์ ํตํด ์ปดํ์ผ๋ฌ์ ์ง์ ์ ์ ์ดํด๋ณด์.
- React Conf 2024 ํ๋ฃจ ์ ์ํ๋๊ณผ ์ฐํธ์ธ์์์ ์ผ์์ ๋จผ์ ์ ์ผ๋ ค๋ค๊ฐ, ์ด๋์ ๋ฒ ๊ฐ์ค ๊น์ง ์ค๊ฒ ๋์๋ค. ๋ณธ๋ ๋ชฉ์ ์ง์๋ ๋ผ์ค๋ฒ ์ด๊ฑฐ์ค, React Conf 2024๊ฐ ์ด๋ฆฌ๋ ๊ณณ์ด๋ค. 3๋ ๋ง์ ์ด๋ฆฌ๋ ๊ฒ์ด๋ผ ๊ทธ๋ฐ์ง ์ฐธ์์๋ค์ด ๋ง๋ค. ๊ณตํญ์์ ๋ฆฌ์กฐํธ ๊น์ง๋ ๊ฑฐ๋ฆฌ๊ฐ ๊ฝค ์๋์ง๋ผ ์ปจํผ๋ฐ์ค ๋์ค์ฝ๋์์ ๊ฐ์ด ํ ์ฌ๋์ ๊ตฌํ๊ธฐ๋ก ํ๋ค.
- ํ๋ก์ํ๋ฒ์จ 3์ผ์ฐจ๊ฐ ๋์ด๊ฐ๋ค. ํ๊ตญ์ ์ผ์์ผ์ด ๋๋ฌ์ง๋ง, ์ฌ๊ธด ์ด์ ์ผ์์ผ์ ์์ํ ์ค์ 10์์ฏค ์ด๋ค. ๋งค์ผ๋งค์ผ ์๊ธฐ์ ์ ๊ธฐ๋ก์ ๋จ๊ฒจ๋๊ณ ์ ํ์๋๋ฐ, ์์ฐจ์ ์๋ฌ๋ฆฌ๋ฉฐ ์ดฌ์ํ๊ฒ๋ค ์ ๋ฆฌํ๊ณ , ๊ธด์ฅ์ด ํ๋ ค ์ป๊ณ ๋๋ ์ ๋ค๊ฒ ๋์๋ค.
- ๋นํ๊ธฐ ์์์๊ณ ๋ 33,000ํผํธ ํํ์ ์๊ณต ์ด๋๊ฐ์์ ์์ดํ์ด๋ฅผ ์ธ ์ ์์ ์ค ๋ชฐ๋๋ค. ์๋ฉ ์คํ๋ผ์ธ ์ ์ฅ ํด์จ ์ ํ๋ธ ์์๋ค์ด ๋ฌด์ํด์ก๋ค. ๋นํ์ค์ ์ปค๋ฐ ํ์ค ๋จ๊ฒจ๋ณด๊ณ ์ ๊ธ์ ์จ๋ณด๊ณ ์๋ค.
- ์ถ๊ตญ์ค๋์ ์ถ๊ตญ์ผ์ด๋ค. React Conf๋ฅผ ๋ณด๋ฌ ๋ฏธ๊ตญ์ผ๋ก ๊ฐ๋ค. ์ด์ ๋ฌด์ฌํ PR์ ๋จธ์งํ๊ณ ๋ฐฐํฌ๋ ์๋ฃํ์ผ๋, ๋จธ๋ฆฌ๋ ๊ฐ๋ฒผ์ด๋ฐ, ๋ฌธ์ ๊ฐ ์์๊น ๋ง์์ ๋ฌด๊ฒ๋ค ํฐ ์ผ์ ์ด ์๋ ํ ์ฐ์ฐจ๋ฅผ ์ ์ฐ์ง ์์๋ ํธ์ด๋ผ ์ฌํด ์ฒซ ์ฐ์ฐจ์ด๊ธฐ๋ ํ๊ณ , ๋ณธ๋ FOMO๊ฐ ์ฌํ ํธ์ด๋ผ, ๋ญ๊ฐ ๋์น๋ ๊ฒ์ด ์์๊น ๊ฑฑ์ ์ด๋ค. ์ผ๋ก ๋ถํฐ ์ ๋จ์ด์ ธ ํ๋ณตํ๊ณ ์ค๋ ๊ฒ๋ ํจ์จ์ ์ธ ๊ฐ๋ฐ์์ด๊ฒ ์ง...
- useActionState (form ์ด ๋ญ๊น 2)React์๋ form action์ด๋ผ๋์ง useFormState, useFormStatus ๊ฐ์ ํผ์ ๊ด๋ จ๋ hook์ด ์๋ค. ์ด๋ฐ ํ ๋ค์ ์ด๋ค ๋์์ ํ๋ ๊ฒ์ธ์ง ์ดํด๋ณด๊ณ ์ ํ๋ค. useActionState ๋น๋๊ธฐ ์ก์ ์ ์ฒ๋ฆฌํ๊ธฐ ์ํ ํ ์ด๋ค. useFormState์ ๋ํด์ ์ดํด๋ณด๊ณ ์์๋๋ฐ, useActionState๋ผ๋ ์ด๋ฆ์ผ๋ก ๋ณ๊ฒฝ๋์๋ค.
- form ์ด ๋ญ๊น๋จผ์ form์ด ๋ฌด์์ธ๊ฐ? ๋๊ตฐ๊ฐ ์ด ์ง๋ฌธ์ ๋์ง๋ค๋ฉด ๋ญ๋ผ๊ณ ๋ตํ ๊ฒ์ธ๊ฐ? Hypertext Markup Language - 2.0 ์ ๋ฐ๋ฅด๋ฉด form์ ๋ค์๊ณผ ๊ฐ์ด ์ ์๋๋ค. A form is a template for a form data set and an associated method and action URI.
- ๋จ์ํจ์ด ๊ฐ์ฅ ์ด๋ ค์ด ๊ฒ์๋์ ๋ถ์ฌ๋ ์์์ด๋ค. ์ผ๋ก ๋จธ์คํฌ๊ฐ ์คํ์ฝ ๊ด๋ จํด์ ๊ณํ์ ์ด์ผ๊ธฐํ๋ ์์์ด๋ค. ์ฌํด์์ 6๊ฐ์ ๋ถ์คํฐ์ ์คํ์ฝ์ ๊ฑด์กฐํ๊ณ , ๋ด๋ ๊น์ง ๊ณต์ค์์ ๊ธฐ์ฒด๋ฅผ ์ก๋ '๋ฉ์นด์ง๋ผ' ๋ฐ์ฌ๋๋ ๋ค๊ฐ๋ ๊ฑด์คํ ๊ณํ์ด๋ผ๊ณ ํ๋ค.
- 2024_1๋ถ๊ธฐ์ ๋ง ๋น ๋ฅด๊ฒ 1๋ถ๊ธฐ๊ฐ ํ๋ฌ๊ฐ๋ค. #์ด๋ ์๋ 1์ ๋ถํฐ ์์ํ f45๋ฅผ 1๋ ๊ฐ๊น์ด ๋ค๋๋ค ์ ์ ์ฌ์๋ค. ์ด๋์ ์ฆ๊ฒจํ๋ ํ์ ์ ์๋์์ด์, ํญ์ ๊ฐ์ ์ฑ์ด ๋๋ฐ๋ ์ด๋์ ํ์์๋๋ฐ, ๋ง์นจ ์ ์ฐ์, ๊ทผ๋ ฅ ์ ์ ํ ์์ธ f45๊ฐ ๋์๊ฒ ์ ๋ง์๋ค.
- ๊ธ์ ๋ฌธ์ ๋ฅผ ๋ง๋ฅ๋จ๋ฆฌ๊ณ , ๊ทธ๊ฒ๋ค์ ํด๊ฒฐํ๋ ์ผ์ ํ๋ค. '๋ฌธ์ '๋ฅผ ๊ณ์ ๋ง์ฃผํ๊ฒ ๋๋ฉด, ๋ถ์ ์ ๊ธฐ์ด์ ๋๋ฌ์์ด๊ธฐ ๋ง๋ จ์ด๋ค. ๋ถ์ ์ ์ธ ๊ฐ์ ์ ์ฃผ๋ณ์ ๋๋ฌด ์ฝ๊ฒ ์ค์ผ์ํจ๋ค. ๊ธ์ ์ ์ธ ๊ธฐ์ด์ ์ฃผ๋ ์ฌ๋์ด ๋์.
- text-wrap balance ๊ทธ ๋ฟ๋ฆฌ๋ฅผ ์ฐพ์์ [1]`text-wrap: balance` ์์ง ๋ค์ด๋ณด์ง ๋ชปํ ์ฌ๋๋ค๋ ์๊ฒ ์ง๋ง, ์์ ๊ตฌ๊ธ ๋ฌธ์์์ ์ดํด๋ณผ ์ ์๋ ๊ฒ ์ฒ๋ผ ํฌ๋กฌ 114๋ฒ์ ๋ถํฐ ์ง์๋ [CSS Text Level4](https://www.w3.org/TR/css-text-4/#text-wrap)์ ์ํ๋ CSS ์์ฑ์ด๋ค.
- HTML element attributes ์ ๋ํด ์์๋ณด์์ ๋ฐํ์ ๋ด์ฉ์ ์ผ๋ถ๋ฅผ ๋ณด์ถฉํด์ ์ ๋ฆฌํด๋ณด์๋ค. React.HTMLAttributes<HTMLButtonElement>, React.HTMLProps<HTMLButtonElement>, JSX.IntrinsicElements['button'], React.ButtonHTMLAttributes<HTMLButtonElement>
- ๊ฑธ์ด์ ์ ๊ทํํ์ ๊น์ง [์ ํ์คํ ๋งํ]์์์ ์ ๊ทํํ์์ ๋ํ ๊ถ๊ธ์ฆ์์ ์์๋๋ค. ์ ๊ทํํ์์ ํฌ๋ํฐ ์๊ฐ์์ด ์ฌ์ฉํ๋ค๊ฐ, ์ด๊ฒ ๋ฌด์์ด๊ธธ๋? ์ฌ๋ฌ ์ธ์ด๋ค์์ ํต์ฉ๋๊ณ ์๋๊ฒ์ผ๊น? ๋ผ๋ ์๊ฐ์ด ๋ค์๋ค.
- ์ฌ๊ฐํ๋๋ฏธ๋์ ๋ ๋๋ฉํ์ด์ง๊ฐ ๋๋ฌด ๋ง์๋ค์ด์ ๋ฌด์จ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ผ๋ ์ฐพ์๋ณด๋ค๊ฐ. ํด๋ก๋ํ ์์์ ์ฐพ๊ฒ๋์๋ค.์ด๋ถ ์์ ์ ๋ณด๋๊น ์ฝ๋์์ด ๊ทธ๋ฆฌ ๋ง์ง๋ ์์์, ๋๋ ํ๋ฒ ํด๋ก๋์ ํด๋ณด์๋ค. ํธ๋์คํผ ๋ก์ง๋ง ์กฐ๊ธ ๋ถ๋ฆฌํด๋ด์ ํ์ดํ๋ผ์ธํํ๋ก ๋ฃ์ ์ ์๊ฒ ๋ง๋ค์๋ค. ๋ง๋ ๋ค lit element๋ก ์ ๋ง์์ฃผ์๋ค.
- ์ด๋ป๊ฒ ๋ฌธ์ ๋ฅผ ํ ๊ฒ์ธ๊ฐ?์ค์ ์ง์ ๋ค๋ ธ๋ค๊ฐ ๊ณ ๋ฑํ๊ต 2ํ๋ ๋ ์ฆ์์ธ๊ฐ ์ฌ๋์๋ ์ฑ ์ ๋ฐ๊ฒฌํ๋ค. ๊ตญ๋ฌธ์ผ๋ก๋ `์ด๋ป๊ฒ ๋ฌธ์ ๋ฅผ ํ ๊ฒ์ธ๊ฐ? - ์ํ์ ์ฌ๊ณ ๋ฐฉ๋ฒ -` ๋ผ๋ ์ฑ ์ด๋ค. ์๋ง ๊ธฐ์ตํ๊ธฐ๋ก๋ Calculus ๋ฐ์ด์ฌ๋ฆฐ ์ฑ ์ ์ฌ์ผํด์ ๊ต์ฐ์ฌ ํํ์ด์ง๋ฅผ ๋ค์ด๊ฐ๋ค๊ฐ ๋ฐ๊ฒฌํ๋ ๊ฒ ๊ฐ๋ค.
- Axios ์์ฒญ์ Cancelํด๋ณด์ [2]cancelToken์ด ์์ฒญ์ config๋ก ๋ค์ด๊ฐ ๋, ์ด๋ป๊ฒ subscribe ๋๋์ง๋ฅผ ์์๋ณด์๋ค. ์ด๋ฒ์๋ CancelToken์ ๊ตฌํ๊ณผ ํจ๊ป, ์ด๋ป๊ฒ ์ง์ ์ ์ผ๋ก cancel๋๋ ๊ฒ์ธ์ง๋ฅผ ์์๋ณด์. ๋จผ์ CancelToken์ ๊ตฌํ์ฒด๋ฅผ ์ดํด๋ณด์.
- Axios ์์ฒญ์ Cancelํด๋ณด์ [1]Axios ์์ฒญ์ Cancelํด๋ณด์. axios ์์ฒญ์ ๋ณด๋ผ ๋ cancelToken์ ๋๊ฒจ์ฃผ๋ฉด ์ทจ์ํ ์ ์๋ค. cancelToken์ ๋๊ธฐ๋ฉด ์ด๋๋ก ํ๋ฌ๊ฐ๊น?
- ๋ธ๋ก๊ทธ์ ๋ฏธ๋๋ด์ผ (ํ ์์ผ) ๋ฐค์ ์๋น์ค ์ ๊ฒ์ด ์์ ์์ ์ด๋ผ ํ์ฌ์์ ์๋ฒฝ์ ๋ณด๋ด์ผํด.. ๋ฆฌ๋ฌ์ ๋ง์ถฐ๋๊ธฐ ์ํด ์ ์ ์๊น ๋ง๊น ๊ณ ๋ฏผ์ด๋ค. ๊ทธ์น๋ง ์์ผ๊ฒ ์ง. ๊ทธ๋์ผ ๋ด์ผ ์ผ์ ํ ์ ์์ผ๋๊น. ๋ธ๋ก๊ทธ๋ฅผ ๋ง๋ ์ด์ ๋, ๊ณต๋ถํ ๊ฒ์ ์ฌ๋ฆฌ๊ธฐ ์ํ ์ฉ๋๋ ์์ง๋ง,
- ๋ด๊ฐ ๊ถ๊ธํ ๊ฒ๋ค์ ๋ํ ๊ธฐ๋ก์ง์์ ๋ง์คํฐ์น๊ฐ ํ๋ ์๋๋ฐ, ์ธ์ ๊ฐ ์ด๋์ ๋ง์คํฐ์น์ ๋งค์ฝค ๊น๋ก๋ง์ด ๊ทธ๋ฆฌ ๋ง์๋ค๋ ์ด์ผ๊ธฐ๋ฅผ ๋ค์๋ค. ๋ฌด์จ ๋ง์ผ๊น? ์น ๋ฆฌ ์์ค๊ฐ ๋ค์ด๊ฐ ๊ฒ์ผ๊น? ์๋๋ฉด ๊ทธ๋ฅ ๋งค์ฝคํ ๋ง์ธ๊ฐ? ์ถํด๊ทผ ๊ทธ ์์ ์ง๋๊ฐ ๋๋ง๋ค, ์ ์ค๋์ ๋จน์ด๋ด์ผ์ง ํ๊ณ ์๊ฐ๋ง ํ๋ค๊ฐ ๋งค๋ฒ ๋์น๊ณ ์ง๋๊ฐ๋ค.
- ์๋ฒ์์ styled ์ปดํฌ๋ํธ ์ฌ์ฉํ๊ธฐ(๋ถ์ : React.cache)์ ๋ชฉ์ ์ด๋ฐ๋ฐ, ์ฌ์ค ์ฐ styled-components๋ฅผ ์ฌ์ฉํ๋ ๋ด์ฉ์ ์๋๋ค. [dream-css-tool](https://github.com/joshwcomeau/dream-css-tool)๋ผ๋ ์๋๋ฅผ ํ๊ณ ๊ณ์ ๋ถ์ ๋ฐ๊ฒฌํ๋ค. styled ๊ฐ์ ๋ฐฉ์์ผ๋ก ์๋ฒ์ปดํฌ๋ํธ์์๋ ๋์ํ๊ฒ๋ ๋ง๋๋ ์๋๋ฅผ ํ๊ณ ์์๋ค. ์ฐ์ ์ฌ์ฉ๋ฒ ๋ถํฐ ๋ณด์. ์๋์ ๊ฐ์ด ์ฌ์ฉํ ์ ์๋ค.
- ๋ถ์ด๋นต์ง์์ ๋ถ์ด๋นต ํฌ์ฅ๋ง์ฐจ๊ฐ ํ๋ ์๋๋ฐ ๊ฐ๊ฒฉ์ด ํ๋ง๋ฆฌ์ 1,000์์ด๋ค. ๊ทธ์ ๋ง๋ ์ปดํฌ๋ํธ๋ฅผ ์ ๋ฆฌํด๋ณด์ ์ฒ์์ YouTube ์๋ฒ ๋๋ฅผ ์ํด ์ ๋นํ ๋ํํด์ ์ฐ๋ lit ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค์์๋ค. ์ ํ๋ธ ๋งํฌ๋ฅผ ๋ฐ์ src์ ์บก์ ์ ๋ฐ๊ธฐ์ํ caption,์ด ๋ ๊ฐ์ ํ๋กํผํฐ๋ฅผ ๋ฐ๋๋ค.
- ์ค๋ฐ๋ฐ๋ฅด_1์ ๋ฉ๋ฆฌ ๋ ธ๋ฅด์จ์ด์ ๋ถ๊ทน์ ์ฌ์ด ์ค๋ฐ๋ฐ๋ฅด ์ ๋ ๋ผ๋ ๊ณณ์ด ์๋ค. ์ธ์ ๊ฐ ๊ทธ๊ณณ์ ๊ฐ์ผ๊ฒ ๋ค๋ผ๋ ๋ค์ง์ ํ๊ณ ์ด๊ณ ์๋ค. ๋์ด ์์ธ ๋ ๋ค์ ์ฐธ ์ข์ํ๋ค. ํ์ ์บ๋ฒ์ค ๊ฐ์ ๋๋๋ ์๊ณ , ๋ฉ๋ฆฌ์ ๋ฐ๋ผ๋ณผ๋ ๊นจ๋ํด ๋ณด์ฌ์ ์ข๋ค. ๋์ด ๋ฌด๋ฆ๊น์ง ์์ฌ์ ๊ฑท๊ธฐ ํ๋ ๋ ๋ค์ ์์ํด๋ณด๊ณค ํ๋๋ฐ, ์์ง๊น์ง ๊ทธ๋ฐ ๋ ๋ค์ ์์๋ค. ๊ทธ๋ฐ ๊ณณ์ ๊ฐ์ง ๋ชปํ๊ธฐ ๋๋ฌธ์ด๊ฒ ์ง.
- ๋ธ๋ก๊ทธ[Astro 4.0](https://astro.build/blog/astro-4/)์ด ๋ฆด๋ฆฌ์ฆ ๋์๋ค๋ ์์์ ๋ค์๋ค. ๋ธ๋ก๊ทธ๋ ์ ๋ฐ์ดํธ ํ ๊ฒธ ๊ฒธ์ฌ๊ฒธ์ฌ ์ ๋ฐ์ดํธ๋ฅผ ํ๋ค. ์์ผ๋๋ ์ํคํ ์ณ.. ๊ธฐํ ... ๋ฑ๋ฑ.. Astro๊ฐ ๊ฐ์ง ์ฅ์ ๋ค์ ๋ํด์๋ ๊น๊ฒ ํ์ ํ๊ณ ์ ํํ ๊ฒ์ ์๋์๋ค.
2023
- 2023๋ _ํ๊ณ์ฌํด ๋ด ์๋ฐ๊ธฐ ๊ทธ๋ฆฌ๊ณ ์ ๋ฐ์ ํ๋ฐ๊ธฐ๋ฅผ ๊ฐ๋ ์ฑ์ ๋ ๋ง์ด๋ธ๋ฆฟ์ง. ๋ง์ด๋ธ๋ฆฟ์ง๋ ์ผ๋ณธ์์ ์ด์ํ๊ณ ์๋ ๋ฆฌ๋ฉค๋ฒ์ ์ผ๋ณธ ๋ฒ์ ์ธ ๋ช ํจ ๊ด๋ฆฌ ์๋น์ค์ด๋ค. ๋ฆฌ๋ฉค๋ฒ์์ 2๋ ์งธ ์ ์ด๋๋ ์์ ๊ทธ๋ฆฌ๊ณ 2023๋ ์ ์์๊ณผ ํจ๊ป ์ ์ฌ์ Crew๋ผ๋ ์๋ก์ด ์กฐ์ง์ด ๋ง๋ค์ด์ก๊ณ , 6์ ์ด๋ฅผ ๋ชฉํ๋ก ๊ธฐ์กด์ ์ผ๋ณธ์์ ๋ฌด๋ฃ๋ก ์ด์ํ๋ ๋ง์ด๋ธ๋ฆฟ์ง์ ์ ๋ฃํ ํ๋ ์์ ์ด ์์๋์๋ค.
- Top Layer ์ ๋๋ฉ์ด์ ๋ชจ๋ ์๋ฆฌ๋จผํธ ์์ ๋๋๋ง ๋๋ ์๋ฆฌ๋จผํธ ์ง์๋๋ ์๋ฆฌ๋จผํธ `<dialog>` popover์์ฑ `<div popover=auto>` ๋ชฉํ๋ ์ด ์๋ฆฌ๋จผํธ๋ค์ animatable ํ๊ฒ ๋ง๋๋ ๊ฒ