[Node.js] Svelte로 Todo 앱 만들기

App.svelte

<script>
    // 스토어 모듈 불러오기
    import { writable } from 'svelte/store'
    
    // Todo 컴포넌트 불러오기
    import Todo from './Todo.svelte'
    
    // Todo 내용저장할 변수 지정하기
    let title = ''
    
    // todos 스토어 만들기
    let todos = writable([])
    
    // Todo 번호저장할 변수 지정하기
    let id = 0
	
    // Todo 추가 기능 만들기
    function createTodo() {
        if (!title.trim()) {
            title = ''
            return
        }
        $todos.push({
            id,
            title
        })
        $todos = $todos
        title = ''
        id += 1
    }
    
	// if (e.key === 'Enter') { createTodo() }
	// e.key === 'Enter' ? createTodo() : undefined
	// e.key === 'Enter' && createetodo()

</script>

<!-- Todo 내용을 입력받아 title 변수에 저장 -->
<input bind:value={title}
       type='text'
       <!-- 엔터키 누르면 createTodo 실행 -->
       on:keydown={(e) => {e.key === "Enter" && createTodo()}}/>

<!-- createTodo 실행하는 버튼 -->
<button on:click={createTodo}>
    Create Todo
</button>

<!-- Todo 한개씩 화면에 출력하기 (스토어 자동변수로 배열 출력) -->
{#each $todos as todo}

    <!-- 컴포넌트에 todos 스토어, todo 변수 전달 -->
    <Todo {todos} {todo}/>
{/each}

 

 

Todo.svelte

<script>
    // todos스토어, todo변수 받아오기
    export let todos
    export let todo
    
    // Todo 수정하기 위한 조건 변수 지정
    let isEdit = false
    
    //
    let title = ''
    
    
    // Todo 수정하는 화면 만들기
    function onEdit() {
        //
        isEdit = true
        title = todo.title
    }
    
    // Todo 수정하는 화면에서 탈출하는 기능 만들기
    function offEdit() {
        isEdit = false
    }
    
    // Todo 수정하는 기능 만들기
    function updateTodo() {
        todo.title = title
        isEdit = false
    }
    
    // Todo 삭제하는 기능 만들기
    function deleteTodo() {
    
        // filter를 사용해, 현재 Todo 아이디와 일치하지 않는 Todo들로 새로운 배열 만들기
        $todos = $todos.filter(t => t.id !== todo.id)
    }
</script>

<!-- 수정하는 화면 만들기 -->
{#if isEdit}
    <div>
    
        <!-- 입력 받은 값 title 변수에 저장 -->
        <input bind:value={title}
               type='text'
               
               <!-- 엔터키 눌렀을 때, updateTodo() 함수 실행 -->
               on:keydown={(e) => {e.key === 'Enter' && updateTodo()}}/>
               
        <!-- 수정내용 적용하는 버튼 -->
        <button on:click={updateTodo}>
            OK
        </button>
        
        <!-- 수정하는 화면 탈출하는 버튼 -->
        <button on:click={offEdit}>
            Cancle
        </button>
    </div>
    
<!-- 기본 Todo 화면 만들기 -->
{:else}
    <div>
    
        <!-- Todo 내용 출력 -->
        {todo.title}
        
        <!-- 수정하는 화면 보여주는 버튼 -->
        <button on:click={onEdit}>
            Edit
        </button>
        
        <!-- Todo 삭제하는 버튼 -->
        <button on:click={deleteTodo}>
            Delete
        </button>
    </div>
{/if}

 

중요한 내용

writable 함수는 호출되자마자, 스토어 공간을 만들고 그곳에 변수를 저장한다.

// 함수 호출

let todos = writable([])



// 스토어 공간

let todos = []