๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ - Magic UI
ยท
๐Ÿ“‚ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ
โœ… Magic UI๋ž€?์• ๋‹ˆ๋ฉ”์ด์…˜ ์ค‘์‹ฌ์˜ React UI ์ปดํฌ๋„ŒํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ Magic UI๋Š” Tailwind + React ๊ธฐ๋ฐ˜์˜ ํ˜„๋Œ€์ ์ธ ์• ๋‹ˆ๋ฉ”์ด์…˜ UI ์ปดํฌ๋„ŒํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๊ณ , shadcn/ui์™€ ์ž˜ ์–ด์šธ๋ฆฌ๋ฉฐ SaaS ์Šคํƒ€์ผ์˜ ํ™”๋ คํ•œ ์ธํ„ฐ๋ž™์…˜๊ณผ ๋žœ๋”ฉํŽ˜์ด์ง€ ํšจ๊ณผ๋ฅผ ๋น ๋ฅด๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค€๋‹ค. shadcn/ui: ๊ธฐ๋ณธ UI ๋ผˆ๋Œ€Magic UI: ํ™”๋ คํ•œ ์ธํ„ฐ๋ ‰์…˜ + ๋žœ๋”ฉ ํŽ˜์ด์ง€์šฉ ํšจ๊ณผ https://magicui.design/ Magic UIBeautiful UI components and templates to make your landing page look stunning.magicui.design
๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ - React Hook Form
ยท
๐Ÿ“‚ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ
โœ… ์„ค์น˜npm i react-hook-form โœ… useForm()useForm()์€ react-hook-form์—์„œ ์ œ๊ณตํ•˜๋Š” ํผ ์ƒํƒœ ๊ด€๋ฆฌ์˜ ํ•ต์‹ฌ ํ›…์ด๋‹ค. ์ด ํ›…์„ ์‚ฌ์šฉํ•˜๋ฉด ํผ ์ž…๋ ฅ๊ฐ’ ๊ด€๋ฆฌ, ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ, ์ œ์ถœ ์ฒ˜๋ฆฌ ๋“ฑ์„ ๋งค์šฐ ํšจ์œจ์ ์œผ๋กœ ํ•  ์ˆ˜ ์žˆ๋‹ค.const { register, // input์— ์—ฐ๊ฒฐ handleSubmit, // ์ œ์ถœ ํ•ธ๋“ค๋Ÿฌ watch, // ์‹ค์‹œ๊ฐ„ ์ž…๋ ฅ๊ฐ’ ๊ฐ์‹œ reset, // ํผ ์ดˆ๊ธฐํ™” setValue, // ํŠน์ • ํ•„๋“œ ๊ฐ’ ์ˆ˜๋™ ๋ณ€๊ฒฝ getValues, // ํ˜„์žฌ ํผ ์ „์ฒด ๊ฐ’ ๊ฐ€์ ธ์˜ค๊ธฐ trigger, // ํŠน์ • ํ•„๋“œ ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ ์‹คํ–‰ formState: { errors..