Svelte 설명 ...

Svelte는 다른 것과는 다른 프레임워크이며 Stack Overflow에 따르면 2021년에 세계에서 가장 사랑받는 프레임워크입니다[1]. Svelte 문서는 정말 잘 작성되어 있으며 Svelte를 이해하는 데 도움이 되는 대화형 IDE도 있습니다. 프레임워크의 주요 초점은 매우 다재다능하고 가벼우며 컴파일러인 Svelte Kit가 무거운 작업을 수행하도록 하면서 코드를 적게 작성하는 것입니다. javascript 또는 typescript를 .svelte 파일에 직접 작성하는 HTML 템플릿을 사용하는 구성 요소 기반 프레임워크입니다.

CDN 링크를 사용하거나 노드를 통해 프로젝트를 설치하여 Svelte 작성에 액세스할 수 있습니다. svelte를 설치하는 가장 쉬운 방법은 다음 명령을 실행하는 것입니다.

npm create svelte@latest my-app
cd my-app
npm install
npm run dev -- --open

이렇게 하면 첫 번째 프로젝트를 시작할 수 있는 템플릿이 제공됩니다. 간단한 "Hello World"를 구축하는 것은 일반 HTML을 작성하는 것만큼이나 간단하며 첫 번째 날렵한 코드를 작성했습니다. in script 태그에서 javascript를 처리하고 {} 에서 변수 이름을 래핑하여 HTML에 변수를 전달합니다.

<script>
const name = "Jorge"
</script>
<p>Hello {name}!</p>

페이지에 "Hello Jorge"가 표시되는 만큼 간단합니다. 스타일은 스타일 태그 내부에 작성되며 동일한 태그를 공유할 수 있는 다른 가져오기의 영향을 받지 않습니다. 이는 Svelte의 모듈화에 도움이 됩니다. 모두 동일한 svelte 파일에 있습니다. 이벤트 핸들러here를 추가하는 방법을 이해하려면 Svelte REPL에서 만든 항목에 대한 링크를 참조하십시오. 함수 이름이 있는 작업on:click은 클릭 시 해당 함수를 호출합니다. Svelte에는 다음과 같은 IF 블록과 같은 논리를 사용할 수 있는 HTML에 직접 작성할 수 있는 특수 구문도 있습니다.

<script>
    let toggler = { on: false };

    function toggle() {
        toggler.on = !toggler.on;
    }
</script>

{#if toggler.on}
    <button on:click={toggle}>
        ON
    </button>
{/if}

{#if !toggler.on}
    <button on:click={toggle}>
        OFF
    </button>
{/if}

이 코드에는 on을 클릭하면 서로 토글되는 두 개의 버튼이 있습니다. 코드의 if 블록 로직을 사용하여 off로 전환됩니다.

Svelte 구성 요소는 파일에서 다른 파일로 내보내는 별도의 svelte 파일입니다. 내보낼 때 내보내기 키워드를 사용하면 이제 내보낸 svelte 파일에 가져오는 파일에 액세스할 수 있습니다. 가져온 파일은 코드에서 사용하려는 변수에도 액세스할 수 있습니다. this 처럼 보입니다. 이것은 React와 유사한 매우 모듈화된 디자인 프로세스로 이어질 수 있습니다.

이것은 Svelte에 대한 간략한 소개일 뿐이지만 훨씬 더 많은 것이 있으며 모두 쉽게 배울 수 있습니다. 주제에 대한 훌륭한 리소스이며 그의 팟캐스트Syntax 및 그의tutorials 페이지도 확인하시기 바랍니다. Svelte에는 훌륭한 커뮤니티가 있는 Discord도 있습니다. 이 기사를 통해 프레임워크에 대해 더 깊이 파고들 수 있기를 바랍니다.

몇 가지 유용한 링크:
Svelte's Official Website
SvelteKit's Website
MDN Docs