설치 - Gatsby
설치 - Gatsby
Gatsby 프로젝트에 shadcn/ui를 설치하고 설정하는 방법을 단계별로 알려드릴게요. 프로젝트를 만들고 TypeScript와 Tailwind CSS를 설정한 뒤, 경로 별칭을 위한 설정 파일을 추가하고 마지막에 CLI로 초기화하는 흐름이에요.
출처: 문서
본문
프로젝트 만들기
create-gatsby로 새 Gatsby 프로젝트를 만들어요.
npm init gatsby
Gatsby 프로젝트를 TypeScript와 Tailwind CSS로 설정하기
프로젝트 설정을 위해 몇 가지 질문에 답하게 될 거예요.
✔ What would you like to call your site?
· your-app-name
✔ What would you like to name the folder where your site will be created?
· your-app-name
✔ Will you be using JavaScript or TypeScript?
· TypeScript
✔ Will you be using a CMS?
· Choose whatever you want
✔ Would you like to install a styling system?
· Tailwind CSS
✔ Would you like to install additional features with other plugins?
· Choose whatever you want
✔ Shall we do this? (Y/n) · Yes
tsconfig.json 파일 수정하기
경로를 해석할 수 있도록 tsconfig.json에 다음 코드를 추가해요.
{
"compilerOptions": {
// ...
"baseUrl": ".",
"paths": {
"@/*": [
"./src/*"
]
}
// ...
}
}
gatsby-node.ts 파일 만들기
프로젝트 루트에 gatsby-node.ts 파일이 없다면 만들고, 아래 코드를 추가해서 앱이 경로를 해석할 수 있게 해요.
import * as path from "path"
export const onCreateWebpackConfig = ({ actions }) => {
actions.setWebpackConfig({
resolve: {
alias: {
"@/components": path.resolve(__dirname, "src/components"),
"@/lib/utils": path.resolve(__dirname, "src/lib/utils"),
},
},
})
}
CLI 실행하기
프로젝트를 설정하기 위해 shadcn-ui init 명령을 실행해요.
npx shadcn@latest init
components.json 설정하기
components.json 설정을 위해 몇 가지 질문에 답하게 될 거예요.
Would you like to use TypeScript (recommended)? no / yes
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › › ./src/styles/globals.css
Do you want to use CSS variables for colors? › no / yes
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/components
Configure the import alias for utils: › @/lib/utils
Are you using React Server Components? › no
끝!
이제 프로젝트에 컴포넌트를 추가하기 시작할 수 있어요.
npx shadcn@latest add button
위 명령은 프로젝트에 Button 컴포넌트를 추가해요. 그러면 이렇게 임포트해서 사용할 수 있어요.
import { Button } from "@/components/ui/button"
export default function Home() {
return (
<div>
<Button>Click me</Button>
</div>
)
}