보일러플레이트 + 베스트 프랙티스 종합

pnpm create t3-app@latest my-app

포함:
✅ Next.js 16 + App Router
✅ TypeScript strict
✅ Tailwind CSS
✅ tRPC (타입 안전 API)
✅ Prisma (ORM)
✅ NextAuth.js (인증)
✅ ESLint + Prettier


→ 1인 개발자 신규 프로젝트 표준

# 1. 프로젝트 생성
pnpm create next-app@latest my-app --typescript --tailwind --eslint --app --src-dir

# 2. 추가 패키지
cd my-app
pnpm add @tanstack/react-query react-hook-form zod @hookform/resolvers
pnpm add zustand framer-motion next-themes
pnpm add -D @types/node @testing-library/react @testing-library/jest-dom vitest jsdom
pnpm add -D msw @storybook/nextjs eslint-plugin-react-hooks
pnpm add -D husky lint-staged prettier prettier-plugin-tailwindcss

my-app/
├── src/
│   ├── app/              # App Router
│   ├── components/
│   │   ├── ui/           # 디자인 시스템
│   │   └── layout/       # 헤더·푸터
│   ├── features/         # 도메인별
│   │   ├── auth/
│   │   └── posts/
│   ├── lib/              # 외부 통합 (db, auth)
│   ├── hooks/            # 공통 훅
│   ├── utils/            # 유틸
│   ├── types/            # 공유 타입
│   └── styles/           # globals.css
├── public/
├── tests/
├── .storybook/
└── ... (config files)

| 영역 | 라이브러리 |
|---|---|
| 데이터 페칭 | TanStack Query |
| 글로벌 상태 | Zustand |
| 폼 | React Hook Form + Zod |
| 스타일링 | Tailwind + cva + clsx |
| 애니메이션 | Framer Motion |
| 테마 | next-themes |
| 테스트 | Vitest + Testing Library + MSW |
| Storybook | @storybook/nextjs |
| 빌드 | Turbopack (Next 15+) |
| ORM | Prisma 또는 Drizzle |
| 인증 | NextAuth.js 또는 Clerk |
| 모니터링 | Sentry + Vercel Analytics |

[프로젝트 셋업]
☐ Next.js + TS strict
☐ Tailwind + 디자인 토큰
☐ ESLint flat config + Prettier
☐ Husky + lint-staged
☐ commitlint (선택)

[코드 품질]
☐ tsconfig strict + noUncheckedIndexedAccess
☐ Vitest 셋업 + 첫 테스트
☐ Storybook + addon-a11y
☐ MSW (API 모킹)

[데이터·상태]
☐ TanStack Query Provider
☐ Zustand 스토어 1개+
☐ React Hook Form + Zod 스키마

[UI 기반]
☐ next-themes (다크모드)
☐ Framer Motion 셋업
☐ cva + Button/Card 시작

[프로덕션]
☐ Sentry 통합
☐ Vercel Analytics
☐ Lighthouse CI
☐ generateMetadata 표준
☐ sitemap.ts + robots.ts

[배포]
☐ Vercel 또는 자체 K8s
☐ env 분리 (development/staging/production)
☐ CI: lint/typecheck/test/build
☐ 도메인 + SSL

프론트: Next.js 16 + Tailwind + cva
상태:   Zustand + TanStack Query
DB:     Supabase (PostgreSQL + Auth + Storage)
배포:   Vercel
도메인: Cloudflare
모니터: Sentry (free tier)
분석:   Vercel Analytics


→ 월 $0~20으로 시작 가능
→ 100K MAU까지 무료 가능

✅ 소개 (CH.1~4): 학습 동기 + 의사결정 프레임워크
✅ React 생태계 (CH.5~12): 폴더·상태·데이터·폼·테스트
✅ Next.js 프로덕션 (CH.13~20): App Router·Actions·캐시·SEO·성능
✅ CSS·디자인 시스템 (CH.21~26): Tailwind·토큰·반응형·a11y
✅ 번들링·도구 (CH.27~30): Vite·ESLint·모노레포·보일러플레이트


다음 파트 2 (예정):
백엔드+API 30챕터 — Node·Express·Spring·GraphQL·gRPC

1. 본인 프로젝트에 적용 — 1개 트랙씩
2. GitHub에 공개 + README에 스택 명시
3. 면접에서 "왜 이 조합인가" 답변 가능
4. 파트 2~4 진행 또는 본인 도메인 심화