Svelte - Todo List 만들어보기
프로젝트 세팅
우선 프로젝트 세팅을 해줍니다.
npx degit sveltejs/template todo
cd todo
yarn install
그리고 svelte에서 scss를 사용하기 위하여 세팅을 해줍니다.
yarn add -D svelte-preprocess node-sass
rollup.config.js에서 다음과 같이 수정을 해줍니다.
...
plugins: [
svelte({
preprocess: sveltePreprocess(),
compilerOptions: {
// enable run-time checks when not in production
dev: !production
}
}),
...
store
svelte에서는 상태관리 라이브러리를 따로 지원하지않고, 내부에 포함되어 있습니다.
store를 이용하여 일정관리를 해보도록 하겠습니다.
src/todo.js
import { writable } from "svelte/store";
const createTodo = () => {
const { subscribe, set, update } = writable([]);
return {
subscribe,
insert: (item) => update(n => [...n, item]),
delete: (idx) => update(n => n.filter((todo, index) => index !== idx)),
reset: () => set([])
}
}
export const todos = createTodo()
우선 일정은 리스트로 관리를 하도록 하겠습니다.
내부에서 일정을 추가하는 insert, 일정의 index를 찾아 삭제하는 delete, 일정을 초기화하는 reset을 선언해줍니다.
Component
컴포넌트는 3가지를 구현해보도록 하겠습니다.
- 일정을 입력받는 TodoInsert
- 일정을 보여주는 TodoItem
- 일정 리스트를 보여주는 TodoList
TodoInsert
TodoInsert를 작성하기전에 svelte-material-icons를 설치해줍니다.
yarn add svelte-material-icons
우선 script 부분을 작성해보도록 하겠습니다.
<script>
import CalendarPlus from 'svelte-material-icons/CalendarPlus.svelte'
import { todos } from '../store/todo'
let todo = ''
function onChange(e) {
todo = e.target.value
}
function onSubmit() {
todos.insert(todo)
todo = ''
}
</script>
우선 todo변수에 사용자의 입력을 저장하고 있다가 사용자가 제출을하면 todos배열을 업데이트 해주고 todo변수를 초기화해줍니다.
component/TodoInsert.svelte
<script>
import CalendarPlus from 'svelte-material-icons/CalendarPlus.svelte'
import { todos } from '../store/todo'
let todo = ''
function onChange(e) {
todo = e.target.value
}
function onSubmit() {
todos.insert(todo)
todo = ''
}
</script>
<form class="TodoInsert" on:submit|preventDefault={onSubmit}>
<input placeholder="TODO" on:input={onChange} bind:value={todo}/>
<button>
<CalendarPlus/>
</button>
</form>
<style lang="scss">
.TodoInsert {
display: flex;
background: #495057;
input {
background: none;
outline: none;
border: none;
padding: 0.5rem;
font-size: 1.125rem;
line-height: 1.5;
color: white;
&::placeholder {
color: #dee2e6;
}
flex: 1;
}
button {
background: none;
outline: none;
border: none;
background: #868e96;
color: white;
padding-left: 1rem;
padding-right: 1rem;
font-size: 1.5rem;
display: flex;
align-items: center;
cursor: pointer;
transition: 0.1s background ease-in;
&:hover {
background: #adb5bd;
}
}
}
</style>
TodoItem
일정을 보여주는 TodoItem에서는 일정을 보여주고 일정을 삭제할 수 있어야하기 때문에 todo와 index를 가지고 있어야 합니다. 그리고 사용자가 일정 삭제를 한다면 todos배열에서 해당 Index의 아이템을 삭제해줘야합니다.
component/TodoItem.svelte
<script>
import {todos} from "../store/todo";
export let text
export let index
function onRemove() {
todos.delete(index)
}
</script>
<div class="TodoItem-virtualized">
<div class="TodoItem">
<div class="CheckBox">
<div class="Text">{text}</div>
</div>
<div class="remove" on:click={onRemove}>
-
</div>
</div>
</div>
<style lang="scss">
.TodoItem {
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
&:nth-child(even) {
background: #f8f9fa;
}
.checkbox {
cursor: pointer;
flex: 1;
display: flex;
align-items: center;
svg {
font-size: 1.5rem;
}
.text {
margin-left: 0.5rem;
}
&.checked {
svg {
color: #22b8cf;
}
.text {
color: #adb5bd;
text-decoration: line-through;
}
}
}
.remove {
display: flex;
align-items: center;
font-size: 1.5rem;
color: #ff6b6b;
cursor: pointer;
&:hover {
color: #ff8787;
}
}
& + & {
border-top: 1px solid #dee2e6;
}
}
.TodoItem-virtualized {
& + & {
border-top: 1px solid #dee2e6;
}
&:nth-child(even) {
background: #f8f9fa;
}
}
</style>
TodoList
TodoList에서는 todos의 배열을 바탕으로 TodoItem을 생성해줘야합니다.
each block을 이용해서 TodoItem을 생성해줍니다.
component/TodoList.svelte
<script>
import {todos} from "../store/todo";
import TodoItem from "./TodoItem.svelte";
</script>
<div class="TodoList">
{#each $todos as todo, index}
<TodoItem text={todo} index={index}/>
{/each}
</div>
<style lang="scss">
.TodoList {
min-height: 320px;
max-height: 513px;
overflow-y: auto;
}
</style>
App.svelte
이제 만든 컴포넌트들을 이용해서 페이지를 구성해야겠죠?
App.svelte에서 페이지 구성을 해주도록 합시다.
App.svelte
<script>
import TodoInsert from './component/TodoInsert.svelte'
import TodoList from "./component/TodoList.svelte";
</script>
<main>
<div class="TodoTemplate">
<div class="app-title">TODO List</div>
<div class="content">
<TodoInsert/>
<TodoList/>
</div>
</div>
</main>
<style>
.TodoTemplate {
width: 512px;
margin-left: auto;
margin-right: auto;
margin-top: 6rem;
border-radius: 4px;
overflow: hidden;
}
.app-title {
background: #22b8cf;
color: white;
height: 4rem;
font-size: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.content {
background: white;
}
</style>
이렇게 하면 Todo app이 완성되었습니다.
한번 yarn run dev를 해서 페이지를 확인해보도록 할까요??
Author And Source
이 문제에 관하여(Svelte - Todo List 만들어보기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@turret1234/Svelte-Todo-List-만들어보기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)