Svelte 배우기 - 코딩 강좌
Svelte 배우기 - 코딩 강좌 — 라이브 에디터와 컴파일된 출력 결과를 나란히 보며 Svelte와 SvelteKit을 배워요
Svelte 배우기 - 코딩 강좌는 휴대폰으로 Svelte와 SvelteKit을 배울 수 있는 무료 iOS 및 Android 앱이에요. 미리보기가 제공되는 라이브 에디터에서 컴포넌트를 작성하고, 컴파일러가 컴포넌트를 변환한 JavaScript를 확인하며, 첫 번째 반응형 값부터 배포된 풀스택 앱까지 41개 코스를 학습할 수 있어요. 곁에는 AI Mentor도 함께해요.
- 가격
- 무료, Pro 업그레이드
- 플랫폼
- iOS 및 Android
- 언어
- 22
- 연령 등급
- 4+
- 필요 사항
- iOS 15.1 이상
그 화면에서 실행되는 것은 Svelte가 아니에요. Svelte가 작성한 코드가 실행되고 있어요.
앱의 첫 번째 레슨에서는 9줄짜리 컴포넌트와 컴파일러가 이를 위해 생성한 JavaScript를 나란히 보여줘요. +1을 탭하면 실행되는 줄이 강조 표시돼요. 무효화 한 번, 다시 계산되는 값 하나, 변경되는 텍스트 노드 두 개, 그 외에는 아무것도 건드리지 않아요. 프레임워크의 핵심 개념을 설명하기 전에 먼저 보여주는 방식이에요.
어떤 앱인가요
Svelte 배우기 - 코딩 강좌는 41개 코스와 163개 레슨을 통해 초급부터 고급까지 Svelte와 SvelteKit을 가르치는 무료 iOS 및 Android 앱이에요. 컴포넌트와 컴파일된 JavaScript를 나란히 보여주는 데모로 시작한 다음, 반응성, props, stores, transitions, Svelte 5 runes와 SvelteKit 라우팅, 데이터 로딩, form actions 및 배포를 다뤄요. 미리보기가 제공되는 라이브 에디터와 AI Mentor도 내장되어 있어요.
앱 내부 살펴보기
화면은 어떻게 보이나요
강좌
Svelte 코스에서 다루는 내용
앱 자체 코스 목록에서 제공하는 41개 코스와 163개 레슨으로, A1부터 C1까지 단계별로 구성되며 완성형 풀스택 SvelteKit 프로젝트로 마무리해요.
첫 번째 컴포넌트
Svelte가 무엇이고 왜 다른 접근 방식을 사용하는지, 프로젝트 설정 방법, 반응형 변수로 첫 번째 컴포넌트를 작성하는 방법을 배워요.
Props, Templates, Events 및 Binding
마크업에서 props 전달, 조건문과 each 루프, DOM 이벤트와 커스텀 이벤트, bind: 디렉티브를 사용한 양방향 바인딩을 다뤄요.
Lifecycle, Stores 및 Context
onMount와 onDestroy, writable·readable·derived 및 커스텀 stores, 슬롯과 컴포지션, Context API를 배워요.
Transitions, Animations 및 Actions
Transition 디렉티브, animate 디렉티브, 재사용 가능한 DOM 동작을 위한 actions, 커스텀 transitions, spring 및 tweened 모션 stores를 다뤄요.
SvelteKit 기초
파일 기반 라우팅과 페이지, load 함수, 고급 레이아웃, form actions, API routes, server hooks 및 오류 페이지를 배워요.
Svelte 5 Runes
runes 입문, props와 snippets, 고급 runes, Svelte의 반응성이 작동하는 방식을 더 깊이 살펴봐요.
프로덕션 환경의 SvelteKit
SSR과 prerendering, streaming, 성능, SEO와 meta tags, 보안, 인증 패턴, adapters 및 배포를 다뤄요.
테스트 및 풀스택
Vitest를 사용한 단위 테스트, Playwright를 사용한 엔드투엔드 테스트, 서드파티 라이브러리, 대규모 상태 관리, 풀스택 SvelteKit 앱을 배워요.
어떻게 작동하나요
학습 세션 진행 방식
앱은 하나의 반응형 값에서 배포 가능한 앱까지 이어지는 경로를 중심으로 구성되어 있으며, 각 단계에서는 읽기와 직접 실행해 보기를 함께 진행해요.
먼저 컴파일러의 출력 결과를 확인해요
첫 데모에서는 작은 컴포넌트와 컴파일 결과인 JavaScript를 나란히 보여줘요. 컴파일된 부분은 미리 생성되어 앱 안에 포함되어 있으므로, 인터넷 연결 없이도 데모를 실행할 수 있어요.
컴포넌트를 편집하고 미리 봐요
레슨을 열면 HTML, CSS 및 JavaScript 탭과 컴포넌트를 미리보기에서 렌더링하는 실행 버튼이 있는 에디터가 표시돼요. 미리보기는 네트워크를 통해 Svelte 컴파일러를 로드하므로 연결이 필요해요.
제대로 익혔는지 확인해요
각 주제 뒤에는 퀴즈와 코딩 도전 과제가 이어지며, AI Mentor에게 개념 설명, 학습 로드맵 제안 또는 코스 퀴즈를 요청할 수 있어요. Weekly Code Challenge에서는 경쟁 형식의 라운드에도 참여할 수 있어요.
무엇이 들어 있나요
앱에 포함된 기능
41
A1부터 C1까지의 코스
Svelte 설정과 첫 번째 컴포넌트부터 stores, transitions, SvelteKit 라우팅과 hooks, Svelte 5 runes, 테스트 및 풀스택 최종 프로젝트까지, 41개 코스에 걸쳐 163개 레슨을 제공해요.
컴파일 결과
컴포넌트와 컴파일된 코드 나란히 보기
처음 실행되는 데모에서는 소스와 생성된 JavaScript를 함께 보여주고, 다시 생성된 요소와 비교해 업데이트된 텍스트 노드 수를 계산해요. 따라서 업데이트 비용을 화면에서 직접 확인할 수 있어요.
미리보기
미리보기가 제공되는 라이브 에디터
별도의 탭에서 마크업, 스타일 및 script를 작성하고 휴대폰에서 컴포넌트를 렌더링해요. 미리보기는 Svelte 4.2.19 컴파일러를 사용하므로 Svelte 5 runes로 작성한 코드는 미리보기에서 작동하지 않을 수 있으며, 읽고 따라 해보는 방식이 더 적합해요.
AI
AI Mentor
채팅 탭에서 코스의 핵심 개념, 더 빠르게 학습하는 팁, 퀴즈 또는 개인 맞춤 로드맵을 요청하거나, 이해하기 어려운 오류에 대해 질문할 수 있어요.
주간
Weekly Code Challenge
레슨과 함께 정기적인 도전 라운드에 참여해 경쟁할 수 있으며, 연속 학습 기록, 진행 상황 추적 및 알림으로 학습 루틴을 이어갈 수 있어요.
시험
수료증
최종 시험에 합격하면 이름이 적힌 수료증을 받을 수 있어요. 다만 공인 자격이 아니라 학습한 작업의 증거로 제공돼요.
배경
Svelte란 무엇이며, 웹 인터페이스를 만드는 다른 방식과는 어떻게 다른가요?
Svelte는 사용자 인터페이스를 만들기 위한 프레임워크로, 컴포넌트를 미리 컴파일해 페이지를 직접 업데이트하는 일반 JavaScript로 변환해요. 브라우저에서 변경 사항을 계산하는 대규모 런타임을 함께 제공하는 방식이 아니에요. 컴포넌트는 마크업, 스타일, script가 하나의 파일에 들어 있는 구조이며, count += 1 같은 할당문만으로도 화면을 업데이트할 수 있어요. SvelteKit은 그 위에 구축된 애플리케이션 프레임워크로, 파일 기반 라우팅, 서버 측 데이터 로딩, form 처리 및 배포를 위한 adapters를 추가해요. 학습자에게는 보일러플레이트가 줄어들고 코드와 페이지에 나타나는 결과 사이의 거리가 짧아진다는 실질적인 효과가 있어요.
컴파일 시점 반응성할당문이 곧 상태예요
Svelte에서 컴파일러는 일반 할당문을 페이지에서 영향을 받는 부분을 업데이트하는 코드로 다시 작성해요. $:로 시작하는 라벨이 붙은 문은 읽어오는 값이 변경될 때마다 값을 다시 계산하므로, 파생 데이터에 별도의 헬퍼 함수가 필요하지 않아요.
Stores컴포넌트 간 공유 상태
writable store는 여러 컴포넌트가 구독할 수 있는 값을 보관하며, 이름 앞에 $를 붙이면 자동으로 구독할 수 있어요. 상태를 계산하거나 감싸야 할 때는 derived store와 custom store가 이를 기반으로 확장해요.
RunesSvelte 5 문법
Svelte 5는 이전의 컴파일러 마법 상당 부분을 $state, $derived, $props 같은 명시적인 함수와 재사용 가능한 마크업을 위한 snippets로 대체해요. 실제 프로젝트에서는 두 스타일이 모두 사용되므로, 앱에서는 기존 모델과 runes 모델을 별도의 코스로 가르쳐요.
SvelteKit라우팅, 데이터 및 배포
+page.svelte 같은 파일은 라우트가 되고, load 함수는 페이지가 렌더링되기 전에 데이터를 가져와요. form actions는 서버에서 제출을 처리하고, adapter는 결과를 static host, Node server 또는 serverless platform에 맞게 패키징해요.
나에게 잘 맞는지
누구에게 적합하고, 누구에게는 적합하지 않은지
다음과 같은 분께 잘 맞아요
- 긴 동영상 코스 대신 짧은 세션으로 Svelte나 SvelteKit을 배우고 싶나요?
- HTML과 JavaScript를 조금 알고 있으며 컴파일러 우선 프레임워크가 무엇을 바꾸는지 알아보고 싶나요?
- 반응형 업데이트가 어떻게 작동하는지 궁금하고, 결과를 그대로 믿기보다 생성된 코드를 직접 읽는 방식을 선호하나요?
- 컴포넌트에만 머무르지 않고 라우팅, 데이터 로딩, 인증, 배포까지 이어지는 학습 경로를 원하나요?
- 코드가 왜 그렇게 작동하는지 AI Mentor에게 질문하고 싶나요?
다음과 같은 경우에는 적합하지 않아요
- Svelte 4.2.19 컴파일러를 사용하는 미리보기에서 Svelte 5 runes 코드를 실행하고 싶나요?
- 아직 노트북이 필요한 작업인 전체 SvelteKit 프로젝트를 휴대폰에서 빌드하고 배포해야 하나요?
- 모든 기능이 무료이길 기대하나요? 첫 번째 코스는 무료이고 Pro에서 나머지 코스를 잠금 해제해요.
- HTML이나 JavaScript를 한 번도 접해 본 적이 없으며 프레임워크를 배우기 전에 일반 프로그래밍 코스를 원하나요?
질문
자주 묻는 질문
휴대폰에서 Svelte를 어떻게 배울 수 있나요?
읽기와 코드 실행을 함께할 수 있는 학습 경로를 선택해 보세요. 값을 바꾸고 페이지가 반응하는 모습을 확인할 때 Svelte를 가장 쉽게 이해할 수 있기 때문이에요. Svelte 배우기 - 코딩 강좌는 컴파일된 출력 데모로 시작한 다음 HTML, CSS, JavaScript 편집기, 미리보기, AI Mentor가 포함된 레슨을 제공해요. iOS와 Android에서 무료로 시작할 수 있어요.
초보자가 Svelte를 배우기 어렵나요?
Svelte는 컴포넌트가 일반적인 HTML, CSS, JavaScript처럼 보이고 할당문 하나로 화면이 업데이트되기 때문에 배우기 쉬운 편으로 여겨져요. 하지만 stores, lifecycle, SvelteKit의 서버와 클라이언트 분리, Svelte 5 runes로의 전환을 다루면서 더 어려운 부분이 등장해요. Svelte 배우기 - 코딩 강좌는 41개 코스를 A1부터 C1까지 단계별로 구성해 이러한 주제를 순서대로 배울 수 있게 해요.
SvelteKit이 무엇이며 앱에서 가르치나요?
SvelteKit은 Svelte를 위한 애플리케이션 프레임워크로, 파일 기반 라우팅, 서버에서의 데이터 로딩, form actions, hooks, 배포 adapters를 추가해요. Svelte 배우기 - 코딩 강좌에는 SvelteKit 라우팅과 페이지, 데이터 로딩, form actions, API routes, hooks, 오류 처리, SSR과 prerendering, streaming, 보안, adapters를 다루는 전용 코스가 있어요.
앱에서 Svelte 5 runes를 다루나요?
네. Svelte 배우기 - 코딩 강좌에는 runes 입문, props와 snippets, 고급 runes를 다루는 코스가 포함되어 있어요. 편집기의 미리보기는 현재 Svelte 4.2.19로 컴파일되므로 runes 코드는 미리보기에 표시되지 않을 수 있으며, 레슨 텍스트를 따라 학습하는 것이 가장 좋아요.
휴대폰에서 Svelte 코드를 실행할 수 있나요?
편집기에서 컴포넌트를 작성하고 미리보기에서 렌더링할 수 있어요. Svelte 배우기 - 코딩 강좌의 미리보기는 컴포넌트를 빌드하기 위해 Svelte 컴파일러를 로드하므로 연결이 필요해요. 처음에 나오는 컴파일된 출력 데모는 이와 달라서, 컴파일된 코드가 앱에 포함되어 네트워크 없이 실행돼요.
Svelte 배우기 - 코딩 강좌는 무료인가요?
앱은 무료로 다운로드할 수 있어요. 첫 번째 코스는 무료이며 매일 사용할 수 있는 AI Mentor 이용량이 제공돼요. Pro에서는 모든 코스를 잠금 해제하고 광고를 제거하며 AI Mentor를 무제한으로 이용할 수 있어요. 업그레이드할지 결정하기 전에 실제 레슨을 먼저 학습해 볼 수 있어요.
먼저 JavaScript를 알아야 하나요?
Svelte 컴포넌트는 한 파일 안에서 이 언어들을 함께 사용하는 형태이므로 HTML과 JavaScript를 조금 알고 있으면 초반 코스를 더 쉽게 배울 수 있어요. Svelte 배우기 - 코딩 강좌는 Svelte가 무엇이고 어떻게 설정하는지부터 시작해 각 개념을 쉬운 말로 설명하지만, 첫 프로그래밍 코스가 아닌 프레임워크 코스예요.
어떤 플랫폼과 언어를 지원하나요?
Svelte 배우기 - 코딩 강좌는 App Store를 통한 iOS와 Google Play를 통한 Android에서 사용할 수 있으며, 인터페이스는 22개 언어로 제공돼요. 4+ 등급이므로 콘텐츠에는 연령 제한이 없어요.
시작하기
오늘 첫 번째 컴포넌트를 컴파일해 보세요
iOS와 Android에서 22개 언어로 무료로 시작할 수 있어요.
CoddyKit의 다른 앱
iOS 및 Android에서 이용할 수 있어요.