본문으로 건너뛰기

목차

1부: Svelte 기초​

1. Svelte 소개​

1.1 Svelte란 무엇인가?​

1.2 다른 프레임워크와의 차이점​

  • React, Vue와의 비교
  • 가상 DOM vs 컴파일 타임 최적화
  • 번들 크기와 성능 비교

1.3 Svelte의 장점과 단점​

1.4 언제 Svelte를 사용해야 하는가?​

2. 개발 환경 설정​

2.1 Node.js 설치 및 설정​

2.2 Svelte 프로젝트 생성​

  • npm create svelte@latest 사용법
  • Vite를 이용한 Svelte 프로젝트 설정

2.3 개발 도구 설정​

  • VS Code 확장 프로그램
  • ESLint와 Prettier 설정
  • TypeScript 지원

2.4 첫 번째 Svelte 앱 실행​

3. Svelte 컴포넌트 기초​

3.1 컴포넌트 구조 이해하기​

  • <script>, <style>, 마크업 섹션
  • Single File Component 개념

3.2 기본 문법​

  • 변수 선언과 출력
  • HTML과의 차이점

3.3 스타일링 기초​

  • 컴포넌트 스코프 CSS
  • 글로벌 스타일링
  • CSS 변수 사용법

2부: Svelte 5 핵심 개념​

4. Rune 시스템 (Svelte 5 신기능)​

4.1 Rune 시스템 소개​

  • Svelte 4에서 5로의 변화
  • 신호 기반 반응성 시스템

4.2 $state Rune​

  • 반응형 상태 선언
  • 객체와 배열 상태 관리
  • 중첩된 반응성

4.3 $derived Rune​

  • 계산된 값 만들기
  • 의존성 자동 추적

4.4 $effect Rune​

  • 부수 효과 처리
  • 라이프사이클과의 관계
  • 정리(cleanup) 함수

4.5 $props Rune​

  • 컴포넌트 속성 받기
  • 기본값 설정
  • 타입 안전성

5. 이벤트 처리​

5.1 DOM 이벤트 핸들링​

  • on:click, on:input 등 기본 이벤트
  • 이벤트 수식어 (preventDefault, stopPropagation)
  • 이벤트 객체 활용

5.2 커스텀 이벤트​

  • 컴포넌트 간 이벤트 전달
  • EventDispatcher에서 콜백 props로의 변화

5.3 폼 처리​

  • 입력 필드 바인딩
  • 폼 검증
  • 제출 처리

6. 조건부 렌더링과 리스트​

6.1 조건부 렌더링​

  • {#if} 블록
  • {:else}, {:else if} 사용법
  • 논리 연산자 활용

6.2 리스트 렌더링​

  • {#each} 블록
  • 키(key) 사용법과 성능
  • 인덱스 활용

6.3 Promise와 비동기 데이터​

  • {#await} 블록
  • 로딩, 성공, 에러 상태 처리

3부: 고급 Svelte 기능​

7. 컴포넌트 통신​

7.1 Props 전달​

  • 부모에서 자식으로 데이터 전달
  • Props 검증과 타입
  • 스프레드 Props

7.2 Snippets (Svelte 5 신기능)​

  • Slot에서 Snippet으로의 변화
  • 재사용 가능한 마크업 블록
  • 매개변수를 가진 Snippet

7.3 Context API​

  • 깊은 컴포넌트 트리에서의 데이터 전달
  • setContext, getContext
  • 타입 안전한 Context

8. 바인딩과 폼​

8.1 양방향 데이터 바인딩​

  • bind:value, bind:checked
  • 다양한 입력 요소 바인딩

8.2 고급 바인딩​

  • bind:this로 DOM 요소 참조
  • 컴포넌트 인스턴스 바인딩
  • 미디어 요소 바인딩

8.3 폼 검증과 에러 처리​

  • 실시간 검증
  • 에러 메시지 표시
  • 사용자 경험 개선

9. 애니메이션과 전환​

9.1 CSS 전환​

  • transition: 디렉티브
  • 내장 전환 효과
  • 커스텀 전환 만들기

9.2 애니메이션​

  • animate: 디렉티브
  • FLIP 애니메이션
  • 리스트 재정렬 애니메이션

9.3 모션과 스프링​

  • tweened, spring 스토어
  • 부드러운 값 변화
  • 물리 기반 애니메이션

10. 스토어와 상태 관리​

10.1 Svelte 스토어 기초​

  • writable, readable, derived
  • 스토어 구독과 해제

10.2 커스텀 스토어​

  • 비즈니스 로직을 가진 스토어
  • 스토어 패턴과 모범 사례

10.3 복잡한 상태 관리​

  • 여러 스토어 조합
  • 상태 정규화
  • 성능 고려사항

4부: SvelteKit 완전 정복​

11. SvelteKit 소개​

11.1 SvelteKit이란?​

  • Svelte vs SvelteKit
  • Next.js, Nuxt.js와의 비교
  • 메타 프레임워크의 이점

11.2 프로젝트 구조​

  • 디렉토리 구조 이해
  • 설정 파일들
  • 빌드 시스템 (Vite)

12. 라우팅 시스템​

12.1 파일 시스템 기반 라우팅​

  • 기본 라우팅 개념
  • +page.svelte 파일
  • 중첩 라우트

12.2 동적 라우팅​

  • 매개변수 라우트 [slug]
  • 나머지 매개변수 [...rest]
  • 선택적 매개변수 [[optional]]

12.3 고급 라우팅​

  • 라우트 그룹 (group)
  • 매개변수 검증
  • 라우트 매칭

12.4 레이아웃​

  • +layout.svelte 파일
  • 중첩 레이아웃
  • 레이아웃 상속과 재설정

13. 데이터 로딩​

13.1 Load 함수 기초​

  • +page.js와 +page.server.js
  • 서버 사이드 vs 클라이언트 사이드
  • 데이터 반환과 타입

13.2 레이아웃 데이터​

  • +layout.js와 +layout.server.js
  • 부모 데이터 접근
  • 데이터 상속

13.3 고급 데이터 로딩​

  • 병렬 로딩
  • 스트리밍
  • 에러 처리

14. 폼과 액션​

14.1 Form 기본​

  • 전통적인 폼 처리
  • Progressive Enhancement

14.2 Form Actions​

  • +page.server.js의 액션
  • 여러 액션 처리
  • 검증과 에러 처리

14.3 고급 폼 처리​

  • use:enhance
  • 파일 업로드
  • 실시간 검증

15. API 라우트​

15.1 REST API 구축​

  • +server.js 파일
  • HTTP 메서드 핸들러
  • 요청과 응답 처리

15.2 데이터베이스 연동​

  • ORM/쿼리 빌더 사용
  • CRUD 작업
  • 트랜잭션 처리

15.3 인증과 보안​

  • 세션 관리
  • JWT 토큰
  • CSRF 보호

5부: 배포와 최적화​

16. 성능 최적화​

16.1 빌드 최적화​

  • 코드 스플리팅
  • 트리 쉐이킹
  • 번들 분석

16.2 런타임 최적화​

  • 가상화된 리스트
  • 지연 로딩
  • 메모이제이션

16.3 SSR과 프리렌더링​

  • 서버 사이드 렌더링 설정
  • 정적 사이트 생성
  • 하이브리드 렌더링

17. 테스팅​

17.1 단위 테스트​

  • Vitest 설정
  • 컴포넌트 테스트
  • 스토어 테스트

17.2 통합 테스트​

  • Playwright 설정
  • E2E 테스트 작성
  • 시각적 회귀 테스트

17.3 테스트 전략​

  • 테스트 피라미드
  • 모킹과 스텁
  • CI/CD 통합

18. 배포​

18.1 어댑터 이해하기​

  • 다양한 플랫폼 어댑터
  • 정적 어댑터
  • Node 어댑터

18.2 주요 플랫폼 배포​

  • Vercel 배포
  • Netlify 배포
  • AWS 배포

18.3 Docker와 컨테이너화​

  • Dockerfile 작성
  • 최적화된 이미지 빌드
  • Kubernetes 배포

6부: 실무 프로젝트​

19. 실무 패턴과 아키텍처​

19.1 프로젝트 구조 설계​

  • 디렉토리 구조 모범 사례
  • 모듈화 전략
  • 코드 분할

19.2 상태 관리 패턴​

  • 글로벌 vs 로컬 상태
  • 상태 머신
  • 데이터 플로우 패턴

19.3 에러 처리 전략​

  • 에러 바운더리
  • 사용자 친화적 에러 메시지
  • 로깅과 모니터링

20. 외부 라이브러리 통합​

20.1 UI 라이브러리​

  • Tailwind CSS 통합
  • 컴포넌트 라이브러리 사용
  • 아이콘 시스템

20.2 데이터 페칭​

  • Axios vs Fetch
  • React Query 대안
  • 실시간 데이터 (WebSocket)

20.3 인증 시스템​

  • Auth.js 통합
  • OAuth 구현
  • 권한 관리

21. 대규모 애플리케이션 개발​

21.1 코드 품질 관리​

  • ESLint 규칙 설정
  • Prettier 구성
  • 타입스크립트 활용

21.2 팀 개발 워크플로우​

  • Git 브랜치 전략
  • 코드 리뷰
  • CI/CD 파이프라인

21.3 성능 모니터링​

  • Core Web Vitals
  • 사용자 분석
  • 성능 최적화 사례

22. 마이그레이션 가이드​

22.1 Svelte 4에서 5로 마이그레이션​

  • 주요 변경 사항
  • 단계별 마이그레이션
  • 호환성 모드

22.2 다른 프레임워크에서 Svelte로​

  • React에서 Svelte로
  • Vue에서 Svelte로
  • 점진적 마이그레이션

부록​

A. Svelte API 레퍼런스​

A.1 컴포넌트 API​

A.2 스토어 API​

A.3 런타임 API​

A.4 컴파일러 옵션​

B. SvelteKit API 레퍼런스​

B.1 라우팅 API​

B.2 로딩 API​

B.3 어댑터 API​

B.4 훅 API​

C. 도구와 리소스​

C.1 개발 도구​

C.2 유용한 라이브러리​

C.3 커뮤니티 리소스​

C.4 학습 자료​

D. 트러블슈팅 가이드​

D.1 일반적인 오류와 해결책​

D.2 성능 이슈 해결​

D.3 배포 문제 해결​

D.4 FAQ​