shadcn/ui 설치 전후 폴더 구조

변화 : app 밖의 root 폴더 안

- components 폴더 생성 (빈 폴더)

- lib 폴더 생성 ( utils.ts 안에 function cn() export 함)

- components.json 파일

- package.json 의 dependencies 에 5개 추가

• class-variance-authority,
• clsx,
• lucid-react,
• tailwind-merge,
• tailwindcss-animate

참고 : shadcn/ui 설치 후

PS D:\ai\ai-sdk> npx shadcn-ui@latest init                          
√ Which style would you like to use? » Default                      
? Which color would you like to use as base color? » - Use arrow-keys. Return to submit.                                                
√ Which color would you like to use as base color? » Slate
√ Would you like to use CSS variables for colors? ... no / yes  

npx shadcn-ui@latest init

 

참고 : shadcn/ui 설치 전

PS D:\ai\ai-sdk> npx create-next-app@latest . --typescript --tailwind
√ Would you like to use ESLint? ... No / Yes
√ Would you like to use `src/` directory? ... No / Yes
√ Would you like to use App Router? (recommended) ... No / Yes      
√ Would you like to customize the default import alias (@/*)? ... No / Yes

 

참고
- app 폴더에는 routing 해야하는 파일/폴더만 넣고, components는 밖의 shadcn-ui 설치시에 생성된 components 안에 넣을 것 권장 ( shadcn 용 components는 ui 폴더안에 있 구분됨)