React 프로젝트 구조: 폴더 아키텍처

src/
├── components/
│   ├── Button.tsx
│   ├── Card.tsx
│   └── Modal.tsx
├── pages/
│   ├── HomePage.tsx
│   └── ProductPage.tsx
├── hooks/
├── utils/
├── types/
└── api/

장점: 단순, 시작 쉬움
단점: 50+ 컴포넌트 시 components/ 폭주

src/
├── features/
│   ├── auth/
│   │   ├── components/
│   │   ├── hooks/
│   │   ├── api/
│   │   ├── types.ts
│   │   └── index.ts
│   ├── products/
│   └── orders/
├── shared/
│   ├── ui/        (Button, Card 등)
│   ├── lib/       (utils, helpers)
│   └── api/       (기본 client)
└── app/

장점: 도메인별 응집, 대규모 확장
단점: 초기 셋업 부담

// features/auth/index.ts
export { LoginForm } from './components/LoginForm';
export { useAuth } from './hooks/useAuth';
export type { User, LoginCredentials } from './types';
// 외부에 노출할 것만 export


// 사용 — 깔끔한 import
import { LoginForm, useAuth } from '@/features/auth';

// 내부 세부 구조 숨김 — 리팩터링 안전

// shared/ui/index.ts
export * from './Button';
export * from './Card';
export * from './Modal';
export * from './Input';
// ...

// 사용
import { Button, Card, Modal } from '@/shared/ui';

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@/features/*": ["./src/features/*"],
      "@/shared/*": ["./src/shared/*"],
      "@/app/*": ["./src/app/*"]
    }
  }
}


// vite.config.ts
import path from 'path';
export default {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
};

src/
├── app/                    # Next.js App Router
├── features/
│   ├── auth/               # 인증
│   ├── products/           # 상품
│   ├── orders/             # 주문
│   ├── payments/           # 결제
│   ├── shipping/           # 배송
│   └── notifications/      # 알림
├── shared/
│   ├── ui/                 # 디자인 시스템
│   │   ├── Button/
│   │   ├── Card/
│   │   ├── Form/
│   │   └── Modal/
│   ├── lib/                # 유틸
│   ├── hooks/              # 공통 훅
│   ├── api/                # 기본 fetcher
│   └── config/             # 환경변수
├── widgets/                # 큰 단위 (Header, Footer)
└── styles/