인프런 커뮤니티 질문&답변

안녕하세요 코린이님 이정환입니다.

확인해보니 몇일 전 shadcn/ui 설치 방법이 업데이트 되었네요

그런데 업데이트대로 실행해 본 결과, 아직 제대로 업데이트가 이루어지지 않은 것 같습니다 ... 🥲

현재 저뿐만 아니라 다른 분들도 문제를 겪고 계신 것 같습니다.

https://github.com/shadcn-ui/ui/issues/9928

이에 지금 당장은 깔끔하게 설치를 안내해 드릴 방법이 없어 아래와 같이 자동메세지를 통해 설치가 완료된 프로젝트 코드를 제공해드리고 있습니다.

문제가 해결되는대로 강의 수정하도록 하겠습니다

제보 감사합니다!

shadcn/ui 를 설치하기 전에 먼저 tailwindcss 설치와 path alias 패스를 설정해야 합니다.

1. Vite 에 tailwindcss 설치

npm install tailwindcss @tailwindcss/vite

2. Vite + React + Typescript 환경에 Path Alias 설정

    

    

   • tsconfig.ts 와 tsconfig.app.json 수정

      

   {
    // ...
    /* 템플릿 코드에 추가된 부분 : Path Alias */
     "compilerOptions": {
       "baseUrl": ".",
       "paths": {
         "@/*": ["./src/*"]
       }
     }
   }

   • vite에 tsconfig 의 alias를 반영하기 위해 vite-tsconfig-paths 플러그인을 설치합니다.

   npm install -D vite-tsconfig-paths

   • vite.config.ts 에 vite-tsconfig-path 플로그인을 추가 설정합니다.

   import { defineConfig } from 'vite';
   import react from '@vitejs/plugin-react-swc';
   import tsconfigPaths from 'vite-tsconfig-paths';
   import tailwindcss from '@tailwindcss/vite';
   
   // https://vitejs.dev/config/
   export default defineConfig({
     plugins: [react(), tailwindcss(), tsconfigPaths()],
   });

3. 위 사전 설정을 마치고 shadcn/ui 를 설치하면 됩니다.

npx shadcn@latest init -t vite
✔️ Select a component libary > Radix
✔️ Which preset would you like to use? > Nova

컴포넌트 사용할 때 경로가 ./components/ui... 로 잡히는데
@/components/ui... 로 나오는 건가요?