๋ฆฌ์กํธ ์ปดํฌ๋ํธ๋ฅผ ๊ฐ๋ฐํ๋ค๋ณด๋ฉด, ์ปดํฌ๋ํธ๋ฅผ ์ด๋ป๊ฒ ๋ถ๋ฆฌํด์ผํ ๊ฒ์ธ๊ฐ๋ฅผ ๋ง์ด ๊ณ ๋ฏผํ๋ค.๋, ๋ถ๋ฆฌํ์ฌ ์ด๋ ํ ํจํด์ ์ด์ฉํ์ฌ ์์ฑํ ์ง๋ ๊ณ ๋ฏผํ๋ค. ์ฐ์ ์ปดํฌ๋ํธ๋ฅผ ๋ถ๋ฆฌํ๋ ๊ธฐ์ค์ ๋ํด ์์๋ณด์. ๐ฆด ์ปดํฌ๋ํธ ๋ถ๋ฆฌ1. โป๏ธ ์ฌ์ฌ์ฉ์ฑ (Resualbility)๐๐ป ๋์ผํ UI๋ ๊ธฐ๋ฅ์ ์ฌ๋ฌ ๊ณณ์์ ์ฌ์ฉํ ๊ฐ๋ฅ์ฑ์ด ์๋ ๊ฒฝ์ฐ ์ปดํฌ๋ํธ๋ฅผ ๋ถ๋ฆฌํ๋ค.๐๐ป ex. Button, Modal, Card, Input ์ฝ๋ ์ข ๋ ์ดํดํ๊ธฐ >> ์ ํธํจ์ cn(tailwind-merge) tailwind-mergeMerge Tailwind CSS classes without style conflicts. Latest version: 3.1.0, last published: 3 days ago. Start using ta..
โข kyounghwan๋์ GitHub.io Guide | ๊ธฐ์ต๋ณด๋ค ๊ธฐ๋ก์Guide ๋ณธ ์นดํ
๊ณ ๋ฆฌ๋ vue.js ์ TypeScript(TS)๋ฅผ ์ ์ฉํ์๋ ์๊ฐ์ผ๋ก TS๋ฅผ ๊ณต๋ถํ๊ณ ๊ธฐ๋กํ ๋ด์ฉ์ผ๋ก ๊ตฌ์ฑ๋์ด ์์ต๋๋ค. ์ฌ์ ์ค๋น vue create๋ฅผ ํตํด ํ๋ก์ ํธ๋ฅผ ๋ง๋ค์๋ค๊ณ ๊ฐ์ ํ๊ณ vue.js ์ฝ๋ ์์ tskyounghwan01.github.io โ ๏ธ any ํ์
์ ์ด๋ ํ ๊ฐ๋ค์ด๋ ๋ฐ์ ์ ์๋ค๊ณ ์ ์ธ๋๋๋ฐ, any๋ฅผ ์ค๊ตฌ๋๋ฐฉ์ผ๋ก ์ฌ์ฉํ ๊ฒฝ์ฐ, VanillaJS์ ๋ค๋ฅธ ์ ์ด ์์ผ๋ฏ๋ก any ํ์
์ ์ ์ธ์ ํ์ง ์๋ ๊ฒ์ ๊ธธ๋ค์ด์. ์์ฑ์๋ ํ๋ก์ ํธ๋ฅผ ์งํํ๋ฉด์ type์ ์์ฃผ๋ก ์ด๋ค.๊ทธ ์ด์ ๋,interface ์ ์ ํ ๋ง์ฐ์ค๋ฅผ ํธ๋ฒํ์ฌ ํ์ธํ๋ ค๊ณ ํ๋ฉด ํ์
์ข
๋ฅ๋ฅผ ๋ฐ๋ก ํ์ธ ํ ์ ์๋ ๋ฐ๋ฉด, t..
์ฐธ๊ณ ์ฌ์ดํธโข Transtack Query ๊ณต์ ๋ฌธ์ TanStack Start Overview | TanStack Start React DocsTanStack Start is a full-stack React framework powered by TanStack Router. It provides a full-document SSR, streaming, server functions, bundling, and more using tools like and . It is ready to deploy...tanstack.comโข HEROPY.DEV ๋์ ๋ธ๋ก๊ทธ TanStack Query(React Query) ํต์ฌ ์ ๋ฆฌTanStack Query๋ ์๋ฒ๋ก๋ถํฐ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ, ๋ฐ์ดํฐ ์บ์ฑ, ์บ์ ์ ์ด ๋ฑ ๋ฐ์ด..
๐ Merge ๋ ๋จธ์ง,,?Merge๋ ํ ๋ธ๋์น์ ๋ณ๊ฒฝ์ฌํญ์ ๋ค๋ฅธ ๋ธ๋์น์ ํตํฉํ๋ ๊ธฐ๋ฅ์ด๋ค.Merge ๋ํด ์์๋ณด๊ณ Repository๋ฅผ ๊ด๋ฆฌํด๋ณด์.git merge feature-branch ๐ฌ Merge (defualt)์ผ๋ฐ์ ์ธ Merge๋ ๋ ๋ธ๋์น์ ์ปค๋ฐ ํ์คํ ๋ฆฌ๋ฅผ ๋ชจ๋ ์ ์งํ๋ฉด์ ์๋ก์ด Merge Commit์ ์์ฑํ๋ค. ํน์ง์ผ๋ก๋โ
๋ชจ๋ ์ปค๋ฐ ํ์คํ ๋ฆฌ๊ฐ ๋ณด์กด๋๋ค.โ
Merge ์ปค๋ฐ์ด ์๋ก ์์ฑ๋๋ค.โ
๋ธ๋์น์ ์์
๋ด์ญ์ ๊ทธ๋๋ก ํ์ธ ๊ฐ๋ฅํ๋ค. ๐ฟ Squash Merge (์์ถ ๋ณํฉ)์ฌ๋ฌ ์ปค๋ฐ์ ํ๋์ ์ปค๋ฐ์ผ๋ก ์์ถํ์ฌ ๋ณํฉํ๋ ๋ฐฉ์์ด๋ค.ํ์ฌ ๋ธ๋์น์์ ๋ช ๊ฐ์ ์ปค๋ฐ์ ์์ฑํ์ฌ๋, ๋จธ์ง ๋๋ ๋ธ๋์น์๋ ํ๋์ ์ปค๋ฐ ๋ฉ์์ง๋ง ๋จ๊ฒ ๋์ด ํ์คํ ๋ฆฌ๋ฅผ ๋จ์ํํ๋ค.feature ๋ธ๋์น์..
github.com/radix-ui/react-useControllableState ์์ค์ฝ๋ primitives/packages/react/use-controllable-state/src/useControllableState.tsx at main ยท radix-ui/primitivesRadix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos. - radix-ui/primitivesgithub.com ๐น๏ธ useControllableState() ๋?Radix ๋ผ์ด๋ธ๋ฌ๋ฆฌ์์ ์ ๊ณตํ๋ React ํ
์ผ๋ก, ์ ..
์๋จ ๋ด์ฉ ์์ฑ ์์ ( 2025-01-31 ~ ) 2025. 02. 02 ์ถ๊ฐโ useControllableState() ๊ณต๋ถโ ReactNode, ReactChild, ReactElement ๊ณต๋ถ ํ, ์ฌ์์ฑ ๋ ์์ (์๋ง ์ฝ๋ ๋ํ ๋ณ๊ฒฝ๋ ์์ ) ํฉ์ฑ ์ปดํฌ๋ํธ์๋ ๋ค์๊ณผ ๊ฐ๋ค 1. Header, Body, Footer๋ฅผ ๋ชจ๋ ํธ์ถํ ๊ฒฝ์ฐ2. Body์ Footer๋ง ํธ์ถํ ๊ฒฝ์ฐ3. Body๋ง ํธ์ถํ๊ณ Body์ ์คํ์ผ๋ง์ ๋ฎ์ด์์ด ๊ฒฝ์ฐ์ฌ์ฉ์๊ฐ ํ์ํ ์ปดํฌ๋ํธ๋ง์ ํธ์ถํจ์ ๋ฐ๋ผ ๋ค์ํ ๋ชจ์์ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค ์ ์๋ค.๋ํ ๊ฐ ์ปดํฌ๋ํธ์ className(tailwindCSS), style์ props๋ก ๋๊ฒจ์ฃผ์ด ๋์์ธ์ ์์ ํ ์ ์๋ค. ๐ App.tsx (ํ์ํ ๊ฒฝ์ฐ ํผ์ณ์ ๋ณด๊ธฐ)๋๋ณด๊ธฐim..
์ฐธ๊ณ ์ฌ์ดํธโข ์นด์นด์ค - FE ๊ธฐ์ ๋ธ๋ก๊ทธ / ์ปดํฌ๋ํธ ์ถ์ํโข velog - jinoo.io / ์ปดํฌ๋ํธ๋ฅผ ๋ ๊ณ ์ฒ๋ผ ์์๋ณด์! *์ถ์ํ: ์ฌ๋ฌ ๊ฐ์ง ์ฌ๋ฌผ์ด๋ ๊ฐ๋
์์ ๊ณตํต๋๋ ํน์ฑ์ด๋ ์์ฑ ๋ฐ์๋ฅผ ์ถ์ถํ์ฌ ํ์
ํ๋ ์์ฉ ๐ ์ปดํฌ๋ํธ์ ์ถ์ํํ๋ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ์ปดํฌ๋ํธ ๊ธฐ๋ฐ์ ํ๋ ์์ํฌ(ํน์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ)๋ฅผ ์ฌ์ฉํ์ฌ ๊ฐ๋ฐํ๊ฒ ๋๋ค.์ปดํฌ๋ํธ ๋จ์์ ๊ฐ๋ฐ๋ก ์ฅ์ ์ ๋ฌด์์ผ๊น? ๐๐ป ์ฅ์ 1. ์ฌ์ฌ์ฉ์ฑ: ์ปดํฌ๋ํธ๋ ๋
๋ฆฝ์ ์ด๊ณ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ์ฝ๋ ๋ธ๋ก์ผ๋ก, ์ฌ๋ฌ ๊ณณ์์ ๋์ผํ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ ์ ์๋ค.์ด๋ ์ฝ๋์ ์ค๋ณต์ ์ค์ด๊ณ ์ ์ง๋ณด์๋ฅผ ์ฉ์ดํ๊ฒ ํ๋ค.2. ์ ์ง๋ณด์ ์ฉ์ด์ฑ: ์ปดํฌ๋ํธ๋ ๋
๋ฆฝ์ ์ผ๋ก ๊ด๋ฆฌ๋๊ธฐ ๋๋ฌธ์ ํน์ ๊ธฐ๋ฅ์ด๋ UI ์์๋ฅผ ์์ ํ ๋ ํด๋น ์ปดํฌ๋ํธ๋ง ์
๋ฐ์ดํธํ๋ฉด ๋๋ค.์ด๋ ์ฝ๋์ ๊ฐ๋
์ฑ์ ..
"๐ก ๋ณด๊ธฐ ์ข์ ๋ก์ด ๋จน๊ธฐ๋ ์ข๋ค"์ฌ๋์ ์ค๊ฐ ์ค ๊ฐ์ฅ ๋ฐ๋ฌํ ๊ฐ๊ฐ์ด ์๊ฐ์ด๋ผ๊ณ ํ๋ค.์ธ๋ถ ์๊ทน์ ๋ํ ๋ฐ์์ด ๊ฐ์ฅ ๋ฏผ๊ฐํ๊ณ ๋น ๋ฅธ ๊ฐ๊ฐ์ด๊ธฐ๋ํ๋ค๊ณ ํ๋ค.์ ์๋ด์ด ๊ดํ ์๋ ๋ง์ด ์๋๋ฉฐ, ์์๋ ์๋ฆฌ๋ฅผ ์ทจ๋ฏธ๋ก ํ๋ฉด์ ํ๋ ์ดํ
์ด ์ค์ํ๋ค๊ณ ์๊ฐํ๋ค.๊ธฐ๋ฅ๋ ์ค์ํ์ง๋ง, ๋์์ธ ๋ํ ๋ฌด์ํ ์ ์์ผ๋ฉฐ, ์ด ๋์์ธ์ด ์ฌ์ฉ์์๊ฒ ์ผ๋ง๋ ํธ๋ฆฌํ์ง ๋ํ ๊ต์ฅํ ์ค์ํ๋ค. ์ ์ฒด์ ์ธ ๋์์ธ์ ์ํด ์ปดํฌ๋ํธ๋ฅผ ํ๋์ฉ ์ ์ํ๊ฒ ๋ ํ
๋ฐ ์ด๋, ์ ์ฉํ Headless UI์ ๋ํด ์์๋ณด์. ๐ค HeadlessHeadless๋, ๋์์ธ ์์ด ๊ธฐ๋ฅ๋ง ์ ๊ณตํด์ฃผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๋ค.์ ๊ทผ์ฑ, ์ํ๊ด๋ฆฌ์ ๊ฐ์ ๋ณต์กํ ๋์์ ์ฒ๋ฆฌํ๋ฉด์ ๊ฐ๋ฐ์๊ฐ ์คํ์ผ์ ์์ ํ ์ ์ด ํ ์ ์๋ค. `MUI`, `Bootstrap` ๋ฑ์ ์ธ๋ถ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ๊ธฐ..
๋ซ๊ธฐ
๋จ์ถํค
๋ด ๋ธ๋ก๊ทธ
๋ด ๋ธ๋ก๊ทธ - ๊ด๋ฆฌ์ ํ ์ ํ
Q
Q
์ ๊ธ ์ฐ๊ธฐ
W
W
๋ธ๋ก๊ทธ ๊ฒ์๊ธ
๊ธ ์์ (๊ถํ ์๋ ๊ฒฝ์ฐ)
E
E
๋๊ธ ์์ญ์ผ๋ก ์ด๋
C
C
๋ชจ๋ ์์ญ
์ด ํ์ด์ง์ URL ๋ณต์ฌ
S
S
๋งจ ์๋ก ์ด๋
T
T
ํฐ์คํ ๋ฆฌ ํ ์ด๋
H
H
๋จ์ถํค ์๋ด
Shift + /
โง + /
* ๋จ์ถํค๋ ํ๊ธ/์๋ฌธ ๋์๋ฌธ์๋ก ์ด์ฉ ๊ฐ๋ฅํ๋ฉฐ, ํฐ์คํ ๋ฆฌ ๊ธฐ๋ณธ ๋๋ฉ์ธ์์๋ง ๋์ํฉ๋๋ค.