Svelte Todo 앱을 만드시겠습니까?

11170 단어 webdev javascript svelte beginners

Svelte는 무엇입니까?

Svelte는 Rich Harris가 만든 새로운 자바스크립트 도구로 배우기 쉽고 빠른 웹 애플리케이션을 구축하는 데 사용할 수 있습니다. 그러나 가상 DOM과 같은 개념으로 작동하지 않는 다른 프레임워크와 비교할 때 고유합니다.

내 생각에 시작하는 가장 좋은 방법은 이 튜토리얼을 따라 Svelte 작성을 시작하는 것입니다. 도중에 막히면fork GitHub에서 호스팅되는 SvelteTodoApp입니다.

Svelte 프로젝트 만들기

다음 명령으로 새 프로젝트를 초기화하여 이 자습서를 시작합니다.

# Creating a new project
npx degit sveltejs/template 

# Install the dependencies...
npm install

...롤업을 시작합니다.

npm run dev

localhost:8080으로 이동합니다. 앱이 실행되는 것을 볼 수 있습니다. src에서 구성 요소 파일을 편집하고 저장한 다음 페이지를 새로고침하여 변경 사항을 확인하세요.

부트스트랩 추가

다음 방법 중 하나를 사용하여 Sveltstrap을 추가하는 것이 좋습니다.

# Method One: Install sveltestrap and peer dependencies via NPM

 npm install sveltestrap 

# Method Two: Include CDN within Static HTML layout

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>

폴더 구조

루트 수준에서 다음 파일을 생성합니다.

토도.svelte

TodoItem.svelte

App.svelte를 수정합니다.

우리의 앱 구성 요소

간단하게 하기 위해 다음 구조로 Todo.svelte 및 TodoItem.svelte 파일을 생성합니다.

<script>
<!-- JavaScript Logic -->
</script>

<style>
<!-- CSS Styles -->
</style>

<!-- HTML Markup -->

다음으로 App.svelte 파일을 편집하고 다음 코드로 대체하여 앱 구성 요소를 완성합니다.

<script>
    import Todo from './Todo.svelte'
</script>

<main>
    <Todo />
</main>

우리의 Todo 컴포넌트

이 프로젝트에서는 이를 깨끗하게 유지하고 기본 필터 설정인 todoText 및 nextID를 포함하기 위한 몇 가지 변수를 생성하는 것과 함께 TodoItem 구성 요소를 스크립트 섹션으로 가져옵니다. 다음으로 배열 데이터 구조를 사용하여 샘플 할일 항목을 생성합니다.

<script>
        import TodoItem from './TodoItem.svelte';
        let newTodoText = '';
        let currentFilter = 'all';
        let nextId = 4;
        let todoList = [
        {
            id: 1,
            text: 'Write a Svelte Todo App',
            completed: true
        },
        {
            id: 2,
            text: 'Hit the ↵ button to add a new item.',
            completed: false
        },
        {
            id: 3,
            text: 'Hit this ❌ to delete an item.',
            completed: false
        }
    ];

</script>

Todo.svelte 구성 요소에 대한 html 코드 작성을 시작하겠습니다.

<div class="container-fluid">
    <h1>TODO</h1>
    <input type="text" class="todo-input" placeholder="New Item ..." bind:value={newTodoText} on:keydown={addTodo} >

    {#each filteredtodoList as todo}
        <div class="todo-item">
            <TodoItem {...todo} on:deleteTodo={handleDeleteTodo} on:toggleComplete={handleToggleComplete} />
        </div>
    {/each}

    <div class="inner-container">
        <div><label><input class="inner-container-input" type="checkbox" on:change={checkAlltodoList}>Check All</label></div>
        <div>{todoListRemaining} items left</div>
    </div>

    <div class="inner-container">
        <div>
            <button on:click={() => updateFilter('all')} class:active="{currentFilter === 'all'}">All</button>
            <button on:click={() => updateFilter('active')} class:active="{currentFilter === 'active'}">Active</button>
            <button on:click={() => updateFilter('completed')} class:active="{currentFilter === 'completed'}">Completed</button>
        </div>
        <dir>
            <button on:click={clearCompleted}>Clear Completed</button>
        </dir>
    </div>

</div>

이제 우리는 기존 항목 아래에서 함수에 대한 논리를 구현할 수 있습니다.

<script> 
    function addTodo(event) {
        if (event.key === 'Enter') {
            todoList = [...todoList, {
                id: nextId,
                completed: false,
                text: newTodoText
            }];
            nextId = nextId + 1;
            newTodoText = '';
        }
    }
    $: todoListRemaining = filteredtodoList.filter(todo => !todo.completed).length;
    $: filteredtodoList = currentFilter === 'all' ? todoList : currentFilter === 'completed'
        ? todoList.filter(todo => todo.completed)
        : todoList.filter(todo => !todo.completed)
    function checkAlltodoList(event) {
        todoList.forEach(todo => todo.completed = event.target.checked);
        todoList = todoList;
    }
    function updateFilter(newFilter) {
        currentFilter = newFilter;
    }
    function clearCompleted() {
        todoList = todoList.filter(todo => !todo.completed);
    }
    function handleDeleteTodo(event) {
        todoList = todoList.filter(todo => todo.id !== event.detail.id);
    }
    function handleToggleComplete(event) {
        const todoIndex = todoList.findIndex(todo => todo.id === event.detail.id);
        const updatedTodo = { ...todoList[todoIndex], completed: !todoList[todoIndex].completed};
        todoList = [
            ...todoList.slice(0, todoIndex),
            updatedTodo,
            ...todoList.slice(todoIndex+1)
        ];
    }
</script>

다음 단계는 다음 스타일을 추가하여 Todo.Svelte 파일을 완성하는 것입니다.

<style>
    h1 {
    color: #ff3e00;
    text-transform: uppercase;
    font-size: 4em;
    font-weight: 100;
    }
    .container-fluid{
        max-width: 800px;
        margin: 10px auto;
    }
    .todo-input {
        width: 100%;
        padding: 10px, 20px;
        font-size: 18px;
        margin-bottom: 20px;
    }
    .inner-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 16px;
        border-top: 1px solid lightgrey;
        padding-top: 15px;
        margin-bottom: 13px;
    }
    .inner-container-input {
        margin-right: 12px;
    }
    button {
        font-size: 14px;
        background-color: white;
        appearance: none;
        border: none;
    }
    button:hover {
        background: #ff3e00;
        color: white;
    }
    button:focus {
        outline: none;
    }
    .active {
        background: #ff3e00;
        color: white;
    }
</style>

TodoItem 컴포넌트

Todo 앱 내에서 발생하는 사용자 지정 이벤트를 생성하고 내보낼 수 있도록 createEventDispatcher를 가져오는 것으로 시작하겠습니다. 다음 단계는 다음 코드를 추가하여 svelte/transitions에서 비행할 수 있는 액세스 권한을 부여하는 것입니다.

<script> 
    import { createEventDispatcher } from 'svelte';
    import { fly } from 'svelte/transition';
</script>

이제 TodoItem 구성 요소가 Todo.Svelte에서 정의한 매개 변수를 수신할 수 있는지 확인해야 합니다.

<script>
    import { createEventDispatcher } from 'svelte';
    import { fly } from 'svelte/transition';
    export let id;
    export let text;
    export let completed;

</script>

다음 단계는 디스패치 인스턴스를 만들고 deleteTodo 및 toggleCompleted 함수에 대한 논리를 추가하는 것입니다.

<script>
    import { createEventDispatcher } from 'svelte';
    import { fly } from 'svelte/transition';
    export let id;
    export let text;
    export let completed;
    const dispatch = createEventDispatcher();
    function deleteTodo() {
        dispatch('deleteTodo', {
            id: id
        });
    }
    function toggleCompleted() {
        dispatch('toggleCompleted', {
            id: id
        });
    }
</script>

이제 TodoItem.Svelte 구성 요소에 대한 html 논리를 만들어야 합니다.

<div class="todo-item">
    <div class="todo-item-left" transition:fly="{{ y: 20, duration: 300}}">
        <input type = "checkbox" bind:checked={completed} on:change={toggleCompleted}>
        <div class="todo-item-label" class:completed={completed}>{text}</div>
    </div>
    <div class="remove-item" on:click={deleteTodo}>
    ❌
    </div>
</div>

참고 💡 - CSS가 없어도 이제 Todo.svelte 파일에서 샘플 목록 데이터를 볼 수 있고 자신의 항목을 Svelte TodoApp에 추가할 수 있습니다.

시원한! 이제 스타일을 TodoItem 구성 요소에 구현하고 프로젝트를 마무리할 수 있습니다.

<style>
    .todo-item {
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        animation-duration: 0.3s;
    }
    .remove-item {
        cursor: pointer;
        margin-left: 15px;
    }
    .remove-item:hover {
        color: lightseagreen; 
    }
    .todo-item-left {
        display: flex;
        align-items: center;
    }
    .todo-item-label {
        border: 1px solid white;
        margin-left: 12px;
    }
    .completed {
        text-decoration: line-through;
        color: grey;
        opacity: 0.4;
    }
</style>