[나채공] Svelte은 무엇일까?

나채공은 나를 채우는 공부라는 뜻으로 부족한 것과 궁금한 것 그리고 알고싶은 것을 난이도 따지지 않고 정리하면 알아가는 것입니다.

Svelte이란?

https://svelte.dev/

Svelte는 컴파일러를 사용하는 UI 프레임워크로, 여러분이 이미 알고 있는 HTML, CSS, JavaScript와 같은 언어를 사용하여 놀랄 만큼 간결한 컴포넌트를 작성할 수 있게 해줍니다. 그리고 브라우저에서 최소한의 작업만 하도록 만들어집니다. 이는 웹 개발에 대한 사랑의 편지입니다.

Svelte는 프론트엔드 UI 프레임 워크로, 컴파일러 기반으로 작동합니다. 다른 프론트엔드 프레임워크와 달리, Svelte는 런타임에 DOM을 업데이트하는 방식이 아니라, 빌드 타임에 컴파일을 통해 최적화된 코드를 생성합니다.

여기서 런타임에 DOM을 업데이트 하는 방식이란 무엇일까요?

쉽게 요리는 우리가 만들려는 앱 또는 웹 페이지, 요리사는 개발자, 재료는 프로그래밍 언어와 도구라고 생각하고 음식을 만든다고 생각을 해보겠습니다.

요리를 하면서 계속 재료를 추가하는 것 같다고 이해하면 됩니다. 요리사가 요리하는 동안 계속해서 재료를 넣고 섞으면서 음식을 만들기 때문에 음식이 완성될 때까지 계속해서 무언가 추가하고 수정해야합니다.

그래서 시간이 걸리고 요리를 하는 동안 시간이 갑니다.

그렇다면 빌드 타임에 컴파일을 통해 최적화된 코드를 생성하는 방식은 무엇일까요?

요리를 하기 전에 미리 재료를 준비하고, 조리법을 정리한 뒤에 한 번에 빠르게 요리하는 것과 같습니다. 요리사가 미리 모든 재료를 준비하고, 요리법을 정리한 뒤에 한 번에 오리를 끝내는 것이기 때문에 비교적 빠릅니다.

즉, Svelte는 미리 프로그래밍 언어와 도구를 준비해서 개발자가 더 빠르고 효율적으로 어플리케이션을 만들수 있는 최적화된 코드를 제공하는 방법입니다.

빌드 타임: 우리가 만든 소스코드가 실행되기 전에 준비되는 시간

런타임: 프로그램이 실행되는 시간, 프로그램이 실제 동작하고 있을 때를 의미

DOM: Document Object Model의 약자로, 웹 페이지를 구성하는 모든 요소들을 객체 형태로 표현한 것

➡️ 웹 페이지의 구성 요소들을 컴퓨터가 이해할 수 있는 형태로 바꾼 것

Svelte의 특징

1. 컴파일러 기반

   Svelte는 다른 프레임워크처럼 런타임에 코드가 실행되는 것이 아니라, 개발자가 작성한 코드를 빌드 타임에 컴파일하여 최적화된 자바스크립트 코드로 변환합니다. 이를 통해 불필요한 코드가 없고, 앱이 더 가볍고 빠릅니다.

2. 간결한 코드

   Svelte는 선언적인 문법을 사용하여 개발자가 직관적으로 코드를 작성할 수 있게 해줍니다. HTM, CSS, JavaScript를 한 파일 안에서 함께 사용할 수 있어 관리하기 쉽습니다.

3. 상태 관리

   Svelte는 내장된 상태 관리 시스템을 제공하여 외부 상태 관리 라이브러리를 추가할 필요 없이 상태를 효율적으로 관리할 수 있습니다.

4. 반응성

   Svelte의 반응성 시스템은 변수에 의존하는 값들이 자동으로 업데이트되도록 만들어 줍니다. 이를 통해 복잡한 상태 변경 로직을 직접 처리할 필요 없이, UI가 자연스럽게 동기화됩니다.

5. 경량화된 코드

   Svelte 애플리케이션은 다른 프레임워크들보다 상대적으로 작은 번들 사이즈를 자랑합니다. 빌드 후 생성되는 코드가 매우 가벼워서 초기 로딩 속도가 빠릅니다.

---

다음시간에는 Svelte 공식 문서에 나와있는 튜토리얼을 따라해보겠습니다!