๐ช Programming
[CSS] ์์ ๋งฅ๋ฝ Stacking Context
[CSS] ์์ ๋งฅ๋ฝ Stacking Context
2025.02.26TL;DR๊ธฐ๋ณธ์ ์ผ๋ก ์์๋ค์ DOM ์์์ ๋ฐ๋ผ ์์ธ๋ค.positioned(position ≠ static) ์์๋ non-positioned(position = static) ์์๋ณด๋ค ์์ ์์ธ๋ค.positioned ์์๋ค ์ค z-index ๊ฐ์ด ๋์์๋ก ์์ ์์ธ๋ค.์๋ก์ด ์์ ๋งฅ๋ฝ์ด ์์ฑ๋๋ฉด ์์ ์์๋ ํด๋น ๋งฅ๋ฝ ์์์ ์์๊ฐ ๊ฒฐ์ ๋๋ค. ์ค๋ช
์์ ๋งฅ๋ฝ(Stacking Context)์ HTML ์์๋ค์ ๊ฐ์์ z์ถ(๊น์ด) ๋ฐฉํฅ์ผ๋ก ๋ฐฐ์นํ๋ ๊ฐ๋
์ด๋ค. ๊ธฐ๋ณธ์ ์ผ๋ก ์์๋ค์ DOM ์์์ ๋ฐ๋ผ ์์ธ๋ค. ์ฆ, ๋ค์ ์ ์ํ ์์์ผ์๋ก ํ๋ฉด์์ ์์ ์์นํ๋ค. position์ ์ ์ฉํ ์์(positioned)๋ position์ ์ ์ฉํ์ง ์์ ์์(non-positioned)๋ณด๋ค ์์ ์์ธ๋ค. posit..
[React] ๋ฆฌ์กํธ 19 ์
๋ฐ์ดํธ ๋ด์ฉ ํบ์๋ณด๊ธฐ
[React] ๋ฆฌ์กํธ 19 ์ ๋ฐ์ดํธ ๋ด์ฉ ํบ์๋ณด๊ธฐ
2025.02.082024๋
12์ React 19์ stable ๋ฒ์ ์ด ์ถ์๋๋ค. ๋ฆฌ์กํธ ๊ณต์ ๋ธ๋ก๊ทธ๋ฅผ ์ฐธ๊ณ ํด์ React 19์ ์ฃผ์ ๋ณ๊ฒฝ ์ฌํญ์ ์ ๋ฆฌํด ๋ดค๋ค. ์๋กญ๊ฒ ์ ๋ณด์ธ ํ
์ ๊ฐ์ข
๋ฌธ์์ ์์ ๋ฅผ ์ฐธ๊ณ ํด์ ์ดํดํ๊ธฐ ์ฝ๋๋ก ๋ถ์ฐ ์ค๋ช
์ ๋ง๋ถ์๋ค. ๊ณต์๋ฌธ์์ ๊ธฐ์กด ์ฌ์ฉ์๋ฅผ ์ํ ๋ง์ด๊ทธ๋ ์ด์
๊ฐ์ด๋๋ ์์ธํ๊ฒ ๋์์์ผ๋ ์ฐธ๊ณ ํ์. useTransitionuseTransition์ ์ฃผ๋ก ๋ฌด๊ฑฐ์ด ์์
์ ์ํ ์
๋ฐ์ดํธ๋ฅผ ๋ฎ์ ์ฐ์ ์์๋ก ์ง์ ํ์ฌ UI ๋ธ๋กํน์ ๋ฐฉ์งํ ๋ ์ฌ์ฉํ๋ค. React 18 ๋ฒ์ ๊น์ง startTransition ์ฝ๋ฐฑ์ ํญ์ ๋๊ธฐ์ ์ด์ด์ผ ํ๋ ์ ์ฝ์ด ์์๋ค. ๋๋ฌธ์ ์ฝ๋ฐฑ ์์์ ๋น๋๊ธฐ ํธ์ถ ๊ฐ์ ์์
์ ์ํํ ์ ์์๋ค. React 19๋ถํด startTransition ์ฝ๋ฐฑ ์์์ ๋น๋๊ธฐ ์ฒ๋ฆฌ๋ ๊ฐ๋ฅํด์ก..
[Next.js] Dynamic Routes ๋ค์ด๋๋ฏน ๋ผ์ฐํธ
[Next.js] Dynamic Routes ๋ค์ด๋๋ฏน ๋ผ์ฐํธ
2025.01.31TL;DR[slug] : ๋จ์ผ ๊ฒฝ๋ก ์ธ๊ทธ๋จผํธ ํฌ์ฐฉ[...slug] : ๋ค์ค ๊ฒฝ๋ก ์ธ๊ทธ๋จผํธ ํฌ์ฐฉ(Catch-All)[[...slug]] : ๋ฃจํธ ๊ฒฝ๋ก๋ฅผ ํฌํจํ ๋ชจ๋ ๊ฒฝ๋ก๋ฅผ ์ ํ์ ์ผ๋ก ํฌ์ฐฉ(Optional Catch-All) Dynamic Segments์ ํํ ์ธ๊ทธ๋จผํธ ์ด๋ฆ์ ๋ฏธ๋ฆฌ ์ ์ ์์ ๋ ํด๋ ์ด๋ฆ์ ๋๊ดํธ๋ก ๊ฐ์ธ๋ฉด ๋ค์ด๋๋ฏน ์ธ๊ทธ๋จผํธ๋ก ์๋. ์ธ๊ทธ๋จผํธ ์ด๋ฆ์ layout, page ๋๋ route ํ์ผ์์ params ํ๋กญ์ผ๋ก ๊ฐ ์กฐํ ๊ฐ๋ฅ. RouteURL ExampleParamsapp/blog/[slug]/page.js/blog/a{ slug: 'a' }app/blog/[slug]/page.js/blog/b{ slug: 'b' }๋ฃจํธ ๊ฒฝ๋ก(blog/)์ ํ์ด์ง ์์ผ๋ฉด ์ ๊ทผ ๋ถ๊ฐ. Catch-..
[Next.js] App Router ๊ณต์ ํํ ๋ฆฌ์ผ ํบ์๋ณด๊ธฐ
[Next.js] App Router ๊ณต์ ํํ ๋ฆฌ์ผ ํบ์๋ณด๊ธฐ
2025.01.30Next.js์์ ์ ๊ณตํ๋ Learn Next.js App Router ํํ ๋ฆฌ์ผ์ ๋ถ์ฐ ์ค๋ช
๊ณผ ํจ๊ป ํ๊ตญ์ด๋ก ์ ๋ฆฌํด ๋ดค๋ค. ๊ณต์ ๊ฐ์ด๋๋ ์ด 16๊ฐ ์ฑํฐ๋ก ๊ตฌ์ฑ๋์ด ์์ง๋ง, ์ด๋ฒ ํฌ์คํ
์์ ํ๋ก์ ํธ ์ธํ
์ ๋ค๋ฃจ๋ ์ฑํฐ 1๊ณผ CSS ์คํ์ผ๋ง ๋ฐฉ๋ฒ์ ์ค๋ช
ํ๋ ์ฑํฐ 2๋ ์๋ตํ๋ค. Optimizing Fonts and ImagesCumulative Layout Shift(CLS, ๋์ ๋ ์ด์์ ์ด๋)๋ ๊ตฌ๊ธ์ด ์น์ฌ์ดํธ์ ์ฑ๋ฅ๊ณผ ์ฌ์ฉ์ ๊ฒฝํ์ ํ๊ฐํ๋ ๋ฐ ์ฌ์ฉํ๋ ์งํ๋ก, ํ์ด์ง ๋ก๋ ์ค ๋ ์ด์์ ์ด๋์ผ๋ก ์ธํด ๋ฐ์ํ๋ ์ฌ์ฉ์ ๊ฒฝํ์ ๋ถํธํจ์ ์ธก์ ํ๋ค. ์๋ฅผ ๋ค์ด, ๋ธ๋ผ์ฐ์ ๊ฐ ํด๋ฐฑ(fallback) ํฐํธ๋ ์์คํ
ํฐํธ๋ก ํ
์คํธ๋ฅผ ๋จผ์ ๋ ๋๋ง ํ ๋ค ์ฌ์ฉ์ ์ง์ ํฐํธ๋ก ๊ต์ฒดํ ๋ ํ
์คํธ ํฌ๊ธฐ, ๊ฐ๊ฒฉ ๋๋ ๋ ์ด์..
[Dev] ์๋งจํฑ ๋ฒ์ ๋ Semantic Versioning
[Dev] ์๋งจํฑ ๋ฒ์ ๋ Semantic Versioning
2025.01.27์ํํธ์จ์ด์ ๋ฒ์ ์ ์ผ๋ฐ์ ์ผ๋ก 20.12.2 ๊ฐ์ ํ์์ผ๋ก ํ๊ธฐํ๋ค. ์ด๋ ์ํํธ์จ์ด ๋ฒ์ ๋ฒํธ๋ฅผ ๊ด๋ฆฌํ๋ ์๋งจํฑ ๋ฒ์ ๋(Semantic Versioning)์ด๋ผ๋ ๊ท์น์ ๋ฐ๋ฅธ ๊ฒ์ผ๋ก, ๋ฉ์ด์ .๋ง์ด๋.ํจ์น ํ์์ผ๋ก ๊ตฌ์ฑ๋์ด ๊ฐ ์ซ์๊ฐ ํน์ ํ ์๋ฏธ๋ฅผ ๊ฐ์ง๋ค.Semantic Versioning์ ์ค์ฌ์ SemVer๋ผ๊ณ ๋ ๋ถ๋ฆฐ๋ค. ๋ฉ์ด์ ๋ฒ์ ์ ํธํ์ฑ์ ์ํฅ์ ๋ฏธ์น๋ ํฐ ๋ณํ๊ฐ ์์ ๋ ์ฆ๊ฐํ๋ฉฐ, ๋ง์ด๋ ๋ฒ์ ์ ํธํ์ฑ์ ์ ์งํ๋ฉด์ ์๋ก์ด ๊ธฐ๋ฅ์ด ์ถ๊ฐ๋ ๋ ์ฆ๊ฐํ๋ค. ํจ์น ๋ฒ์ ์ ์ฃผ๋ก ๋ฒ๊ทธ ์์ ์ด๋ ์ฑ๋ฅ ๊ฐ์ ๊ณผ ๊ฐ์ ์์ ๋ณ๊ฒฝ ์ฌํญ์ ๋ํ๋ธ๋ค. ์ด๋ฌํ ๋ฒ์ ๊ด๋ฆฌ ๋ฐฉ์์ ์ํํธ์จ์ด์ ๋ณ๊ฒฝ ์ฌํญ์ ์ฒด๊ณ์ ์ผ๋ก ์ ๋ฌํ๋ ๋ฐ ์ค์ํ ์ญํ ์ ํ๋ค. ์๋งจํฑ ๋ฒ์ ๋: ์ํํธ์จ์ด์ ๋ฒ์ ๋ฒํธ๋ฅผ ์ฒด๊ณ์ ์ผ๋ก ๊ด๋ฆฌํ๋ ๋ฐฉ๋ฒ์ผ๋ก, ..
[React] ๋ฆฌ์กํธ์ ์ฌ๋ฐ๋ฅธ useEffect ์ฌ์ฉํ
[React] ๋ฆฌ์กํธ์ ์ฌ๋ฐ๋ฅธ useEffect ์ฌ์ฉํ
2025.01.21๋ฆฌ์กํธ์ useEffect๋ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ, ๊ตฌ๋
๊ด๋ฆฌ, DOM ์
๋ฐ์ดํธ, ์ฌ์ด๋ ์ดํํธ ์ฒ๋ฆฌ ๋ฑ ๋ค์ํ ์์
์ ์ฌ์ฉ๋๋ค. ๊ทธ๋ฌ๋ useEffect๋ฅผ ๊ณผ๋ํ๊ฒ ์ฌ์ฉํ๋ฉด ์ฑ๋ฅ ์ ํ, ๋ถํ์ํ ๋ ๋๋ง, ๋๋ฒ๊น
์ ๋ณต์ก์ฑ ๊ฐ์ ๋ฌธ์ ๊ฐ ๋ฐ์ํ ์ ์๋ค. "Leave useEffect Alone!" ๋ผ๋ ๊ฐ์ด๋ ๊ธ์ ์ฐธ๊ณ ํ์ฌ ์ฌ๋ฐ๋ฅธ useEffect ์ฌ์ฉ๋ฒ์ ๋ํ ์ถ๊ฐ ์ค๋ช
์ ๋ง๋ถ์ฌ์ ์ ๋ฆฌํด ๋ดค๋ค. ๊ฒฝ์ ์ํ(Race Condition) โญ๊ฒฝ์ ์ํ๋ ์ฌ๋ฌ ๋น๋๊ธฐ ์์
์ด ๋์์ ์คํ๋ ๋, ์คํ ์์๋ ๊ฒฐ๊ณผ๊ฐ ์์ธกํ์ง ์์ ๋ฐฉ์์ผ๋ก ์๋ํ๋ ํ์์ ๊ฐ๋ฆฌํจ๋ค. ์๋ ์ฝ๋์์ ๋ฒํผ์ ์ฌ๋ฌ ๋ฒ ํด๋ฆญํ๋ฉด counter ๊ฐ์ด ์ฆ๊ฐํ๊ณ , ๊ฐ ์์ฒญ์ ๋๋คํ ์๊ฐ๋งํผ ๋๊ธฐํ ํ response ์ํ๋ฅผ ์
๋ฐ์ดํธํ๋ค. ํ์ง๋ง ์ด..
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋ ์ต์ ํ ๊ธฐ๋ฒ ๋ชจ์
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋ ์ต์ ํ ๊ธฐ๋ฒ ๋ชจ์
2024.12.07"Optimizing Javascript for fun and for profit"๋ผ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ต์ ํ ๊ด๋ จ ๊ธ์ ์์ด ์๋ฌธ๊ณผ ๋ฒ์ญ๋ณธ์ ๋ฐํ์ผ๋ก, ๋ถ๊ฐ์ ์ธ ์ค๋ช
์ ์ถ๊ฐํ๊ณ ์ดํดํ๊ธฐ ์ฌ์ด ์ธ์ด๋ก ์ ๋ฆฌํด ๋ดค๋ค. ์์ ์ฝ๋๋ ์กฐ๊ธ ๋ ๋ค๋ฌ์ด์ ๊ฐ์ ํ๋ค. ๋ฌธ์์ด ๋น๊ต ํผํ๊ธฐ Avoid string comparisons๋ฌธ์์ด ๋น๊ต๋ ๊ฐ ๋ฌธ์๋ฅผ ์์ฐจ์ ์ผ๋ก ๋น๊ตํด์ผ ํ๋ฏ๋ก O(n) ์๊ฐ๋ณต์ก๋๋ฅผ ๊ฐ๋๋ค. ํนํ ๋ฌธ์์ด enum์ ์ฌ์ฉํ๋ ๊ฒ์ ์ฑ๋ฅ ์ต์ ํ ๊ด์ ์์ ํผํด์ผ ํ ํจํด ์ค ํ๋๋ค. ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์์ ์ ์(Integer)๋ ์ผ๋ฐ์ ์ผ๋ก ๊ฐ์ผ๋ก ์ ๋ฌ๋๋ฉฐ, ๋น๊ต ์ฐ์ฐ ์ ๋ฐ๋ก ๊ฐ์ ํ์ธํ ์ ์์ด ๋น ๋ฅด๊ฒ ์ฒ๋ฆฌํ ์ ์๋ค. ๋ฐ๋ฉด ๋ฌธ์์ด์ ๋ฉ๋ชจ๋ฆฌ์ ์ ์ฅ๋ ์์น(ํฌ์ธํฐ)๋ฅผ ์ฐธ์กฐํด ๊ฐ์ ๊ฐ์ ธ์จ ํ ๋น๊ตํ๊ธฐ ๋๋ฌธ์ ..
[Algorithm] ์ฌ๋ผ์ด๋ฉ ์๋์ฐ Sliding Window ์๊ณ ๋ฆฌ์ฆ ํบ์๋ณด๊ธฐ
[Algorithm] ์ฌ๋ผ์ด๋ฉ ์๋์ฐ Sliding Window ์๊ณ ๋ฆฌ์ฆ ํบ์๋ณด๊ธฐ
2024.11.11์ฌ๋ผ์ด๋ฉ ์๋์ฐ ์๊ณ ๋ฆฌ์ฆ ๊ฐ๋
์ฌ๋ผ์ด๋ฉ ์๋์ฐ ์๊ณ ๋ฆฌ์ฆ(Sliding Window Algorithm)์ ๋ฐฐ์ด๊ณผ ๊ฐ์ ์ ํ ์๋ฃ๊ตฌ์กฐ์์ ์ฐ์๋ ๊ตฌ๊ฐ ๋ด์ ๋ฐ์ดํฐ๋ฅผ ํจ์จ์ ์ผ๋ก ์ฒ๋ฆฌํ๊ธฐ ์ํด ์ฌ์ฉํ๋ ๊ธฐ๋ฒ์ด๋ค. ํนํ ๋ฐฐ์ด ๋ด ์ฐ์๋ ์์์ ํฉ, ์ต๋๊ฐ, ์ต์๊ฐ ๋ฑ์ ๊ณ์ฐํ ๋ ์ ์ฉํ๋ค. ์ฌ๋ผ์ด๋ฉ ์๋์ฐ๋ ์ด๋ฆ ๊ทธ๋๋ก ๊ณ ์ /๊ฐ๋ณ ํฌ๊ธฐ์ ๋ฒ์(์๋์ฐ)๋ฅผ ์ด๋(์ฌ๋ผ์ด๋) ์ํค๋ฉด์ ํ์ํ ๊ณ์ฐ์ ๋ฐ๋ณตํ๋ ๋ฐฉ์์ด๋ค. ์ด๋ ์ ์ฒด ๋ฐฐ์ด์ ํ ๋ฒ๋ง ์ํํ๋ฉด ๋๊ธฐ ๋๋ฌธ์ ์ค๋ณต ์ฐ์ฐ์ ํผํ๊ณ ์๊ฐ ๋ณต์ก๋๋ฅผ ๊ฐ์ ํ ์ ์๋ค. ์ผ๋ฐ์ ์ผ๋ก ์ฌ๋ผ์ด๋ฉ ์๋์ฐ ๊ธฐ๋ฒ์ ์ฌ์ฉํ๋ฉด O(n)์ ์๊ฐ ๋ณต์ก๋๋ก ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ์ ์๋ค.// ์ฃผ์ด์ง ๋ฐฐ์ด์์ ์ฐ์๋ k๊ฐ ์์์ ์ต๋ ํฉ์ ์ฐพ๋ ํจ์function maxSumSubarray(arr, k)..
[React] ๋ฆฌ์กํธ ์ฝ๋๋ฅผ ๊ฐ์ ํ ์ ์๋ 4๊ฐ์ง ํ
[React] ๋ฆฌ์กํธ ์ฝ๋๋ฅผ ๊ฐ์ ํ ์ ์๋ 4๊ฐ์ง ํ
2024.10.28TLDR์ด๋ฒคํธ ํธ๋ค๋ฌ์ ์ปค๋ง ํ์ฉ์ปดํฌ๋ํธ ์ฑ
์ ๋ถ๋ฆฌ์กฐ๊ฑด๋ฌธ ๋์ ๊ฐ์ฒด map ์ฌ์ฉReact ๋ผ์ดํ์ฌ์ดํด ์ธ๋ถ์ ๋
๋ฆฝ์ ์ธ ๋ณ์ ๋ฐฐ์น 4 React Tips1. ์ปค๋ง ํ์ฉuser ์ํ๋ name, surname, address 3๊ฐ ์์ฑ์ ๊ฐ์ง๋ฉฐ, ์ด์ ๋์ํ๋ 3๊ฐ์ input ํ๋๊ฐ ํ์ํ๋ค. ์๋ ์ฝ๋์์ ๊ฐ ํ๋๋ฅผ ์ฒ๋ฆฌํ๊ธฐ ์ํด ๋ณ๋์ ํธ๋ค๋ฌ๋ฅผ ๊ฐ๊ฐ ๋ง๋ค์ด์ ์ฌ์ฉํ๊ณ ์์ง๋ง, ์ด ํธ๋ค๋ฌ๋ค์ value๊ฐ ํ ๋ฌ๋ ์์ฑ ์ด๋ฆ๋ง ๋ค๋ฅผ ๋ฟ ๋๋จธ์ง ๋ก์ง์ด ๋์ผํ๊ธฐ ๋๋ฌธ์ ์ฝ๋ ์ค๋ณต์ด ๋ฐ์ํ๊ณ ์๋ค.export default function App() { const [user, setUser] = useState({ name: "", surname: "", address: "", }); co..
[Flutter] ํ๋ฌํฐ ๊ธฐ์ด ๋ด์ฉ ์ ๋ฆฌ - Part 2
[Flutter] ํ๋ฌํฐ ๊ธฐ์ด ๋ด์ฉ ์ ๋ฆฌ - Part 2
2024.10.13๐ก ์๋๋ Part 1์์ ์ด์ด์ง๋ ๋ด์ฉ Data Fetching๊ฐ์ฒด์งํฅ ์ธ์ด์ธ Dart๋ ๊ฑฐ์ ๋๋ถ๋ถ์ด ํด๋์ค ๊ธฐ๋ฐ์ผ๋ก ๊ตฌ์ฑ๋๋ค. API ํธ์ถ, ์๋ต ๋ฐ์ดํฐ ํ์
์ ์, ๋ฐ์ดํฐ ์ฒ๋ฆฌ ์ญ์ ๋ชจ๋ ํด๋์ค ๋ด๋ถ์์ ์ด๋ฃจ์ด์ง๋ค. ๋จผ์ ์๋ต ๋ฐ์ดํฐ๋ฅผ ๋ํ๋ด๋ ๋ชจ๋ธ ํด๋์ค๋ฅผ ์ ์ํ๋ค. ์ผ๋ฐ์ ์ผ๋ก fromJson ์ด๋ผ๋ ์ด๋ฆ ์๋ ์์ฑ์๋ฅผ ์ฌ์ฉํ์ฌ JSON ๋ฐ์ดํฐ๋ฅผ ์ธ์คํด์คํ ์ํจ๋ค. ์๋ ์์์์ JSON ๊ฐ์ฒด๋ฅผ ์ธ์๋ก ๋ฐ๊ธฐ ๋๋ฌธ์ ์ด๊ธฐํ ๋ฆฌ์คํธ๋ฅผ ์ฌ์ฉํ์ฌ ํด๋์ค ํ๋์ ํ ๋นํ๊ณ ์๋ค.// lib/models/webtoon_model.dartclass WebtoonModel { final String id, title, thumb; WebtoonModel.fromJson(Map json) : tit..
[Flutter] ํ๋ฌํฐ ๊ธฐ์ด ๋ด์ฉ ์ ๋ฆฌ - Part 1
[Flutter] ํ๋ฌํฐ ๊ธฐ์ด ๋ด์ฉ ์ ๋ฆฌ - Part 1
2024.10.05๋ฐฐ๊ฒฝ ์ง์Flutter ๊ตฌ์กฐ๐ก Dart๋ Just-In-Time(JIT) ์ปดํ์ผ๊ณผ Ahead-Of-Time(AOT) ์ปดํ์ผ์ ๋ชจ๋ ์ง์ํ๋ค. JIT ์ปดํ์ผ์ ๊ฐ๋ฐ ๋ชจ๋์ ์ฌ์ฉ๋ผ์ Hot Reload ๊ฐ์ ๋น ๋ฅธ ํผ๋๋ฐฑ ๋ฃจํ๋ฅผ ์ ๊ณตํ๋ค. AOT ์ปดํ์ผ์ ๋ฐฐํฌ ๋ชจ๋์ ์ฌ์ฉ๋ผ์ ์ปดํ์ผ๋ ์ฝ๋๊ฐ ๊ธฐ๊ธฐ์ ๋ ์ต์ ํ๋ ์ํ๋ก ์คํํ ์ ์๊ฒ ๋ง๋ ๋ค. ๋ค์ดํฐ๋ธ ๊ฐ๋ฐ์์ ์ด์์ฒด์ (OS)์ ์ง์ ์ํธ์์ฉํ์ฌ ๋ฒํผ, ํ
์คํธ ๊ฐ์ UI ์์๋ฅผ ์์ฑํ๋ค.Flutter๋ ๋ค์ดํฐ๋ธ ํ๋ซํผ์ ์์ ฏ์ ์ฌ์ฉํ์ง ์๊ณ ์์ฒด์ ์ผ๋ก UI๋ฅผ ๋ ๋๋ง ํ๋ค. ์ด๋ ๋น๋์ค ๊ฒ์ ์์ง์ ์๋ ๋ฐฉ์๊ณผ ์ ์ฌํ๋ค.Dart๋ก ์์ฑ๋ ์ฝ๋๋ Flutter ํ๋ ์์ํฌ๋ฅผ ์ฌ์ฉํ์ฌ UI๋ฅผ ์ ์ํ๊ณ , ์ค์ ํ๋ฉด์ ๋ ๋๋ง ํ๋ ์์
์ C++๋ก ์์ฑ๋ Flutter ..
[TS] ํ์
์คํฌ๋ฆฝํธ ๋ธ๋๋๋ ํ์
[TS] ํ์ ์คํฌ๋ฆฝํธ ๋ธ๋๋๋ ํ์
2024.09.26Branded Typeํ์
์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํ๋ค ๋ณด๋ฉด ์๋ก ๋ค๋ฅธ ๋ ๊ฐ์ฒด์ ํน์ ์์ฑ์ด ๋์ผํ ํ์
์ ๊ฐ์ง ๋๊ฐ ๋ง๋ค. ์ด๋ก ์ธํด ํ์
์์คํ
์์ ์ค๋ฅ๊ฐ ๋ฐ์ํ์ง ์๋๋ผ๋ ๋
ผ๋ฆฌ์ ์ค๋ฅ๋ ํ์
์์ ์ฑ ๋ฌธ์ ๋ฅผ ์ผ๊ธฐํ ์ ์๋ค.type User = { id: string; name: string;};type Post = { id: string; ownerId: string; comments: Comments[];};type Comments = { id: string; timestamp: string; body: string; authorId: string;}; ์ ์์์์ User.id, Post.id, Comments.id๋ ๋ชจ๋ string ํ์
์ด๋ค. ์ฒซ ๋ฒ์งธ ์ธ์ postId, ๋ ๋ฒ์งธ ์ธ์..