Share
Sign In
๐Ÿ“ฐ IT ์†Œ์‹
๊ฐœ๋ฐœ/๊ธฐ์ˆ  ๊ด€๋ จ๋œ ์†Œ์‹ ์ค‘ ์ฃผ๋กœ ํ”„๋ก ํŠธ์—”๋“œ ๊ด€๋ จ ์†Œ์‹์„ ์ „ํ•ฉ๋‹ˆ๋‹ค.
SNAX
shadcn/ui Blocks, Charts ์ถ”๊ฐ€
Blocks
shadcn/ui๋ฅผ ๋ฐ”ํƒ•์œผ๋กœ ๋งŒ๋“ค์–ด์ง„ ์ผ์ข…์˜ ํ…œํ”Œ๋ฆฟ ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค. tailwindUI๋ฅผ ์ƒ๊ฐํ•˜๋ฉด ์‰ฝ์Šต๋‹ˆ๋‹ค.
Charts
๋ฆฌ์•กํŠธ์šฉ ์ฐจํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ธ recharts๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ shadcn์˜ ๊ฐ๊ฐ์ด ๊ฐ€๋ฏธ๋œ ์ฐจํŠธ ์ปดํฌ๋„ŒํŠธ์ž…๋‹ˆ๋‹ค.
๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์•„๋‹Œ ์ปฌ๋ ‰์…˜์„ ํ‘œ๋ฐฉํ•˜๋Š” shadcn/ui ๋‹ต๊ฒŒ ์Šค์Šค๋กœ๋Š” ์˜์กด์„ฑ์„ ์ „ํ˜€ ๊ฐ–๊ณ  ์žˆ์ง€ ์•Š๊ณ , ์ฝ”๋“œ๋ฅผ ๋ณต์‚ฌํ•ด์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ด๋†จ์Šต๋‹ˆ๋‹ค.
Reaction
Comment
Share
SNAX
TanStack Form ์ถœ์‹œ
TanStack Query(React Query)์˜ ๊ฐœ๋ฐœ์ž TanStack์ด ๋‚ด๋†“์€ ์ƒˆ๋กœ์šด ์–‘์‹(Form) ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ
์ถœ์‹œ์ผ: 2024๋…„ 4์›” 27์ผ
Framework Agnostic: React, Vue, Angular ๋“ฑ ์—ฌ๋Ÿฌ ํ”„๋ ˆ์ž„์›Œํฌ ์ง€์›
Isolate Re-renders: React Hook Form๊ณผ ๋™์ผํ•˜๊ฒŒ Uncontrolled ๋ฐฉ์‹์œผ๋กœ ๋ฆฌ๋ Œ๋”๋ง์„ ์ตœ์†Œํ™”ํ•œ๋‹ค.
Validation: zod, yup, valibot ๋“ฑ์˜ ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ํ•จ๊ป˜ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก adaptor ์ œ๊ณต.
SSR: Next.js Server Action์„ ์ง€์›ํ•˜์—ฌ ์„œ๋ฒ„ ์‚ฌ์ด๋“œ์—์„œ ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ๊ฐ€ ๊ฐ€๋Šฅํ•ด์ง„๋‹ค.
Granular reactivity: ์„ธ๋ถ„ํ™”๋œ ๋ฐ˜์‘์„ฑ์„ ์ง€์›ํ•˜์—ฌ ์›ํ•˜๋Š” ์˜์—ญ๋งŒ ์ƒํƒœ๋ฅผ ๊ตฌ๋…, ๋ฆฌ๋ Œ๋”๋ง์„ ๋ณด๋‹ค ์ตœ์†Œํ™”ํ•  ์ˆ˜ ์žˆ๋‹ค.
Linked Fields: ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ ์Šคํ‚ค๋งˆ์—์„œ ๋‹ค๋ฅธ ํ•„๋“œ์˜ ๊ฐ’๋„ ์ฐธ์กฐํ•  ์ˆ˜ ์žˆ๋‹ค.
๊ฐœ์ธ์ ์ธ ์˜๊ฒฌ
์ „์ฒด์ ์œผ๋กœ ๋””์ž์ธ์ด React Hook Form๊ณผ ๋น„์Šทํ•˜๋‚˜ ์ข€ ๋” ๋‹ค๋“ฌ์–ด์ง„ ๋Š๋‚Œ์ด ๋“ ๋‹ค. ๊ท€์ฐฎ๊ณ , ๊ฑฐ์Šฌ๋ฆฌ๊ณ , ๋ถˆํŽธํ•œ ๋ถ€๋ถ„๋“ค์ด ๊ฐœ์„ ๋˜์—ˆ๋‹ค.
TanStack์ด๋ผ๋Š” ์Šคํƒ€ ๊ฐœ๋ฐœ์ž๊ฐ€ ์ฃผ๋„ํ•˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ธ ๋งŒํผ ์ถœ์‹œ๋œ์ง€ ๋ช‡๊ฐœ์›”๋˜์ง€ ์•Š์•˜๋Š”๋ฐ๋„ 3.5k์˜ ์Šคํƒ€๋ฅผ ๋ฐ›์•˜๋‹ค.
See more...
Reaction
Comment
Share