Svelte와 SvelteKit으로 실제 인터페이스 구축하기
Svelte는 React와 Vue와는 근본적으로 다른 접근 방식을 취합니다. 런타임을 브라우저로 보내는 대신 빌드 시점에 컴포넌트를 매우 효율적인 vanilla JavaScript로 컴파일합니다. 그 결과 더 작은 번들, 더 빠른 로딩 시간, 그리고 보일러플레이트 코드 감소를 얻을 수 있습니다. 공식 애플리케이션 프레임워크인 SvelteKit은 파일 기반 라우팅, 서버 사이드 렌더링, 폼 액션, 배포 어댑터를 추가하여 어떤 플랫폼에서든 프로덕션 수준의 앱을 배포할 수 있게 해줍니다. 이 트랙은 첫 컴포넌트부터 풀스택 아키텍처까지 모두를 다룹니다.
학습 내용
Svelte의 컴포넌트 모델부터 시작합니다 — props, 템플릿 문법, 조건문, 루프, 양방향 바인딩. 그 다음 반응성 시스템, 라이프사이클 함수, 그리고 스토어 기초를 배웁니다: writable, readable, derived, 그리고 커스텀 스토어. UI 측면에서는 slots, Context API, CSS 트랜지션, 애니메이션, Svelte Motion을 다룹니다. SvelteKit 챕터에서는 라우팅, 데이터 로딩, SSR과 프리렌더링, 폼 액션, API 라우트, hooks, 에러 처리, 고급 레이아웃, 인증 패턴, 배포 어댑터를 다룹니다. 이 트랙은 또한 Svelte 5의 rune 시스템, 유닛 테스트와 Playwright E2E를 활용한 테스팅, 서드파티 라이브러리 통합, 그리고 SvelteKit 보안 관행도 포함합니다.
학습 경로
41개 과정이 A1부터 C1까지 진행됩니다. 처음 7개 과정은 기초를 확립합니다: 컴포넌트, props, 이벤트, 템플릿 문법. B1은 스토어, slots, 트랜지션, 그리고 첫 SvelteKit 페이지와 데이터 로딩 패턴을 소개합니다. B2 — 가장 큰 섹션 — 폼 액션, API 라우트, hooks, 고급 반응성, Svelte Actions, 커스텀 애니메이션, 인증 패턴, 어댑터, Svelte 5 runes, 테스팅, 보안을 다룹니다. 트랙은 C1에서 고급 runes, 고급 컴포넌트 패턴, SvelteKit 스트리밍, 성능 최적화, 대규모 상태 관리, 그리고 풀스택 SvelteKit 애플리케이션 캡스톤으로 마무리됩니다.
작동 방식
각 과정은 내장된 코드 에디터에서 실시간 피드백으로 완료하는 짧고 집중된 레슨으로 나뉩니다. 막힐 때는 언제든 AI 튜터를 이용할 수 있으며, 모든 개념은 다음 주제로 넘어가기 전에 실습 연습으로 강화됩니다.