설치
설치 (Installation)
프로젝트에 Chakra UI를 설치하고 설정하는 방법을 안내하는 가이드예요. 선호하는 프레임워크에서 Chakra UI를 단계별로 구성할 수 있습니다.
출처: 문서
본문
프레임워크 가이드 (Framework Guide)
Chakra UI는 여러분이 좋아하는 프레임워크에서 동작해요. 다음 프레임워크에 대한 단계별 가이드를 준비했습니다.
- Next.js (/docs/get-started/frameworks/next-app) — Next.js app과 함께 Chakra UI를 쉽게 추가
- Vite (/docs/get-started/frameworks/vite) — Vite와 함께 Chakra UI 사용
- Stackblitz (https://stackblitz.com/edit/chakra-ui-v3) — Stackblitz 샌드박스에서 Chakra UI 체험
최소 Node.js 버전은 20.x입니다.
스타일링 로드맵 (Styling roadmap)
오늘날 Chakra UI는 런타임에 Emotion을 사용해요.
장기 방향은 Panda CSS에서 영감을 받은 제로 런타임 스타일링 모델로, 기존 앱이 안전하게 업그레이드를 계속할 수 있도록 단계적으로 도입하고 있어요.
도움을 주고 싶다면 기여 가이드를 참고하고 문서, 마이그레이션 도구, 실제 사용 피드백에 대한 토론이나 PR을 열어 주세요.
설치 (Installation)
프로젝트에 Chakra UI를 수동으로 설정하려면 아래 단계를 따르세요.
@chakra-ui/react 설치
npm i @chakra-ui/react @emotion/react
스니펫 추가 (Add snippets)
스니펫은 UI를 더 빨리 구축하는 데 사용할 수 있는 사전 빌드된 컴포넌트예요. @chakra-ui/cli를 사용해 스니펫을 프로젝트에 추가할 수 있습니다.
npx @chakra-ui/cli snippet add
provider 설정 (Setup provider)
애플리케이션 루트에서 components/ui/provider 컴포넌트에 생성된 Provider 컴포넌트로 애플리케이션을 감싸세요.
이 provider는 다음을 조합해요.
- 스타일링 시스템을 위한
@chakra-ui/react의ChakraProvider - 컬러 모드를 위한
next-themes의ThemeProvider
import { Provider } from "@/components/ui/provider"
function App({ Component, pageProps }) {
return (
<Provider>
<Component {...pageProps} />
</Provider>
)
}
tsconfig 업데이트 (Update tsconfig)
TypeScript를 사용한다면 tsconfig 파일의 compilerOptions에 다음 옵션을 포함하도록 업데이트해야 해요.
{
"compilerOptions": {
"module": "ESNext",
"moduleResolution": "Bundler",
"skipLibCheck": true,
"paths": {
"@/*": ["./src/*"]
}
}
}
JavaScript를 사용한다면
jsconfig.json파일을 만들고 위 코드를 파일에 추가하세요.
즐거운 개발 되세요! (Enjoy!)
Chakra UI의 스니펫과 원시 컴포넌트의 힘으로 더 빠르게 UI를 구축할 수 있어요.
import { Button, HStack } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack>
<Button>Click me</Button>
<Button>Click me</Button>
</HStack>
)
}
학습 (Learn)
공식 강좌를 시청하고 기본부터 고급 개념까지 Chakra UI에 대해 알아야 할 모든 것을 가르쳐 주는 수십 개의 비디오를 살펴보세요.
기여 (Contribute)
초보자든 고급 Chakra UI 사용자든, 커뮤니티에 합류하는 것은 이 라이브러리로 훌륭한 제품을 만드는 비슷한 생각을 가진 사람들과 연결되는 최고의 방법이에요.