디독 - vite+react 조합에서 shadcn ui시작하기(샤드씨엔ui)

vite+react 조합에서 shadcn ui시작하기(샤드씨엔ui)

1. Tailwind CSS 추가하기

pnpm add tailwindcss @tailwindcss/vite

2. src/index.css 내용 모두 제거하거나 주석처리하고, 아래 내용으로 교체한다.

@import "tailwindcss";

3. tsconfig.json 파일 수정
[AS-IS]

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ]
}

[TO-BE]

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

4. tsconfig.app.json 파일 수정
아래와 같이 내용 추가한다.

{
  "compilerOptions": {
    // (중략)
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
    // (후략)
  }
}

예를 들면 아래와 같이 수정한다.
[AS-IS]

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["src"]
}

[TO-BE]

5. 터미널에서 pnpm add -D @types/node 명령어 실행

pnpm add -D @types/node

6. vite.config.ts 파일 수정
vite.config.ts

[AS-IS]

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
})

[TO-BE]

import path from "path" // 추가
import tailwindcss from "@tailwindcss/vite" // 추가
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

7. 프로젝트에 shadcn ui 설치

pnpm dlx shadcn@latest init
Which color would you like to use as base color? => Neutral 선택하고 엔터

8. shadcn ui 컴포넌트 설치
예제로 버튼 컴포넌트를 설치해본다.

pnpm dlx shadcn@latest add button

9. App.tsx 파일
기존 내용을 모두 제거하거나 주석처리하고, 아래 내용으로 교체한다.

import { Button } from "@/components/ui/button"

function App() {
  return (
    <div className="flex min-h-svh flex-col items-center justify-center">
      <Button>Click me</Button>
    </div>
  )
}

export default App

10. 터미널에서 npm run dev 했을 때 아래와 같이 화면 뜨면 성공이다. (clickme 버튼 보이면 됨)