ํ”ผ๋“œ๋กœ ๋Œ์•„๊ฐ€๊ธฐ
๐Ÿš€ React + Vite + Tailwind CSS + Shadcn UI Setup (vanillaJS)
Dev.toDev.to
Frontend

Vite ๊ธฐ๋ฐ˜ ์ตœ์ ํ™” ํˆด์ฒด์ธ ๊ตฌ์ถ•์„ ํ†ตํ•œ 10๋ถ„ ๋‚ด Production-ready ํ™˜๊ฒฝ ๊ตฌํ˜„

๐Ÿš€ React + Vite + Tailwind CSS + Shadcn UI Setup (vanillaJS)

Nabin Kandel2026๋…„ 5์›” 10์ผ5๋ถ„beginner

AI ์š”์•ฝ

Context

๊ธฐ์กด React ํ”„๋กœ์ ํŠธ ์„ค์ • ์‹œ PostCSS ์„ค์ • ๋ฐ ๋ณต์žกํ•œ ์ƒ๋Œ€ ๊ฒฝ๋กœ Import๋กœ ์ธํ•œ ์œ ์ง€๋ณด์ˆ˜ ๋น„์šฉ ์ฆ๊ฐ€ ๋ฐœ์ƒ. ๋น ๋ฅธ ํ”„๋กœํ† ํƒ€์ดํ•‘์„ ์œ„ํ•ด TypeScript ์˜ค๋ฒ„ํ—ค๋“œ๋ฅผ ์ œ๊ฑฐํ•œ JavaScript ๊ธฐ๋ฐ˜์˜ ๊ณ ํšจ์œจ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ ์š”๊ตฌ.

Technical Solution

  • @tailwindcss/vite ํ”Œ๋Ÿฌ๊ทธ์ธ ๋„์ž…์„ ํ†ตํ•œ PostCSS ์„ค์ • ์ œ๊ฑฐ ๋ฐ Build-time ์ปดํŒŒ์ผ ์†๋„ ์ตœ์ ํ™”
  • vite.config.js ๋‚ด resolve.alias ์„ค์ •์„ ํ†ตํ•œ @/ ๊ฒฝ๋กœ ๊ธฐ๋ฐ˜์˜ Absolute Import ๊ตฌ์กฐ ์„ค๊ณ„
  • jsconfig.json ์ •์˜๋ฅผ ํ†ตํ•œ IDE ์ˆ˜์ค€์˜ ๊ฒฝ๋กœ ์ž๋™ ์™„์„ฑ ๋ฐ ์ •์  ๋ถ„์„ ์ง€์› ์ฒด๊ณ„ ๋งˆ๋ จ
  • babel-plugin-react-compiler ์ ์šฉ์„ ํ†ตํ•œ ๋Ÿฐํƒ€์ž„ ๋ Œ๋”๋ง ์„ฑ๋Šฅ ์ตœ์ ํ™” ๊ฐ€๋Šฅ์„ฑ ํ™•๋ณด
  • Shadcn UI CLI ๊ธฐ๋ฐ˜์˜ Component-driven ๊ฐœ๋ฐœ ์ฒด๊ณ„ ๊ตฌ์ถ•์œผ๋กœ UI ์ผ๊ด€์„ฑ ๋ฐ ์ ‘๊ทผ์„ฑ ํ™•๋ณด
  • src/components/ui์™€ src/components๋ฅผ ๋ถ„๋ฆฌํ•˜์—ฌ Primitive UI์™€ Custom Composables์˜ ์—ญํ•  ๋ถ„๋ฆฌ ์„ค๊ณ„

์‹ค์ฒœ ํฌ์ธํŠธ

- PostCSS ์„ค์ • ์—†์ด Tailwind CSS๋ฅผ ์ ์šฉํ•˜๋ ค๋ฉด `@tailwindcss/vite` ํ”Œ๋Ÿฌ๊ทธ์ธ ์‚ฌ์šฉ ๊ฒ€ํ†  - ํ”„๋กœ์ ํŠธ ๊ทœ๋ชจ ํ™•์žฅ ์ „ `jsconfig.json` ๋˜๋Š” `tsconfig.json`์„ ํ†ตํ•œ Alias ๊ฒฝ๋กœ ์„ค์ • ์ ์šฉ - Shadcn UI ๋„์ž… ์‹œ ๊ธฐ๋ณธ ์ œ๊ณต UI ์ปดํฌ๋„ŒํŠธ์™€ ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง์ด ํฌํ•จ๋œ ์ปค์Šคํ…€ ์ปดํฌ๋„ŒํŠธ์˜ ๋””๋ ‰ํ† ๋ฆฌ ๊ณ„์ธต ๋ถ„๋ฆฌ - ๋น ๋ฅธ ํ”„๋กœํ† ํƒ€์ดํ•‘ ๋‹จ๊ณ„์—์„œ TypeScript ๋„์ž… ๋น„์šฉ์„ ์ค„์ด๊ธฐ ์œ„ํ•ด JavaScript-first ์ „๋žต ์ฑ„ํƒ ๊ณ ๋ ค

ํƒœ๊ทธ

#Shadcn UI#Absolute Import#Tailwind CSS#React Compiler#Vite
์›๋ฌธ ์ฝ๊ธฐ