Svelte 란?

Svelte

뭔가.. Svelte 가 뜰 것 같다.. 미리 공부를 좀 해보자....

다른 프레임워크, 라이브러리와 달리 프론트 엔드 컴파일러입니다.
다른 프레임워크들과 달리 빌드된 시점에 스벨트 코드를 순수 자바스크립트로 변환하여 프레임워크의 문제점인 용량(다른 라이브러리들이 번들에 포함되지 않아 용량이 적음), 속도(예를 들어 첫 로드되는 화면이 다른 SPA 프레임워크보다 빠름)의 문제가 해결되는 장점이 있다.

Svelte 를 사용하면 이런게 좋아요.

적은 코드로 작성할 수 있다 (다른 프레임워크들에 비해.)

높은 가독성 (html, css, js)

작은 번들 (라이브러리 빠지고 순수 자바스크립트 용량만 있음.)

낮은 러닝 커브 (다른 React, Vue, Angular 에 비해 쉬움.)

가성돔 사용하지 않음.(가상돔을 이용하지 않고 기존의 돔과 비교하여 바로 돔을 변경하는 방식을 채택함으로 가상 돔과 기존의 돔을 비교하는 시간을 없애버렸다.)

설치

// 스벨트 프로젝트 설치
npx degit sveltejs/template svelte_stduy

// 폴더 이동
cd svelte_study

// 패키지 설치
yarn

// 실행
yarn dev

코드

script 에 선언한 변수를 바로 html 로직에서 사용할 수 있는 것을 볼 수 있다. 이것 만으로 Vue, React 에 비해 얼마나 간단한지
알 수 있음.

<script>
    export let name;
</script>

<main>
    <h1>Hello {name}!</h1>
    <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>

<style>
    main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }

    h1 {
        color: #ff3e00;
        text-transform: uppercase;
        font-size: 4em;
        font-weight: 100;
    }

    @media (min-width: 640px) {
        main {
            max-width: none;
        }
    }
</style>