Vite에서 Chakra 사용하기
Vite에서 Chakra 사용하기 (Using Chakra in Vite)
Vite.js 프로젝트에 Chakra UI를 설치하는 방법을 안내하는 가이드예요. 스니펫과 원시 컴포넌트를 사용해 더 빠르게 UI를 구축할 수 있습니다.
출처: 문서
본문
템플릿 (Templates)
빠르게 시작하려면 아래 vite 템플릿을 사용하세요.
설치 (Installation)
최소 Node 버전은 Node.20.x입니다.
의존성 설치 (Install dependencies)
npm i @chakra-ui/react @emotion/react
스니펫 추가 (Add snippets)
스니펫은 UI를 더 빨리 구축하는 데 사용할 수 있는 사전 빌드된 컴포넌트예요. @chakra-ui/cli를 사용해 스니펫을 프로젝트에 추가할 수 있습니다.
npx @chakra-ui/cli snippet add
tsconfig 업데이트 (Update tsconfig)
TypeScript를 사용한다면 tsconfig.app.json 파일의 compilerOptions에 다음이 포함되도록 확인하세요.
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"moduleResolution": "Bundler",
"skipLibCheck": true,
"paths": {
"@/*": ["./src/*"]
}
}
}
JavaScript를 사용한다면
jsconfig.json파일을 만들고 위 코드를 파일에 추가하세요.
provider 설정 (Setup provider)
애플리케이션 루트에서 Provider 컴포넌트로 애플리케이션을 감싸세요.
이 provider는 다음을 조합해요.
- 스타일링 시스템을 위한
@chakra-ui/react의ChakraProvider - 컬러 모드를 위한
next-themes의ThemeProvider
import { Provider } from "@/components/ui/provider"
import React from "react"
import ReactDOM from "react-dom/client"
import App from "./App"
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<Provider>
<App />
</Provider>
</React.StrictMode>,
)
Vite 설정 경로 (Setup Vite Config Paths)
프로젝트에서 tsconfig를 vite와 자동으로 동기화하도록 vite 설정 경로를 구성하세요.
vite.config.ts 파일을 업데이트합니다.
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"
export default defineConfig({
plugins: [react()],
resolve: {
tsconfigPaths: true,
},
})
Vite 7 이하를 사용한다면 resolve.tsconfigPaths 대신 vite-tsconfig-paths 플러그인을 설치하세요.
npm i -D vite-tsconfig-paths
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"
import tsconfigPaths from "vite-tsconfig-paths"
export default defineConfig({
plugins: [react(), tsconfigPaths()],
})
즐거운 개발 되세요! (Enjoy!)
Chakra UI의 스니펫과 원시 컴포넌트의 힘으로 더 빠르게 UI를 구축할 수 있어요.
import { Button, HStack } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack>
<Button>Click me</Button>
<Button>Click me</Button>
</HStack>
)
}