대규모 Svelte 앱 설계 — 폴더 구조와 아키텍처 패턴

src/
├── routes/                    # 라우팅 (SvelteKit 규칙)
│   ├── (marketing)/           # 마케팅 페이지 그룹
│   │   ├── +layout.svelte
│   │   └── pricing/
│   ├── (app)/                 # 앱 페이지 그룹
│   │   ├── +layout.svelte
│   │   ├── dashboard/
│   │   └── settings/
│   └── api/                   # API 라우트
│       └── v1/
│
├── lib/                       # 공유 코드 ($lib)
│   ├── components/            # UI 컴포넌트
│   │   ├── ui/                # 범용 (Button, Modal, Input)
│   │   ├── layout/            # 레이아웃 (Header, Sidebar)
│   │   └── features/          # 기능별 (UserCard, PostEditor)
│   │
│   ├── server/                # 서버 전용 코드
│   │   ├── db.js              # 데이터베이스 클라이언트
│   │   ├── auth.js            # 인증 로직
│   │   └── email.js           # 이메일 발송
│   │
│   ├── stores/                # 전역 상태
│   │   ├── auth.js
│   │   ├── theme.js
│   │   └── notifications.js
│   │
│   ├── utils/                 # 유틸리티 함수
│   │   ├── format.js
│   │   ├── validation.js
│   │   └── api.js
│   │
│   ├── types/                 # TypeScript 타입 정의
│   │   └── index.ts
│   │
│   └── constants/             # 상수
│       └── index.js
│
├── app.html
├── app.css
├── app.d.ts
└── hooks.server.js

src/lib/
├── features/
│   ├── auth/
│   │   ├── components/        # 인증 관련 컴포넌트
│   │   │   ├── LoginForm.svelte
│   │   │   └── RegisterForm.svelte
│   │   ├── stores/            # 인증 상태
│   │   │   └── authStore.js
│   │   ├── utils/             # 인증 유틸
│   │   │   └── validation.js
│   │   └── index.js           # 공개 API (re-export)
│   │
│   ├── blog/
│   │   ├── components/
│   │   ├── stores/
│   │   └── index.js
│   │
│   └── shared/                # 공통 기능
│       ├── components/
│       └── utils/

컴포넌트를 3계층으로 나눕니다:

1. UI 컴포넌트 (Presentational)
   - 순수 표현. 비즈니스 로직 없음
   - Props로 데이터를 받고, 이벤트로 알림
   - 예: Button, Card, Modal, Input

2. Feature 컴포넌트
   - 특정 기능의 로직 포함
   - Store나 API와 연결
   - 예: LoginForm, PostEditor, UserProfile

3. Page 컴포넌트 (+page.svelte)
   - 라우트에 대응
   - Feature 컴포넌트를 조합
   - load 함수에서 데이터 수신

로컬 상태 ($state)
├── 컴포넌트 내부에서만 사용
├── 폼 입력, UI 토글 등
└── 가장 기본, 대부분 여기서 해결

공유 상태 (Context API)
├── 컴포넌트 트리 범위
├── 테마, 로케일, 기능 설정
└── 같은 컴포넌트의 다른 인스턴스가 다른 값

전역 상태 (Store / .svelte.js)
├── 앱 전체 공유
├── 인증, 알림, 전역 설정
└── 어디서든 import하여 사용

서버 상태 (load 함수)
├── 서버에서 가져오는 데이터
├── +page.server.js에서 관리
└── 자동 캐싱과 무효화

// src/lib/components/ui/index.js — 배럴 파일로 깔끔한 import
export { default as Button } from './Button.svelte';
export { default as Input } from './Input.svelte';
export { default as Modal } from './Modal.svelte';
export { default as Card } from './Card.svelte';

<!-- 사용 측 -->
<script>
  import { Button, Card, Modal } from '$lib/components/ui';
</script>

// src/lib/utils/errors.js
export class AppError extends Error {
  constructor(message, code, statusCode = 500) {
    super(message);
    this.code = code;
    this.statusCode = statusCode;
  }
}

export class NotFoundError extends AppError {
  constructor(resource) {
    super(`${resource}을(를) 찾을 수 없습니다`, 'NOT_FOUND', 404);
  }
}

export class UnauthorizedError extends AppError {
  constructor() {
    super('인증이 필요합니다', 'UNAUTHORIZED', 401);
  }
}