Svelte Curriculum Svelte 교육 과정 커리큘럼

Fundamentals 기초 과정

Lesson 1: Introduction & Environment Setup 1강: Svelte 소개 및 환경 설정

Introduction to Svelte Framework Svelte 프레임워크 소개
Comparing Svelte with Other Frameworks Svelte와 다른 프레임워크 비교
Setting Up Development Environment (Vite, TypeScript, Tailwind CSS) 개발 환경 설정
Creating Your First Svelte App 첫 번째 Svelte 앱 만들기
Understanding Differences Between SvelteKit and Svelte SvelteKit과 Svelte의 차이점
VS Code Extensions and Development Tools VS Code 확장 프로그램 및 개발 도구

Go to Lesson → 강의 바로가기 →

Lesson 2: Svelte Component Basics 2강: Svelte 컴포넌트 기초

Svelte Component Structure (.svelte files) Svelte 컴포넌트 구조
Script, Markup, and Style Sections 스크립트, 마크업, 스타일 섹션
Basic Syntax and Expressions 기본 문법과 표현식
Event Handling 이벤트 처리
Conditional Rendering (if blocks) 조건부 렌더링
List Rendering (each blocks) 반복 렌더링
HTML Tags and Attribute Binding HTML 태그 및 속성 바인딩

Go to Lesson → 강의 바로가기 →

Lesson 3: Svelte 5 Runes System 3강: Svelte 5 Runes 시스템

Introduction to Runes System Runes 시스템 소개
State Management with $state $state 룬을 사용한 상태 관리
Derived State with $derived $derived 룬을 사용한 파생 상태
Side Effects with $effect $effect 룬을 사용한 부수 효과
Using $state.raw and $state.snapshot $state.raw와 $state.snapshot
Comparing Svelte 4 and Svelte 5 Svelte 4와 Svelte 5 비교
Practical Implementation Examples 실용적인 예제 구현

Go to Lesson → 강의 바로가기 →

Lesson 4: Component Communication & Patterns 4강: 컴포넌트 통신과 상태 관리

Data Transfer Through Props Props를 통한 데이터 전달
Parent-Child Component Communication 부모-자식 컴포넌트 통신
Content Delivery via Slots and Snippets 슬롯과 스니펫을 통한 콘텐츠 전달
Utilizing Context API 컨텍스트 API 활용
Bindings and Bidirectional Data Flow 바인딩과 양방향 데이터 흐름
Component Lifecycle Management 컴포넌트 생명주기 관리
Practical Communication Patterns and Examples 실전 통신 패턴과 예제

Go to Lesson → 강의 바로가기 →

Intermediate Course 중급 과정

Lesson 5: Advanced Reactivity & State Management 5강: 고급 반응성과 상태 관리

Creating and Using Reactive Stores 반응형 스토어 생성 및 활용
Reactivity Optimization Techniques 반응성 최적화 기법
Understanding Push-Pull Reactivity Model Push-Pull 반응성 모델 이해
Dependency Tracking Mechanisms 의존성 추적 메커니즘
Using $state with Classes 클래스와 함께 $state 사용
Custom Store Implementation 커스텀 스토어 구현
Performance Optimization Patterns 성능 최적화 패턴

Go to Lesson → 강의 바로가기 →

Lesson 6: Form Handling & Bindings 6강: 폼 처리와 바인딩

Form Element Bindings 폼 요소 바인딩
Handling User Input 사용자 입력 처리
Form Validation Techniques 폼 유효성 검사
Building Custom Form Components 커스텀 폼 컴포넌트 제작
Working with Select, Checkbox, and Radio Inputs Select, Checkbox, Radio 입력 다루기
File Upload Handling 파일 업로드 처리
Dynamic Form Field Management 동적 폼 필드 관리

Go to Lesson → 강의 바로가기 →