데브허브 | DEVHUB | 2025 React Master Class - 4강: 프로젝트 생성하기2025 React Master Class - 4강: 프로젝트 생성하기
- 리액트 프로젝트는 Shadcn UI 공식 문서를 참조하여 Vite 기반으로 생성됩니다. 🚀
- 리액트 개발을 위해 Node.js 설치는 필수 선행 조건입니다. 💻
npm create vite@latest 명령어로 리액트 및 타입스크립트 프로젝트를 초기화합니다. ✨
- VS Code 터미널에서 프로젝트 폴더로 이동 후
code . -r 명령어로 새 창을 엽니다. 📁
- Shadcn UI는 Tailwind CSS 기반이므로, 관련 패키지를 설치하고
index.css에 임포트하여 스타일링을 준비합니다. 🎨
App.tsx 파일의 기본 코드를 정리하고, tsconfig.json 및 tsconfig.node.json에 baseUrl과 paths를 설정하여 절대 경로(alias)를 구성합니다. 🛣️
@types/node 설치 및 vite.config.ts 수정을 통해 타입스크립트 환경에서 alias가 정상 작동하도록 설정합니다. ⚙️
npx shadcn-ui@latest init 명령어로 Shadcn UI를 초기화하고, 프로젝트의 베이스 컬러를 선택합니다. 🌈
npm run dev 명령어로 로컬 서버에서 리액트 프로젝트를 실행하여 브라우저에서 결과를 확인합니다. ▶️
main.tsx 파일이 App.tsx를 루트 파일로 지정하여 프로젝트의 초기 진입점을 구성합니다. 🌲
- Vite를 활용한 최신 리액트 프로젝트 설정은 초보자도 쉽게 따라 할 수 있도록 간편해졌습니다. 👍