Svelet.js 란 무엇이고 스터디 일정표 샘플

Svelte란?

1. Svelte 개요

Svelte(스벨트)는 컴파일러 기반 프론트엔드 프레임워크로, 기존 React, Vue 같은 라이브러리와 다르게 컴포넌트를 빌드 시 순수 JavaScript 코드로 변환하여 실행 속도를 최적화하는 방식으로 동작한다.

✅ 공식 사이트: https://svelte.dev
✅ 출시 연도: 2016년
✅ 창시자: Rich Harris
✅ 특징:

• 런타임 없이 컴파일 단계에서 최적화
• 가벼운 번들 사이즈
• React/Vue보다 빠른 성능
• Vanilla JS와 유사한 문법
• 자동 반응형 상태 관리
• SvelteKit을 활용한 풀스택 개발 가능

2. Svelte vs React/Vue 비교

특징 Svelte React Vue

특징	Svelte	React	Vue
방식	컴파일러	가상 DOM	가상 DOM
파일 크기	작음 (~3KB)	큼 (~40KB)	중간 (~20KB)
상태 관리	$:로 자동 반응형	useState, Redux/Zustand	Vuex, Pinia
퍼포먼스	빠름 (바로 DOM 업데이트)	가상 DOM으로 비교 후 변경	가상 DOM으로 비교 후 변경
런타임 부담	없음 (컴파일 시 처리)	있음 (랜더링 시점에 처리)	있음 (랜더링 시점에 처리)
진입 장벽	낮음	중간	낮음

3. Svelte의 주요 개념

① 반응형 선언 ($:)

<script>
  let count = 0;
  $: double = count * 2; // count가 변경되면 자동 업데이트
</script>

<button on:click={() => count++}>+</button>
<p>Double: {double}</p>

② Props 전달

<!-- Parent.svelte -->
<script>
  let message = "Hello Svelte!";
</script>

<Child message={message} />

<!-- Child.svelte -->
<script>
  export let message;
</script>

<p>{message}</p>

③ Store를 활용한 상태 관리

<script>
  import { writable } from "svelte/store";

  export const count = writable(0);
</script>

<button on:click={() => count.update(n => n + 1)}>+</button>
<p>{$count}</p>

---

4. SvelteKit – 풀스택 개발 지원

✅ SvelteKit은 Svelte의 공식 풀스택 프레임워크로, Next.js, Nuxt.js와 같은 역할을 한다.
✅ 파일 기반 라우팅, SSR/SSG 지원, API 구축 가능
✅ Firebase, Supabase, Prisma 같은 백엔드 연동이 용이함

// +page.svelte
<script>
  export let data;
</script>

<h1>{data.title}</h1>

<script context="module">
  export async function load() {
    return {
      title: "SvelteKit을 배워보자!"
    };
  }
</script>

---

5. Svelte 사용처 & 전망

• ✅ 빠른 성능과 가벼운 번들 크기 덕분에 모바일 웹, 대시보드, SaaS 등에 적합
• ✅ 일부 기업 (Spotify, Apple, New York Times 등)에서 채택 중
• ✅ 커뮤니티 성장 중이나, React/Vue만큼 생태계가 크진 않음
• ✅ SvelteKit의 발전으로 풀스택 개발이 가능해지면서 채택률 증가 예상

📌 추천 학습 경로:
1️⃣ 기본 문법 학습 

2️⃣ 미니 프로젝트 (To-Do 리스트) 

3️⃣ Svelte Store & API 연동 

4️⃣ SvelteKit 활용 

5️⃣ 배포 및 실전 프로젝트 진행 

 

4주 Svelte.js 실무 커리큘럼 (하루 3시간 학습 기준) – 데일리 일정

Day 학습 내용 주요 개념 및 실습

1일차	Svelte 소개 및 개발 환경 구축	- Svelte 철학 및 기본 개념 - Node.js 및 Svelte 설치 - 프로젝트 초기 설정 (npx degit sveltejs/template my-svelte-app)
2일차	Svelte 기본 문법 익히기	- 템플릿 문법 ({}) - 반응형 상태 ($:, let) - 이벤트 핸들링 (on:click, on:input)
3일차	Props 및 Slot을 활용한 컴포넌트	- Props (export let) - Slot을 활용한 컴포넌트 확장 - 기본 스타일링 기법
4일차	반응형 선언 및 라이프사이클	- $:를 활용한 반응형 데이터 - onMount, beforeUpdate, afterUpdate, onDestroy 라이프사이클
5일차	Svelte 스타일링 기법	- Scoped CSS 및 글로벌 스타일 - Tailwind CSS 적용 - CSS-in-JS 기법
6-7일차	미니 프로젝트 ① - To-Do 리스트 만들기	- CRUD 기능 구현 - LocalStorage 활용 - 반응형 UI 적용
8일차	Svelte Store 개념 및 활용	- writable, readable, derived store 개념 - $store 문법을 이용한 상태 접근
9일차	Store를 활용한 전역 상태 관리	- get()을 활용한 Store 데이터 가져오기 - 여러 개의 Store 연동 - Context API 활용
10일차	API 호출 및 비동기 처리	- fetch 및 async/await - onMount를 활용한 데이터 로딩 - API 호출 후 Store와 연동
11일차	Svelte Transition & Animation	- fade, slide, fly, scale, draw 애니메이션 - 사용자 정의 애니메이션 적용
12일차	Svelte의 모듈 시스템과 코드 분리	- Component 재사용성 고려 - export let과 import 구조 - 모듈을 이용한 코드 설계
13-14일차	미니 프로젝트 ② - 뉴스 피드 앱 만들기	- API를 활용한 뉴스 데이터 가져오기 - Skeleton UI 적용 - 애니메이션을 활용한 UX 개선
15일차	SvelteKit 소개 및 프로젝트 설정	- SvelteKit의 특징과 Next.js/Vue3와 비교 - npm init svelte@next로 SvelteKit 프로젝트 설정 - 파일 기반 라우팅 개념
16일차	SvelteKit의 라우팅 시스템	- 동적 라우팅 ([slug].svelte) - 페이지 간 데이터 전달 (load()) - 서버 사이드 렌더링 (SSR) 이해
17일차	SvelteKit의 Form과 데이터 처리	- form actions 활용 - 서버에서 POST 요청 처리 - 데이터 검증 및 유효성 검사
18일차	SvelteKit과 데이터베이스 연동	- Supabase 또는 Firebase를 활용한 백엔드 연동 - CRUD 기능 구현 - 사용자 인증 시스템 적용
19일차	상태 관리 및 SEO 최적화	- use:action을 활용한 DOM 조작 - SEO 최적화 (<svelte:head>, meta 태그) - 다이나믹 페이지 생성
20-21일차	미니 프로젝트 ③ - 블로그 앱 만들기	- 정적 사이트 생성 (SSG) - Markdown을 활용한 게시글 렌더링 - Firebase 댓글 기능 구현
22일차	성능 최적화	- 코드 스플리팅 및 Lazy Loading - Svelte의 반응형 성능 최적화 ($:, store, $store) - svelte-preprocess 활용
23일차	Svelte 애플리케이션 배포	- Vercel 또는 Netlify를 활용한 배포 - Docker를 활용한 컨테이너 배포 - GitHub Actions를 활용한 CI/CD
24일차	PWA (Progressive Web App) 적용	- Service Worker 적용 - 오프라인 캐시 및 푸시 알림
25일차	프로젝트 유지보수 및 확장	- 코드 리팩토링 기법 - 테스트 코드 작성 (Jest + Playwright) - 대규모 애플리케이션 구조 설계
26-27일차	최종 프로젝트 - 대시보드 웹앱 만들기	- 차트 및 데이터 시각화 (D3.js, Chart.js) - API 연동 및 대시보드 UI 구성 - 고급 애니메이션 적용
28일차	최종 점검 및 포트폴리오 정리	- 코드 리뷰 및 리팩토링 - GitHub README 정리 - 포트폴리오 배포 및 피드백 반영