🤖 Claude Code

Next.js 앱 개발을 위한 엄격한 디자인 원칙

📚 Git이란?

Git은 소프트웨어 개발에서 소스코드의 변경사항을 추적하고 관리하는 분산 버전 관리 시스템입니다.

🔄 주요 기능

  • • 코드 변경 이력 추적
  • • 여러 개발자와 협업
  • • 브랜치를 통한 기능 개발
  • • 이전 버전으로 되돌리기

✨ 왜 필요한가?

  • • Claude Code는 Git과 함께 작동
  • • 코드 변경사항을 자동 커밋
  • • 안전한 개발 환경 제공
  • • 팀 프로젝트 필수 도구

📦 설치 방법

1️⃣ Git 설치 (필수)

🖥️ Windows

# winget으로 Git 설치
winget install --id Git.Git -e --source winget

🍎 macOS

# Homebrew로 Git 설치
brew install git

2️⃣ Claude Code 설치

# Claude Code npm으로 설치
npm install -g @anthropic-ai/claude-code

3️⃣ 실행 방법

🚀 기본 실행

# 프로젝트 폴더에서 실행
claude

💡 더 편한 실행

# 권한 확인 생략하고 실행
claude --dangerously-skip-permissions

⚡ 팁: --dangerously-skip-permissions 플래그는 권한 확인 과정을 건너뛰어 더 빠르게 시작할 수 있습니다.

💡 설치 후 사용법:

  • 터미널에서 claude 명령어로 실행
  • Git이 설치된 프로젝트 폴더에서 Claude Code와 대화형으로 개발
  • 아래 디자인 원칙을 CLAUDE.md에 추가하여 일관된 개발 가능

🎨 Design Principles (STRICT)

⚠️ 이 원칙들은 반드시 지켜야 합니다. 예외나 임시방편은 허용되지 않습니다.

1

NO raw HTML elements- Use MUI components only (Surface replaces div)

2

200 lines max per file- Aggressively split components

3

DRY everything- Reusable components and hooks

4

Atomic Design- Atoms → Molecules → Organisms → Templates

5

Type-safe- Full TypeScript, no `any` types

6

SSR First- Use Next.js SSR/ISR for performance

7

Component Composition- Build complex from simple

8

Client Components Minimized- Always prefer SSR, use "use client" sparingly

9

NO FALLBACKS OR WORKAROUNDS- Never use setTimeout, fallback patterns, or workarounds

10

NO COMPROMISES- Fix root causes, not symptoms. No shortcuts or band-aid solutions

📝 사용법

  1. 1. 위의 "CLAUDE.md에 복사하기" 버튼을 클릭
  2. 2. 프로젝트 루트의 CLAUDE.md 파일을 열기
  3. 3. Design Principles 섹션에 붙여넣기
  4. 4. 모든 팀원이 이 원칙을 숙지하고 준수하도록 안내