설치 - Astro
설치 - Astro
Astro 프로젝트에 shadcn/ui를 설치하고 설정하는 방법을 단계별로 알려드릴게요. 새 프로젝트를 만들고 React와 Tailwind CSS를 추가한 뒤, 경로 별칭을 설정하고 마지막에 shadcn CLI로 초기화하는 흐름이에요.
출처: 문서
본문
프로젝트 만들기
새 Astro 프로젝트부터 만들어요.
npm create astro@latest
Astro 프로젝트 설정하기
프로젝트 설정을 위해 몇 가지 질문에 답하게 될 거예요.
- Where should we create your new project? ./your-app-name
- How would you like to start your new project? Choose a template
- Do you plan to write TypeScript? Yes
- How strict should TypeScript be? Strict
- Install dependencies? Yes
- Initialize a new git repository? (optional) Yes/No
프로젝트에 React 추가하기
Astro CLI로 React를 설치해요.
npx astro add react
React를 설치할 때 CLI가 묻는 질문에는 모두 Yes라고 답해요.
프로젝트에 Tailwind CSS 추가하기
npx astro add tailwind
src 폴더에 styles/globals.css 파일을 만들어요.
@tailwind base;
@tailwind components;
@tailwind utilities;
globals.css 파일을 임포트해요.
src/pages/index.astro 파일에서 styles/globals.css를 임포트해요.
---
import '@/styles/globals.css'
---
astro.config.mjs를 수정하고 applyBaseStyles를 false로 설정해요.
Tailwind 기본 스타일을 두 번 제공하지 않도록, Astro가 base 스타일을 적용하지 않게 알려줄 필요가 있어요. 우리는 이미 직접 만든 globals.css에 base 스타일을 포함하고 있기 때문이에요. 이를 위해 astro.config.mjs에서 tailwind 플러그인의 applyBaseStyles 설정 옵션을 false로 지정해요.
export default defineConfig({
integrations: [
tailwind({
applyBaseStyles: false,
}),
],
})
tsconfig.json 파일 수정하기
경로를 해석할 수 있도록 tsconfig.json에 다음 코드를 추가해요.
{
"compilerOptions": {
// ...
"baseUrl": ".",
"paths": {
"@/*": [
"./src/*"
]
}
// ...
}
}
CLI 실행하기
프로젝트를 설정하기 위해 shadcn init 명령을 실행해요.
npx shadcn@latest init
끝!
이제 프로젝트에 컴포넌트를 추가하기 시작할 수 있어요.
npx shadcn@latest add button
위 명령은 프로젝트에 Button 컴포넌트를 추가해요. 그러면 이렇게 임포트해서 사용할 수 있어요.
---
import { Button } from "@/components/ui/button"
---
<html lang="en">
<head>
<title>Astro</title>
</head>
<body>
<Button>Hello World</Button>
</body>
</html>