단순하고 컴팩트한 JS 어플리케이션을 구축하는 방법

저자: Obinna Ekwuno✏️
JavaScript의 세계에서 매일 새로운 프레임워크가 나타나는데 이런 진보의 배후 생각은 거의 똑같지만 매우 현저한 개선이 있다.현대의 구성 요소 기반 프레임워크는 ReactJS, VueJS, EmberJS, Angular 및 그 이상을 포함한다.
본고에서 우리는 이러한 새로운 틀 중 하나인 SvelteJS을 연구할 것이다.이것은 HTML, CSS, 자바스크립트의 기본 지식을 바탕으로 웹 플랫폼을 구축하는 데 독특하고 이해하기 쉬운 방법을 제공한다.
Svelte는 중간 지대로 기초 지식을 배우기 시작하는 방식이며 구성 요소 구동 개발, scoped vs. cascading CSS, templating, declarative functions 등 현대 개념에 적응한다.

선결 조건

본 논문은 더 자세히 논의하기 전에 다음과 같이 가정합니다.

Node.js ≥v6 시스템에 설치

npm 시스템에 설치

HTML, CSS 및 JavaScript에 익숙함

은 구성 요소 기반의 프레임워크를 기본적으로 이해합니다. 예를 들어 ReactJS은 좋지만 필요한

은 아닙니다.

슬림한 프레임과 구성 요소 기반 프레임 사이의 차이

인코딩에 익숙하지 않은 사람들에게 Svelte는 DOM 형식의 조작을 허용하기 때문에 열 재부팅과 구성 요소의 세계에서 방향을 잃는 것을 피하기 쉽다.Svelte는 생성된 모든 파일을 단일 파일(bundle.js)로 컴파일합니다.Svelte는 하나의 프레임워크입니다. 이것은 가상 DOM에 적용되지 않고 코드를 작성하여 응용 프로그램의 상태가 변화할 때 외과 수술을 통해 DOM을 업데이트하는 것을 의미합니다.

Svelte를 사용하여 서점 애플리케이션 구축

입문

날씬하게 하고 프로젝트를 실행할 수 있는 몇 가지 방법이 있다.here여 가지 입문 방법에 대한 더 많은 정보를 읽을 수 있습니다.본고에서 우리는 degit을 사용할 것이다. 이것은 소프트웨어 브래킷 도구이다.시작하려면 다음 명령을 실행합니다.

npx degit sveltejs/template {projectname}: 이런 상황에서 저는 그것을 Book app svelte라고 부릅니다.

npx degit sveltejs/template Book-app-svelte

Cd 프로젝트 디렉터리에 넣기

실행 npm 설치

은 npm run dev을 실행하여 응용 프로그램을 실행합니다.

설정 후, main.js에서 "hello world"가 app.svelte에 렌더링되는 것을 보아야 합니다. 이것은 날씬한 구성 요소는 .svelte으로 확장해서 저장하는 것을 주의하는 좋은 시간이 될 것입니다.

import App from './App.svelte';
const app = new App({
    target: document.body,
    props: {
        name: 'world'
    }
});
export default app;

위의 코드는 간단한 설정을 보여 줍니다. 프로그램 구성 요소는 이름 속성을 받아들이고 HTML 파일의 위치를 목표로 합니다.app.svelte에서는 다음과 같은 VueJS 형식을 볼 수 있습니다.

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

이것이 바로 main.js이 이름 변수를 내보내서 처리하는 곳으로 외부에서 조작할 수 있도록 하는 것이다.

동적 책 구성 요소 만들기

구성 요소를 만들 때 주의해야 할 사항은 다음과 같습니다.

스타일의 범위는 구성 요소 내에 있기 때문에 한 구성 요소에 스타일을 설정한 h1은 다른 구성 요소

의 다른 구성 요소에 영향을 주지 않습니다

동적 연결의 함수

을 정의할 수 있습니다
이 절에서 우리는 Svelte를 사용하여 동적 이벤트를 만드는 방법을 연구하고 book.svelte 구성 요소를 app.svelte과 패스 도구와 연결시킬 것이다.
첫 번째 단계는 book 구성 요소를 설정하고 변수를 내보내는 것입니다. 이 변수는 app.svelte의 부모 표시 설정에서 사용할 수 있습니다.

<script>
    export let bookTitle;
    export let bookPages;
    export let bookDescription;
</script>
<style>
    div{
        margin: 1rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26)
    }
    h1{
        font-size: 1.25rem;
        margin: 0.25rem 0;
    }
    h2{
        font-size: 1rem;
        margin: 0.25rem 0;
        color: aqua;
    }
    p{
        margin: 0.25rem 0;
    }
    button{
        font : larger;
        padding: 0.15rem 0.5rem;
        background-color: #1b1a1a;
        border: 1px solid  aliceblue ;
        cursor: pointer;
        color: white;
    }
</style>

<div>
    <h1> {bookTitle} </h1>
    <h2> {bookPages}</h2>
    <p> {bookDescription}</p>
    <button> Add </button>
</div>

위의 코드 블록에서 변수가 div에 동적으로 전달되고 있는 태그를 볼 수 있습니다.그것들의 값은 app.svelte에서 왔으며, 우리는 아래에서 볼 수 있으며, 대부분의 동적 조작이 발생하는 위치를 볼 수 있다.app.svelte에서 우리는 책 구성 요소를 가져왔습니다. 이것이 바로 우리가 대량의 동적 조작을 할 곳입니다.

<script>
    import Book from './book.svelte'
    let title = '';
    let pages = 0;
    let description = '';
    function setTitle(event){
        title = event.target.value;
    }
</script>
<style>
    h1 {
        color: purple;

    }
    section{
        margin: auto;
        width :30rem;

    }
    label,input,textarea{width: 100%}
</style>
<section>
    <div> 
        <label for="title">Title</label>
        <input type="text" id="title" value={title} on:input={setTitle}/>
    </div>
    <div>
        <label for="pages"> pages</label>
        <input type="number" id="price" value={pages} bind:value={pages}/>
    </div>
    <div>
        <label for="description">Description</label>
        <textarea rows="3" id="description" bind:value ={description}/>
    </div>
</section>
<Book bookTitle={title} bookPages={pages} bookDescription={description}/>

위의 코드 예시에서 볼 수 있듯이 스크립트 태그에서 변수를 비어 있는''로 설정합니다.이것은 자동으로 업데이트된 값입니다. setTitle의 함수를 알 수 있습니다. 이 함수는 제목을 설정하는 데 사용되며, on:에서 대상을 호출하는 것을 목표로 합니다.
괄호가 없는 함수를 호출하는 것은 바로 실행하기를 원하지 않기 때문입니다.반대로, Svelte가 키를 눌렀을 때마다 이 함수를 호출할 수 있도록 인용을 설정하고 있습니다.
우리는 on:을 사용하여 Svelte에 이벤트 탐지기를 추가합니다.우리는 그것으로 입력 이벤트를 들을 수 있고, 동적 입력을 표시하는 데 괄호를 쓸 수 있다.우리의 함수는 양방향 귀속을 사용하기 때문에, 우리는 bind:을 사용하여 다른 태그에 사용할 수 있습니다. 이것은value 속성을 귀속시킨 다음price 변수에 귀속합니다.우리도 이렇게 묘사했다.
마지막으로, 우리는 서적 구성 요소에서 내보낸 도구를 업데이트하여, Book 표시로 되돌아갈 것입니다.이를 위해, 우리는 제목, 페이지, 설명의 값을 동적 전달하기 위해 괄호 {}을 사용합니다.

책 정보 표시

우리가 값을 입력할 때 카드를 업데이트했으니, 다음 단계는 우리가 책을 서점에 추가할 수 있도록 확보하는 것이다.우리가 해야 할 첫 번째 일은 단추를 다른 두 개의 구성 요소에서 사용할 수 있도록 독립된 구성 요소로 만드는 것이다.우리는 button.svelte을 만들고 이를 각각 책과 앱 구성 요소로 가져와서 이 점을 실현합니다.

<style>
  button{
        font : larger;
        padding: 0.15rem 0.5rem;
        background-color: #1b1a1a;
        border: 1px solid  aliceblue ;
        cursor: pointer;
        color: white;
    }

</style>


<button on:click >
    <slot/>
</button>

단추 태그에 on:click 속성이 있음을 알 수 있습니다. 이 속성은 단추의 원본 호출에서 이벤트 탐지기를 터치하여 다른 가져오기에서 원클릭 이벤트를 실제로 처리할 수 있도록 합니다.
예: app.svelte

<Button on:click={addBook}>ADD Book</Button>

이 기능은 addBook 기능과 결합하여 단추를 눌러 서적을 패턴에 동적으로 추가할 수 있습니다.

let books =[]

function addBook(){
        const newBook = {
            title : title,
            pages : pages,
            description: description
        };
        books = books.concat(newBook)
    }

위의 코드는script 태그에 존재합니다. 폼에서 책의 모든 속성을 호출하여 연결합니다.push가 책 변수를 변경하지 않기 때문에 concat을 사용합니다.이것은 그룹만 변경하지만 concat을 새 값에 분배하고 변경을 촉발합니다.
우리는 현재 일련의 서적을 가지고 있는데, 이 서적들은 Svelte가 제공한 특수 표지를 사용하여 조건부로 표시한다.

{#if books.length === 0}
    <p>
       Add a new book 
    </p>
    {:else}
    {#each books as book}
        <Book bookTitle={book.title} bookPages={book.pages} bookDescription={book.description}/>
    {/each}
{/if}

새 책을 추가하라는 메시지가 표시되고 각 새 블록을 새 카드로 표시합니다.

사용자 업데이트 후 카드에 대한 정보를 표시합니다.

도서 가격을 늘리다

이를 실현하기 위해서는 purchase.svelte이라는 또 다른 구성 요소를 만들어야 한다.script 표시에서, 우리는 app.svelte에서 정보를 도구로 책 표시에 전달하여 업데이트할 수 있도록books 변수를 내보내기를 희망합니다.app.svelte에서 우리는 스크립트에 빈 그룹을 추가하여 구매한 책을 저장했다.지금 우리는 어떻게 이 구매에 책을 추가합니까?우리는 책 구성 요소의buy 단추를 사용하고 purchaseBook 함수를 추가하여 스크립트를 작성하고 on:{purchaseBook}을 단추에 연결합니다.
그리고 Svelte의 사용자 정의 라이브러리에서 스케줄링 함수를 만듭니다.
그런 다음 on:buy = {purchaseBook}을 추가하여 이 함수를 Book 태그에 연결할 수 있습니다. 이 이벤트는 purchaseBook 함수에서 발송됩니다.

function purchaseBook(event){
        const selectedTitle= event.detail;
        purchases = purchases.concat({
            ...books.find(book => book.title === selectedTitle )
        });
    }

결론

본고에서, 우리는 서점 프레젠테이션을 만들어서 Svelte의 기본적인 사용법을 이해하려고 한다.이 글은 SvelteJS의 강력한 기능을 이해하고 좋은 프로그램을 만드는 방법을 보여 줄 수 있기를 바랍니다.여기는 demo의 링크입니다.즐거운 인코딩!
편집자: 이 문장에 무슨 문제가 있습니까?정확한 버전 here을 찾을 수 있습니다.

플러그인: 네트워크 어플리케이션용 DVR용 LogRocket

 

 
LogRocket은 프론트 로그 기록 도구로 질문을 다시 재생할 수 있습니다. 마치 브라우저에서 발생한 것처럼.LogRocket은 오류가 발생한 원인을 추측하거나 화면 캡처와 로그 저장을 물어보지 않고 세션을 다시 재생할 수 있도록 합니다.프레임워크가 어떻든지 간에 모든 응용 프로그램과 완벽하게 어울릴 수 있으며, 플러그인은 Redux, Vuex, @ngrx/store의 추가 상하문을 기록합니다.
 
LogRocket은 Redux 작업과 상태를 기록하는 것 외에도 콘솔 로그, JavaScript 오류, 스택 추적, 헤더+본문이 있는 네트워크 요청/응답, 브라우저 메타데이터와 사용자 정의 로그를 기록합니다.또한 DOM은 페이지의 HTML과 CSS를 기록하여 가장 복잡한 단일 페이지 응용 프로그램이라도 픽셀 수준의 비디오를 재구성합니다.
 
Try it for free .
게시물 How to build a simple Svelte JS app이 LogRocket Blog에 먼저 올라왔습니다.