1. 런타임 라이브리러 vs 컴파일러?
대부분의 현대 프레임워크(React, Vue 등)는 브라우저에서 코드가 실행될 때 작동하는 "런타임 라이브러리" 방식을 취하는
반면, Svelte는 코드를 빌드하는 시점에 모든 일을 끝내는 "컴파일러"이다.
"Svelte는 새로운 프레임워크가 아니라, 프레임워크 없는 코드를 생성하는 컴파일러다."
2. React vs Svelte 비교
2.1 React : 런타임 중심 (Runtime-driven)
React는 브라우저가 실행되는 동안 계속해서 "중재자" 역할을 수행한다.
- 개발: JSX 문법으로 코드 작성 (.jsx)
- 변환 (Babel): 브라우저가 이해하도록 문법만 변환 (JSX → React.createElement)
- 실행 (Browser):
- 사용자가 접속하면 거대한 React 라이브러리 파일이 함께 다운로드됨.
- 브라우저 메모리상에 Virtual DOM(가상 돔)을 생성.
- 데이터 변경 시, Virtual DOM을 비교(Diffing)하고 변경 사항을 실제 DOM에 반영.
▶ 특징: 브라우저가 할 일이 많음 (비교 연산, 라이브러리 로딩).
2.2 Svelte : 컴파일 타임 중심 (Compile-time driven)
Svelte는 개발자가 작성한 코드를 브라우저에 보내기 전에 미리 "최적화된 순수 자바스크립트"로 바꿔버린다.
- 개발: Svelte 문법으로 코드 작성 (.svelte)
- 컴파일 (Svelte Compiler):
- 코드를 분석하여 어디가 바뀌어야 하는지 미리 계산.
- React 같은 프레임워크 엔진을 제거하고, DOM을 직접 제어하는 순수 JS 코드를 생성.
- 실행 (Browser):
- 프레임워크 라이브러리가 없음 (0kb에 가까움).
- Virtual DOM 없음. 미리 짜여진 계획대로 DOM을 즉시 수정
▶ 특징: 빌드(컴파일) 때 할 일을 다 끝냄. 브라우저는 가벼운 순수 JS만 실행