Svelte 핵심 개념

• 반응성(Reactivity): Svelte의 가장 중요한 특징으로, 데이터가 변경되면 자동으로 UI가 업데이트됨
• 컴파일 타임 최적화: React/Vue와 달리 빌드 시점에서 최적화되어 런타임 성능이 우수함
• 가상 DOM 없음: 직접 DOM을 조작하여 더 빠른 성능 제공
  빌드 시 생성되는 번들의 크기가 작아 SPA의 단점을 보완 가능

문법 및 구조

• HTML, CSS, JavaScript 통합: 하나의 .svelte 파일에서 모든 것을 관리
• 프레임워크보다는 컴파일러: 순수 자바스크립트로 변환되어 번들 크기가 작음
• Vue-like한 문법: Vue 경험이 있다면 학습 곡선이 완만함

번들링
개발시 파일과 모듈을 하나로 묶어 최적화하여 브라우저에서 실행 가능한 형태로 구성하는 과정(번들 사이즈에 따라 페이지 구동 시간의 차이 발생)

중요한 학습 포인트

• DOM 조작 방식: Svelte는 가상 DOM 대신 효율적인 DOM 업데이트 사용
• 상태 관리: 간단한 반응성 시스템으로 복잡한 상태 관리 라이브러리 없이도 가능
• 컴포넌트 구조: 재사용 가능한 컴포넌트 작성 방법 익히기

실무 관련

• 빌드 도구: Vite 등 최신 빌드 도구와의 호환성
• 생태계: 아직 React/Vue 대비 작지만 빠르게 성장 중
• 성능: 특히 작은 규모부터 중간 규모 프로젝트에서 뛰어난 성능