Create Palladium

⚡ Vite + React + TypeScript 프로젝트를 빠르게 초기화할 수 있는 CLI 도구

✨ 주요 기능

• 🚀 Vite + React + TypeScript 프로젝트 자동 생성
• 🛣️ React Router DOM 선택적 설치
• 🔄 React Query (TanStack Query) 선택적 설치
• 📦 상태 관리 라이브러리 선택 (Zustand, Redux Toolkit)
• 🎨 CSS 프레임워크 선택 (Tailwind CSS, Styled Components)
• 🛠️ 개발 도구 자동 설정 (ESLint, Prettier, clsx)
• 📝 Git 저장소 자동 초기화
• ⚡ 개발 서버 자동 실행 옵션

🚀 빠른 시작

npx create-palladium

또는

npm create palladium

📋 사용법

1. 프로젝트 생성

npx create-palladium my-awesome-app

2. 대화형 설정

CLI가 다음 옵션들을 물어봅니다:

• 프로젝트 이름: 생성할 프로젝트의 이름
• React Router: 라우팅 기능 사용 여부
• React Query: 서버 상태 관리 사용 여부
• 상태 관리: Zustand 또는 Redux Toolkit 선택
• CSS 프레임워크: Tailwind CSS 또는 Styled Components 선택
• 개발 도구: ESLint, Prettier, clsx 선택
• 개발 서버: 생성 후 바로 실행 여부

3. 프로젝트 구조

생성된 프로젝트는 다음과 같은 구조를 가집니다:

my-awesome-app/
├── src/
│   ├── components/
│   ├── pages/
│   ├── hooks/
│   ├── utils/
│   ├── App.tsx
│   ├── main.tsx
│   └── index.css
├── public/
├── package.json
├── vite.config.ts
├── tsconfig.json
├── tailwind.config.js (선택사항)
├── .eslintrc.cjs
├── .prettierrc
└── .gitignore

🛠️ 개발

로컬 개발 환경 설정

# 저장소 클론
git clone https://github.com/yourusername/create-palladium.git
cd create-palladium

# 의존성 설치
npm install

# 개발 모드 (TypeScript 컴파일 감시)
npm run dev

# 빌드
npm run build

# 린트
npm run lint

# 린트 자동 수정
npm run lint:fix

전역 설치 및 테스트

# 전역 링크
npm link

# CLI 테스트
create-palladium test-project

📦 포함된 기술 스택

기본 스택

• Vite - 빠른 빌드 도구
• React 18 - UI 라이브러리
• TypeScript - 타입 안전성
• ESLint + Prettier - 코드 품질

선택적 라이브러리

• React Router DOM - 클라이언트 사이드 라우팅
• React Query - 서버 상태 관리
• Zustand - 가벼운 상태 관리
• Redux Toolkit - 강력한 상태 관리
• Tailwind CSS - 유틸리티 퍼스트 CSS 프레임워크
• Styled Components - CSS-in-JS 라이브러리
• clsx - 조건부 클래스명 유틸리티

🔧 설정 파일

ESLint 설정

// .eslintrc.cjs
module.exports = {
  extends: [
    'eslint:recommended',
    '@typescript-eslint/recommended',
  ],
  // ... 추가 설정
}

Prettier 설정

// .prettierrc
{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2
}

Tailwind CSS 설정

// tailwind.config.js
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: { extend: {} },
  plugins: [],
}

🤝 기여하기

1. 이 저장소를 포크합니다
2. 기능 브랜치를 생성합니다 (git checkout -b feature/amazing-feature)
3. 변경사항을 커밋합니다 (git commit -m 'Add some amazing feature')
4. 브랜치에 푸시합니다 (git push origin feature/amazing-feature)
5. Pull Request를 생성합니다

📝 라이선스

이 프로젝트는 MIT 라이선스 하에 배포됩니다. 자세한 내용은 LICENSE 파일을 참조하세요.

🙏 감사의 말

• Vite - 빠른 빌드 도구
• React - UI 라이브러리
• TypeScript - 타입 안전성
• Tailwind CSS - CSS 프레임워크

📞 지원

문제가 있거나 제안사항이 있으시면 이슈를 등록해주세요.

즐거운 코딩 되세요! 🚀