Flowbite Svelte #1 - Svelte 소개

Svelte 란 무엇인가?

Svelte가 뭔지 Gemini에게 물어 봤습니다.

"Svelte는 Rich Harris가 만들고 현재 Svelte 핵심 팀에서 유지 관리하는 무료 오픈 소스 구성 요소 기반 프런트엔드 자바스크립트 프레임워크입니다. 컴파일러 기반 프레임워크로서, 가상 DOM을 사용하지 않고 런타임 동안 변경 사항을 직접 DOM에 적용하기 때문에 빠르고 효율적이며, 또한 작고 가볍습니다."

 

Svelte 공식 홈페이지 : https://svelte.dev/

Svelte • Cybernetically enhanced web apps

Rich Harris의 Github https://github.com/Rich-Harris

Rich-Harris - Overview

Rich Harris는 Svelte 프레임워크의 창작자이자 SvelteKit의 공동 창작자입니다. 그는 또한 Rollup 번들러의 주요 개발자이기도 합니다.

 

Svelte가 가상 DOM을 사용하지 않고 런타임 동안 변경 사항을 직접 DOM에 적용하기 때문에 빠르고 효율적이며 작고 가벼운 이유는 다음과 같습니다.

1. 컴파일러 기반 최적화:

• Svelte는 컴파일 단계에서 템플릿을 분석하고 변경 사항을 적용하는 코드를 최적화합니다. 이는 런타임 중 불필요한 연산을 줄여 성능을 향상시킵니다.
• 가상 DOM을 사용하는 프레임워크는 런타임 중 가상 DOM 트리를 비교하고 변경 사항을 계산해야 합니다. 이 과정은 추가적인 처리 부담을 야기할 수 있습니다.

 

2. 직접 DOM 조작:

• Svelte는 변경 사항을 직접 DOM에 적용하기 때문에 가상 DOM 트리를 유지 관리하거나 비교할 필요가 없습니다.
• 가상 DOM을 사용하는 프레임워크는 가상 DOM 트리를 실제 DOM과 동기화해야 합니다. 이 과정은 추가적인 작업과 메모리 사용량을 야기할 수 있습니다.

 

3. 코드 크기 감소:

• Svelte는 가상 DOM이 필요하지 않기 때문에 코드 크기가 작고 가볍습니다.
• 가상 DOM을 사용하는 프레임워크는 가상 DOM 관련 코드를 추가로 포함해야 합니다.

 

4. 간단한 API:

• Svelte는 가상 DOM이 없기 때문에 API가 더욱 간결하고 명확합니다.
• 가상 DOM을 사용하는 프레임워크는 가상 DOM 관련 API를 추가로 제공해야 합니다.

 

5. 빠른 초기 렌더링:

• Svelte는 컴파일러 기반 최적화 덕분에 초기 렌더링 속도가 매우 빠릅니다.
• 가상 DOM을 사용하는 프레임워크는 런타임 중 가상 DOM 트리를 생성하고 초기 렌더링해야 합니다. 이 과정은 Svelte보다 느릴 수 있습니다.

 

6. 작은 메모리 사용량:

• Svelte는 가상 DOM이 없기 때문에 메모리 사용량이 적습니다.
• 가상 DOM을 사용하는 프레임워크는 가상 DOM 트리를 메모리에 유지해야 합니다. 이는 특히 큰 애플리케이션에서 메모리 사용량을 증가시킬 수 있습니다.

 

7. 모바일 최적화:

• Svelte는 모바일 장치에서 실행하기 위한 최적화가 되어 있습니다.
• 가상 DOM을 사용하는 프레임워크는 모바일 장치에서 성능 저하를 초래할 수 있는 추가적인 처리 부담을 야기할 수 있습니다.

 

결론적으로 Svelte는 가상 DOM을 사용하지 않고 컴파일러 기반 최적화, 직접 DOM 조작, 코드 크기 감소, 간단한 API, 빠른 초기 렌더링, 작은 메모리 사용량, 모바일 최적화 등의 장점을 통해 빠르고 효율적이며 작고 가벼운 프레임워크입니다.