더 가볍고 빠르게 - Svelte 프레임워크 가이드

웹 애플리케이션은 나날이 대중화되고 있습니다. 사람들이 단순성, 속도 및 플랫폼 간 가용성을 위해 선택하는 성장하는 세상입니다. 단일 페이지 응용 프로그램(SPA)은 이 과정에서 큰 역할을 했습니다. Angular, Vue.js 및 React와 같은 프레임워크는 개발자가 코드를 지원 및 확장 가능한 상태로 유지하면서 단기간에 최고의 사용자 경험을 제공할 수 있도록 도와줍니다. 이러한 도구는 새로 생성된 패키지에 비해 많은 이점과 함께 오랫동안 현장에서 가장 널리 사용되었습니다. SPA 세계에서 과점처럼 느껴졌습니다. 그러나 이 시장을 목표로 하는 미래 지향적인 개발자 그룹은 심각한 경쟁자인 Svelte와 함께 진입할 수 있습니다.

Svelte는 사용자 인터페이스를 구축하는 새로운 접근 방식입니다. 일반적인 로그인 양식을 만들어 무엇이 그렇게 신선하게 만드는지 자세히 살펴보겠습니다.

건축물

Svelte는 다른 어떤 라이브러리보다 빠르게 설계되었습니다. 가상 DOM을 구축하기 위한 프레임워크를 로드하는 단계를 이동하여 도달합니다. 실행 프로세스 중에 도구를 사용하는 대신 빌드 단계에서 기본 JS로 컴파일되므로 애플리케이션을 시작하는 데 종속성이 필요하지 않습니다.

위의 표는 Svelte가 시작 성능에서 절대적인 승자인 이유를 설명합니다. 이는 어떤 종류의 최적화로도 얻을 수 없지만 사이드 컴파일러 대신 사용 가능한 브라우저 JavaScript 컴파일러를 사용하여 얻을 수 있습니다.

설치

Svelte 설치는 매우 간단하여 사용이 매우 즐겁습니다. 첫 번째 단계는 프로젝트 템플릿을 다운로드하는 것입니다.

 npx degit sveltejs/template svelte-login-form

위의 명령을 완료하면 Svelte 프로젝트 템플릿이 있습니다. 현재 비어 있고 필요한 NPM 패키지가 아직 설치되지 않았습니다. 수정합시다.

 cd svelte-login-form npm install

이제 다음 명령을 사용하여 애플리케이션을 시작할 준비가 되었습니다.

 npm run dev

구조

모든 Svelte 구성 요소에는 다음 섹션이 포함될 수 있습니다.

• 스크립트
• 스타일
• 주형

src/App.svelte 파일의 예를 살펴보겠습니다.

 <script> export let name; </script> <style> h1 { color: purple; } </style> <h1>{name}</h1>

위의 코드에는 정확히 세 개의 섹션이 포함되어 있습니다.

1. script 태그는 구성 요소 내부에서 사용해야 하는 변수 및 함수 선언이 있는 선택적 JavaScript 블록입니다.

2. style 태그는 또 다른 선택적 블록입니다. 한 가지 중요한 차이점을 제외하고는 일반적인 HTML 스타일 태그와 매우 유사합니다. 이 블록 내부에 설명된 규칙은 이 구성 요소에만 적용됩니다. p 요소에 스타일을 적용해도 페이지의 모든 단락에 영향을 주지는 않습니다. 클래스 이름을 만들 필요가 없고 실수로 다른 규칙을 무시하지 않기 때문에 환상적입니다.

3. 마지막이자 유일하게 필요한 블록은 템플릿 블록(이 경우 h1 태그)입니다. 구성 요소의 프레젠테이션/보기입니다. 뷰의 스타일과 동작 방식을 결정하므로 스타일 및 스크립트 블록에 밀접하게 연결되어 있습니다.

Svelte는 프론트엔드 게임에 모듈성을 도입하려는 라이브러리입니다. 다른 구성 요소를 분리할 뿐만 아니라 논리, 보기 및 템플릿을 분리하는 데에도 모듈성을 유지합니다.

작성 중인 로그인 양식으로 돌아가서 src 폴더 안에 다음 내용으로 새 파일 LoginForm.svelte 를 생성해 보겠습니다.

 <style> form { background: #fff; padding: 50px; width: 250px; height: 400px; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 0px 20px 14px 8px rgba(0, 0, 0, 0.58); } label { margin: 10px 0; align-self: flex-start; font-weight: 500; } input { border: none; border-bottom: 1px solid #ccc; margin-bottom: 20px; transition: all 300ms ease-in-out; width: 100%; } input:focus { outline: 0; border-bottom: 1px solid #666; } button { margin-top: 20px; background: black; color: white; padding: 10px 0; width: 200px; border-radius: 25px; text-transform: uppercase; font-weight: bold; cursor: pointer; transition: all 300ms ease-in-out; } button:hover { transform: translateY(-2.5px); box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.58); } h1 { margin: 10px 20px 30px 20px; font-size: 40px; } </style> <form> <h1></h1> <label>Email</label> <input name="email" placeholder="[email protected]" /> <label>Password</label> <input name="password" type="password" placeholder="password" /> <button type="submit">Log in </button> </form>

나중에 더 똑똑하게 만들 벙어리 스타일의 구성 요소입니다. 사이트에서 이 구성 요소를 보려면 루트 구성 요소인 App 내부에서 렌더링해야 합니다. 다음과 같이 보이도록 src/App.svelte 를 수정해 보겠습니다.

 <script> import LoginForm from "./LoginForm.svelte"; </script> <style> section { height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center; background: linear-gradient(to right, #cd76e2, #e358ab); } </style> <section> <LoginForm /> </section>

모든 것이 올바르게 완료되었고 응용 프로그램이 여전히 실행 중이면 양식이 localhost:5000 에 나타납니다. 폼을 더 스마트하게 만들어 Svelte 스킬 레벨을 올리자.

상태 저장

Svelte의 모든 구성 요소는 상태를 가질 수 있습니다. 상태는 템플릿 내에서 사용할 수 있는 특수 변수 또는 특수 변수 그룹입니다. 왜 "특별"이라고 말합니까? 이러한 변수가 변경될 때마다 템플릿에 이에 대한 알림이 전송되고 최신 상태로 콘텐츠를 렌더링합니다. 이를 통해 애플리케이션은 사용자 상호 작용에 매우 빠르게 반응할 수 있습니다.

적절한 필드에 대한 양식 값이 저장될 email 및 password 상태 변수를 선언합니다. 이는 email 및 password 변수가 항상 양식 값과 동기화된다는 것을 의미하므로 제출 값과 양식의 실제 값 사이에 차이가 생길 염려 없이 언제든지 이 값을 제출할 준비가 되어 있습니다.

 <script> let email = ""; let password = ""; let isLoading = false; const handleSubmit = () => { isLoading = true; // Simulate network request setTimeout(() => { isLoading = false; // Authorize the user }, 1000); }; </script> <style> /* Style is unchanged */ </style> <form on:submit|preventDefault={handleSubmit}> <h1></h1> <label>Email</label> <input name="email" placeholder="[email protected]" bind:value={email} /> <label>Password</label> <input name="password" type="password" bind:value={password} /> {#if isLoading}Logging in...{:else}Log in {/if} </form>

상태 변수는 일반적인 JavaScript 변수처럼 보이지만 양식 값과 동기화(양식 필드에 바인딩)하려면 bind:value 지시문을 사용해야 합니다. 또한 몇 가지 생소한 사항이 있습니다.

• on:submit|preventDefault 는 기본 이벤트의 동작을 방지하기 위한 약어입니다. 매번 e.preventDefault() 를 작성하는 것보다 이 방법이 더 편합니다.

• {#if isLoading}Logging in...{:else}Log in {/if} 은 Svelte의 템플릿 구문의 일부입니다. 템플릿 블록에 JS가 없으므로 ifs, 루프 등을 사용하기 위한 특별한 구문이 있습니다.

마지막으로 상태를 사용하여 양식에 유효성 검사를 추가하여 사용 가능한 옵션을 사용하겠습니다. 잘못된 값으로 양식을 제출할 때 오류로 채워지는 또 다른 상태 변수 errors 를 만들어 달성할 수 있습니다.

 <script> let email = ""; let password = ""; let isLoading = false; let errors = {}; const handleSubmit = () => { errors = {}; if (email.length === 0) { errors.email = "Field should not be empty"; } if (password.length === 0) { errors.password = "Field should not be empty"; } if (Object.keys(errors).length === 0) { isLoading = true; // Simulate network request setTimeout(() => { isLoading = false; // Authorize the user }, 1000); } }; </script> <style> // Previous styles unchanged .errors { list-style-type: none; padding: 10px; margin: 0; border: 2px solid #be6283; color: #be6283; background: rgba(190, 98, 131, 0.3); } </style> <form on:submit|preventDefault={handleSubmit}> <h1></h1> <label>Email</label> <input name="email" placeholder="[email protected]" bind:value={email} /> <label>Password</label> <input name="password" type="password" bind:value={password} /> <button type="submit"> {#if isLoading}Logging in...{:else}Log in {/if} </button> {#if Object.keys(errors).length > 0} <ul class="errors"> {#each Object.keys(errors) as field} <li>{field}: {errors[field]}</li> {/each} </ul> {/if} </form> 

양식이 거의 완성되었습니다. 인증에 성공하면 성공 메시지만 남습니다.

기본적으로 false 인 성공적인 제출을 추적하기 위한 상태 변수를 생성해 보겠습니다. 양식을 성공적으로 제출한 후 이 변수의 값을 true 로 설정해야 합니다.

 let isSuccess = false;

양식 제출을 처리하는 함수도 성공적인 작업 후에 isSuccess 를 토글하는 논리를 따르도록 변경되어야 합니다.

 const handleSubmit = () => { errors = {}; if (email.length === 0) { errors.email = "Field should not be empty"; } if (password.length === 0) { errors.password = "Field should not be empty"; } if (Object.keys(errors).length === 0) { isLoading = true; // Simulate network request setTimeout(() => { isLoading = false; isSuccess = true; // Authorize the user }, 1000); } };

이렇게 수정하면 제출이 완료되는 즉시 양식이 성공 상태가 됩니다.

그러나 개발 서버를 확인하면 양식의 동작에서 변경 사항을 찾을 수 없습니다. 코드를 변경했지만 아직 템플릿을 건드리지 않았습니다. 사용자가 성공적으로 로그인했을 때 성공 메시지를 표시하려면 템플릿에 지침을 추가해야 합니다. Svelte의 템플릿 구문을 사용하면 이를 쉽게 구현할 수 있습니다.

 <form on:submit|preventDefault={handleSubmit}> {#if isSuccess} <div class="success"> <br /> You've been successfully logged in. </div> {:else} <h1></h1> <label>Email</label> <input name="email" placeholder="[email protected]" bind:value={email} /> <label>Password</label> <input name="password" type="password" bind:value={password} /> <button type="submit"> {#if isLoading}Logging in...{:else}Log in {/if} </button> {#if Object.keys(errors).length > 0} <ul class="errors"> {#each Object.keys(errors) as field} <li>{field}: {errors[field]}</li> {/each} </ul> {/if} {/if} </form>

속성이 있는 추상

내부 구성 요소의 상태에 대한 모든 것을 정렬했습니다. 이제 속성 또는 "소품"이라고 하는 외부 종속성을 살펴볼 차례입니다. Props는 구성 요소에 무엇이 나타나야 하는지 또는 구성 요소가 어떻게 작동해야 하는지 설명하기 위해 구성 요소에 전달되는 입력 또는 인수입니다.

속성 선언은 키워드 export 를 제외하고 상태와 유사하게 보입니다.

 <script> export let answer; </script> <p>The answer is {answer}</p>

 <script> import Nested from './Nested.svelte'; </script> <Nested answer={42}/>

속성에 관한 모든 것입니다. 선언 및 전달 - props를 사용하기 위해 알아야 할 모든 것.

그러나 이러한 속성은 로그인 양식 구성 요소에 어떻게 적용됩니까? Props는 제출 기능을 속성으로 추출하여 로그인 양식을 보다 일반적으로 만들 수 있습니다. 이를 통해 필요한 제출 작업(테스트 서버에 대한 요청, 실제 서버에 대한 요청 등)과 함께 이 구성 요소를 사용할 수 있습니다. 이 소품은 submit 이라고 하며 제출 작업이 성공하면 해결된 약속을 반환하고 오류가 있으면 거부된 약속을 반환하는 함수가 됩니다. 위의 예에 따라 prop을 선언해 보겠습니다.

 export let submit;

로그인 양식 내의 제출 핸들러도 새 submit 속성을 사용하도록 편집해야 합니다.

 const handleSubmit = () => { errors = {}; if (email.length === 0) { errors.email = "Field should not be empty"; } if (password.length === 0) { errors.password = "Field should not be empty"; } if (Object.keys(errors).length === 0) { isLoading = true; submit({ email, password }) .then(() => { isSuccess = true; isLoading = false; }) .catch(err => { errors.server = err; isLoading = false; }); } };

구성 요소가 준비된 것 같습니다. 그러나 양식으로 돌아가서 제출하려고 하면 버튼의 상태가 로드에서 변경되지 않은 것을 알 수 있습니다. 또한 콘솔에 예외가 있습니다. Uncaught TypeError: submit is not a function . 물론 prop을 선언했지만 전달하는 것을 잊었습니다. 앱 컴포넌트에서 함수를 선언하고 로그인 폼에 전달해 봅시다.

 const submit = ({ email, password }) => new Promise((resolve, reject) => setTimeout(resolve, 1000));

 <section> <LoginForm submit={submit} /> </section>

이제 양식이 의도한 대로 작동합니다. 오류를 표시하고 로그인이 성공했는지 사용자에게 알릴 수 있습니다.

컨텍스트 공유

응용 프로그램을 빌드하는 데 필요한 모든 것이 나열되어 있는 것 같습니다. 속성과 내부 상태를 사용하여 시작할 준비가 되었습니다. 그러나 그것은 부분적으로만 사실입니다. 이 두 가지 일반적인 사항을 통해 복잡한 SPA를 설계할 수 있습니다. 그러나 많은 다른 구성 요소 간에 데이터를 공유하려고 하면 매우 어렵다는 것을 알게 될 것입니다.

가장 간단한 예는 전역적으로 액세스 가능한 user 변수를 갖는 것입니다. 많은 구성 요소는 사용자의 역할, 연령, 상태 등에 따라 사용자와 관련된 동작을 변경해야 합니다. 그러나 props를 사용하여 앱의 각 구성 요소에 사용자를 전달하여 반복하는 것은 DRY가 아닙니다.

Svelte는 이에 대한 솔루션인 컨텍스트 API를 제공합니다.

컨텍스트 API는 데이터와 함수를 소품으로 전달하거나 많은 이벤트를 전달하지 않고 구성 요소가 서로 '대화'할 수 있는 메커니즘을 제공합니다. 고급 기능이지만 유용한 기능입니다.

디자인하고 있는 로그인 양식에 사용자 컨텍스트를 추가해 보겠습니다. 다음 내용으로 src 폴더 안에 userContext.js 파일을 만듭니다.

 export const key = "userContext"; export const initialValue = null;

key 는 애플리케이션이 액세스 가능한 상태로 유지되어야 하는 다양한 컨텍스트를 무제한으로 가질 수 있으므로 컨텍스트에 대한 고유 식별자입니다. initialValue 는 설정되기 전의 컨텍스트에 대한 기본값일 뿐입니다.

다음 단계는 애플리케이션에 컨텍스트를 추가하는 것입니다. App.svelte 파일로 이동하여 2개의 import 문을 추가합니다.

 import { onMount, setContext } from "svelte"; import { key as userContextKey, initialValue as userContextInitialValue } from "./userContext";

위의 코드를 보면 svelte 패키지에서 무엇을 가져오는지 궁금할 것입니다. onMount 는 콜백 함수가 인수로 필요한 도우미 함수입니다. 이 콜백은 현재 컴포넌트가 마운트될 때(컴포넌트 로드가 시작될 때) 실행됩니다. setContext 는 컨텍스트에 대한 setter 함수입니다. 컨텍스트에 대한 키와 인수로 새 값이 필요합니다.

onMount 함수를 사용하여 컨텍스트의 기본값을 설정해 보겠습니다.

 onMount(() => { setContext(userContextKey, userContextInitialValue); });

그리고 submit 함수를 수정하여 사용자 컨텍스트를 설정합니다.

 const submit = ({ email, password }) => new Promise((resolve, reject) => { setTimeout(() => { setContext(userContextKey, { name: "Foo", lastName: "Bar", email: "[email protected]" }); resolve(); }, 1000); });

그게 다야 성공적인 제출은 사용자 컨텍스트를 컨텍스트 getter getContext 에서 액세스할 수 있는 가짜 사용자 객체로 변경합니다.

 <script> import { getContext } from 'svelte'; import { key as userContextKey } from "./userContext"; const user = getContext(key); </script>

요약

Svelte는 고성능과 유연한 API가 가능한 강력한 도구입니다. 이 게시물에서 다루는 기본 사항 외에도 Svelte에는 기본적으로 다음과 같은 기능이 있습니다.

• 반응적 선언 및 진술
• 템플릿 블록 대기
• 차원 바인딩
• Redux와 같은 글로벌 스토어
• 애니메이션 및 전환 도우미
• 디버깅 도우미

요약하자면 Svelte는 SPA 구축 등의 모든 요구 사항을 충족하는 훌륭한 라이브러리입니다. 그것은 시장에서 가장 큰 플레이어와 경쟁하고 심지어 이길 수 있습니다. 하지만 지금 당장 사용할 수 있는 것은 프론트 엔드 개발자 커뮤니티의 지원입니다.

참고: 이 기사의 모든 코드는 teimurjan/svelte-login-form GitHub 저장소에서 찾을 수 있습니다. 로그인 양식에 대한 데모는 여기에서 사용할 수 있습니다.