날씬한 무엇입니까

Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.

Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.

왜 Svelte인가

✅ 가상 DOM이 아닌 DOM에서 작동
✅ Svelte 파일에는 .svelte 확장자가 있습니다.
✅ svelte 파일로 작성된 각각은 범위가 지정된 CSS입니다.
✅ 내부 스토어 API를 사용할 수 있습니다. 외부 라이브러리를 설치할 필요가 없습니다.
✅ 기본 구성으로 롤업으로 빌드합니다. 그러나 Parsel 및 Webpack을 사용할 수도 있습니다.
✅ 모든 변수를 쉽게 구독할 수 있지만 배열 변이를 감지하는 해킹 방법이 있습니다. (이것은 내가 좋아하지 않았다)
✅ html 파일을 작성하는 것처럼 svelte 파일에 javascript, html 및 스타일을 모두 작성할 수 있습니다. (약간의 차이가 있음)
✅ 다음과 같은 on: 접두사를 사용하여 DOM 이벤트에 액세스합니다.
✅ 자식에서 부모에게 콜백을 전달할 필요가 없습니다.
✅ createEventDispatcher를 사용할 수 있습니다.
✅ {#}로 블록을 시작하고 {#if}…{/if}와 같이 {/}로 끝납니다.

Svelte 시작하기

NPX 사용

이 명령을 사용하여 할 일 목록 앱을 시작할 수 있습니다.

npx degit sveltejs/template svelte-todo-list

온라인 REPL

내 생각에 시작하는 가장 좋은 방법은 REPL



앱에 만족하면 앱의 모든 코드를 zip 파일로 다운로드할 수 있습니다. 파일의 압축을 푼 후 CD를 폴더에 넣고 실행합니다.

npm install && npm run dev

REPL에 앱을 저장하거나 여기에서 코드 편집기에서 편집할 수 있습니다.

REPL에서 빠른 앱을 만들었습니다.

App.svelte

<script>
  import ContactCard from "./ContactCard.svelte";

  let name = "Max";
  let title = "";
  let image = "";
  let description = "";
  let formState = "empty";

  let createdContacts = [];

  function addContact() {
    if (
      name.trim().length == 0 ||
      title.trim().length == 0 ||
      image.trim().length == 0 ||
      description.trim().length == 0
    ) {
      formState = "invalid";
      return;
    }
    createdContacts = [
      ...createdContacts,
      {
        id: Math.random(),
        name: name,
        jobTitle: title,
        imageUrl: image,
        desc: description
      }
    ];
    formState = "done";
  }

  function deleteFirst() {
    createdContacts = createdContacts.slice(1);
  }

  function deleteLast() {
    createdContacts = createdContacts.slice(0, -1);
  }
</script>

<style>
  #form {
    width: 30rem;
    max-width: 100%;
  }
</style>

<div id="form">
  <div class="form-control">
    <label for="userName">User Name</label>
    <input type="text" bind:value={name} id="userName" />
  </div>
  <div class="form-control">
    <label for="jobTitle">Job Title</label>
    <input type="text" bind:value={title} id="jobTitle" />
  </div>
  <div class="form-control">
    <label for="image">Image URL</label>
    <input type="text" bind:value={image} id="image" />
  </div>
  <div class="form-control">
    <label for="desc">Description</label>
    <textarea rows="3" bind:value={description} id="desc" />
  </div>
</div>

<button on:click={addContact}>Add Contact Card</button>
<button on:click={deleteFirst}>Delete First</button>
<button on:click={deleteLast}>Delete Last</button>

{#if formState === 'invalid'}
  <p>Invalid input.</p>
{:else}
  <p>Please enter some data and hit the button!</p>
{/if}

{#each createdContacts as contact, i (contact.id)}
  <h2># {i + 1}</h2>
  <ContactCard
    userName={contact.name}
    jobTitle={contact.jobTitle}
    description={contact.desc}
    userImage={contact.imageUrl} />
{:else}
  <p>Please start adding some contacts, we found none!</p>
{/each}

ContactCard.svelte

<script>
  export let userName;
  export let jobTitle;
  export let description;
  export let userImage;

  const initialName = userName;
</script>

<style>
  .contact-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
    max-width: 30rem;
    border-radius: 5px;
    margin: 1rem 0;
    background: white;
  }

  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 7rem;
  }

  .thumb {
    width: 33%;
    height: 100%;
  }

  .thumb-placeholder {
    background: #ccc;
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .user-data {
    width: 67%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 1rem;
  }

  h1 {
    font-size: 1.25rem;
    font-family: "Roboto Slab", sans-serif;
    margin: 0.5rem 0;
  }

  h2 {
    font-size: 1rem;
    font-weight: normal;
    color: #5a5a5a;
    margin: 0;
    margin-bottom: 0.5rem;
  }

  .description {
    border-top: 1px solid #ccc;
    padding: 1rem;
  }
</style>

<div class="contact-card">
  <header>
    <div class="thumb" class:thumb-placeholder="{!userImage}">
      <img src={userImage} alt={userName} />
    </div>
    <div class="user-data">
      <h1>{userName} / {initialName}</h1>
      <h2>{jobTitle}</h2>
    </div>
  </header>
  <div class="description">
    <p>{description}</p>
  </div>
</div>

상당히 새로운 개발자이자 반응을 처음 접하는 사람으로서 저는 날씬한 방법이 이해하기 더 쉽다는 것을 알았습니다. 당신의 앱을 반응적으로 만드는 측면에서 특히 당신이 반응의 열렬한 팬이 아니라면 날렵한 것이 좋은 방법이라고 생각합니다.