스벨트 프로그래밍

Svelte로 뚝딱! 초간단 To-Do 리스트 만들기: 프로그래밍 입문

일상로그92 2024. 10. 23. 04:30

확인했음

 

Svelte가 뭔지 아세요? 아마 처음 들어보는 분들도 있을 거 같아요. 솔직히 저도 얼마 전까지만 해도 몰랐거든요. 😅 요즘 핫하다는 프론트엔드 프레임워크 중 하나인데, 가상 DOM 없이 컴파일 타임에 최적화된 코드를 만들어서 Vue나 React보다 훨씬 빠르고 가볍다는 거예요. 게다가 배우기 쉽기까지 하다니… 솔깃하지 않나요?

 

이 글에서는 Svelte를 처음 접하는 분들을 위해 간단한 To-Do 리스트를 만들어보면서 기본적인 개념과 기능들을 익혀볼 거예요. 막상 해보면 생각보다 훨씬 쉽고 재밌다는 걸 알게 될 거예요! 자, 그럼 같이 시작해볼까요?

 


Svelte 환경 설정: 쉽고 빠르게 시작하기

Svelte 프로젝트를 시작하려면 먼저 개발 환경을 설정해야 해요. 걱정 마세요, 생각보다 훨씬 간단해요! 터미널을 열고 다음 명령어들을 차례대로 입력하면 돼요.

 

npx degit sveltejs/template svelte-todo-app
cd svelte-todo-app
npm install
npm run dev

 번째 명령어는 Svelte 프로젝트 템플릿을 다운로드하는 거고, 두 번째는 다운로드한 폴더로 이동하는 거예요. 세 번째는 필요한 패키지들을 설치하는 거고, 마지막은 개발 서버를 실행하는 명령어에요.

 

설치가 다 끝나면  주소로 접속하면 짠! 기본 Svelte 앱이 실행되는 걸 볼 수 있을 거예요.

이제 Svelte를 사용해서 멋진 To-Do 리스트를 만들 준비가 된 거예요! 😄

 


Svelte 템플릿 이해하기: 기본 구조 살펴보기

Svelte 프로젝트 템플릿을 살펴보면  폴더 안에  파일이 있는 걸 볼 수 있어요. 이 파일이 바로 우리가 앱을 만들 때 가장 많이 사용할 파일이에요.

 

Svelte는 컴포넌트 기반으로 개발하는 방식을 사용하는데요,   는 앱의 메인 컴포넌트 역할을 해요. 그리고 이 파일 안에는 HTML, CSS, JavaScript를 함께 작성할 수 있어요.

Svelte는 컴포넌트를 중심으로 개발하는 방식이기 때문에, 앱의 전체 구조를 컴포넌트로 나누고 각 컴포넌트를 독립적으로 개발하는 방식이에요. 이렇게 하면 코드를 재사용하기 쉽고 유지보수하기 편해요.

 

Svelte 파일 안에서는  태그 안에 JavaScript 코드를,  태그 안에 CSS 코드를, 그리고 나머지 HTML 태그 안에 화면에 보여질 내용을 작성해요.

 


Svelte의 핵심: 컴포넌트와 반응형 데이터 바인딩

Svelte의 가장 큰 장점 중 하나는 컴포넌트 기반 아키텍처를 사용한다는 거예요. 컴포넌트는 앱의 작은 부분을 담당하는 독립적인 단위라고 생각하면 돼요.

예를 들어, To-Do 리스트 앱에서는 To-Do 항목을 추가하는 입력 폼, To-Do 목록을 표시하는 영역, To-Do 항목을 수정하거나 삭제하는 기능 등을 각각 컴포넌트로 만들 수 있죠.

 

또, Svelte는 데이터 바인딩 기능을 제공해서 코드를 훨씬 간결하게 만들 수 있어요. 데이터 바인딩이란 HTML 템플릿과 JavaScript 데이터를 연결하는 것을 말해요.

예를 들어, To-Do 항목의 제목을  변수에 저장하고, 이 변수를 HTML 템플릿에 연결하면  변수의 값이 변경될 때마다 HTML 템플릿도 자동으로 업데이트되는 거죠.

 

Svelte에서는  지시어를 사용해서 데이터를 바인딩해요.

 


To-Do 리스트 만들기: 실전 시작!

이제 본격적으로 To-Do 리스트를 만들어볼게요. 우리는 To-Do 리스트 앱에 다음과 같은 기능을 추가할 거예요.

 

  • 새로운 To-Do 항목을 추가하는 기능
  • To-Do 목록을 화면에 표시하는 기능
  • To-Do 항목을 삭제하는 기능
  • To-Do 항목을 수정하는 기능

To-Do 항목 추가하기: input 필드와 버튼

먼저 사용자가 새로운 To-Do 항목을 추가할 수 있도록 input 필드와 버튼을 만들어야 해요.  파일의  태그 안에 다음과 같은 코드를 추가해보세요.

 

<script>
  import { writable } from 'svelte/store';

  let newTodo = ''; // 새 To-Do 항목을 저장할 변수
  let todos = writable([]); // 모든 To-Do 항목을 저장할 배열
  let nextId = 0; // To-Do 항목에 고유한 ID를 부여하기 위한 변수

  function addTodo() {
    if (newTodo.trim() === '') return; // 입력값이 비어있으면 함수를 종료
    todos.update(currentTodos => [
      ...currentTodos, 
      { id: nextId++, title: newTodo } 
    ]);
    newTodo = ''; // 입력 필드 초기화
  }
</script>

<input type="text" bind:value={newTodo} placeholder="할 일을 입력하세요" /> 
<button on:click={addTodo}>추가</button>

 는 input 필드의 값을  변수와 연결하는 역할을 해요.

그리고 은 버튼을 클릭했을 때  함수를 실행하도록 설정하는 거예요.

 


To-Do 목록 표시하기: 반복문 활용

다음은 To-Do 목록을 화면에 표시하는 기능을 구현할 거예요.  파일의 HTML 부분에 다음과 같은 코드를 추가해보세요.

 

{#each $todos as todo}
  <div>
    {todo.title}
    <button on:click={() => deleteTodo(todo.id)}>삭제</button>
  </div> 
{/each}

 Svelte에서 제공하는 반복문으로,  배열의 각 요소를 순회하면서 화면에 출력하는 역할을 해요.

각 To-Do 항목은  태그로 감싸져 있고, To-Do 항목의 제목과 삭제 버튼이 표시돼요.

 


To-Do 항목 삭제하기: 함수 구현

마지막으로 To-Do 항목을 삭제하는 기능을 구현해볼게요.  파일의  태그 안에 다음과 같은 코드를 추가해보세요.

 

function deleteTodo(id) {
  todos.update(currentTodos => currentTodos.filter(todo => todo.id !== id));
}

 함수는  배열에서 와 일치하는 To-Do 항목을 제거하는 역할을 해요.  함수를 사용해서 가 일치하지 않는 To-Do 항목만 남기는 거예요.

 


Svelte Store: 데이터 관리의 핵심

Svelte Store는 컴포넌트 간 데이터를 공유하고 관리하는 데 사용되는 기능이에요.

 함수를 사용하면 쉽게 Store를 만들 수 있어요.

 

예를 들어, To-Do 리스트 앱에서 To-Do 항목을 저장하는  배열을 Store로 관리할 수 있어요.  Store를 변경하면 Svelte는 자동으로 UI를 업데이트해주기 때문에, 개발자가 UI를 직접 업데이트하는 코드를 작성할 필요가 없어요.

 


Svelte Store의 장점: 컴포넌트 간 데이터 공유

Svelte Store를 사용하면 컴포넌트 간 데이터를 쉽게 공유할 수 있어요. 예를 들어, To-Do 리스트 앱에서 To-Do 항목을 추가하는 컴포넌트와 To-Do 목록을 표시하는 컴포넌트가 모두  Store에 접근해서 데이터를 공유할 수 있죠.

 


Svelte Store의 단점: 복잡한 상태 관리

Svelte Store는 컴포넌트 간 데이터를 공유하는 데 유용하지만, 앱의 상태가 복잡해지면 관리하기 어려울 수 있어요.  특히 여러 컴포넌트에서 동시에 Store를 변경할 경우 예상치 못한 문제가 발생할 수도 있죠.

 


하지만, 간단한 To-Do 리스트 앱처럼 상태가 복잡하지 않은 경우에는 Svelte Store를 사용하면 개발 시간을 단축하고 코드를 간결하게 만들 수 있어요.

 


Svelte의 장점과 단점: 꼼꼼히 따져보기

Svelte는 훌륭한 프론트엔드 프레임워크이지만, 장점만 있는 것은 아니에요. 장점과 단점을 꼼꼼히 따져보고, 프로젝트에 적합한지 판단하는 것이 중요해요.

 


Svelte의 주요 장점

뛰어난 성능 가상 DOM을 사용하지 않아 React나 Vue보다 빠르고 가벼워요.
간결한 코드 데이터 바인딩 기능을 사용해서 코드를 훨씬 간결하게 작성할 수 있어요.
쉬운 학습 곡선 다른 프레임워크에 비해 배우기 쉬워요.
작은 번들 크기 컴파일 타임에 최적화된 코드를 생성하기 때문에 번들 크기가 작아요.

장점 설명

 


Svelte의 주요 단점

상대적으로 작은 커뮤니티 React나 Vue에 비해 커뮤니티가 작아서 정보를 찾기 어려울 수 있어요.
제한적인 라이브러리 React나 Vue에 비해 라이브러리가 적어요.
학습 자료 부족 한국어로 된 학습 자료가 부족해요.

단점 설명

 


Svelte로 To-Do 리스트 만들기: 마무리

이 튜토리얼에서는 Svelte를 사용하여 간단한 To-Do 리스트 앱을 만드는 방법을 알아봤어요. Svelte는 컴포넌트 기반 아키텍처, 데이터 바인딩, Store 기능 등을 제공하여 개발을 쉽고 빠르게 할 수 있도록 도와줘요.

 

Svelte는 아직 React나 Vue만큼 유명하지 않지만, 뛰어난 성능과 쉬운 학습 곡선 덕분에 점점 더 많은 개발자들에게 사랑받고 있어요.

특히, 빠르고 가벼운 웹 애플리케이션을 개발해야 하는 경우에 Svelte는 좋은 선택이 될 수 있어요.

 

혹시 Svelte에 대해 더 궁금한 점이 있다면 언제든지 댓글로 질문해주세요! 😉

 

QnA

Q1. Svelte는 어떤 프로젝트에 적합한가요?

 

A1. Svelte는 빠르고 가벼운 웹 애플리케이션을 개발해야 하는 경우에 적합해요. 특히, 모바일 웹, 데이터 시각화, 인터랙티브 웹 애플리케이션 등에 유용하게 사용할 수 있어요.

 

Q2. Svelte는 React나 Vue보다 배우기 쉬운가요?

 

A2. 네, Svelte는 React나 Vue보다 배우기 쉬워요. Svelte는 컴포넌트 기반 아키텍처를 사용하고, 데이터 바인딩 기능을 제공하기 때문에, JavaScript에 대한 기본적인 지식만 있으면 쉽게 시작할 수 있어요.

 

Q3. Svelte Store는 어떻게 사용하나요?

 

A3. Svelte Store는  함수를 사용해서 만들 수 있어요. 그리고  기호를 사용해서 Store의 값에 접근할 수 있어요.

 

마무리

 

이 튜토리얼이 Svelte를 시작하는 데 도움이 되었기를 바라요!  Svelte는 정말 매력적인 프레임워크니까요.

 

궁금한 점이 있다면 언제든지 댓글 남겨주세요!

 

키워드

스벨트,Svelte,프론트엔드,프론트엔드개발,웹개발,To-Do리스트,튜토리얼,자바스크립트,컴포넌트,반응형,웹앱,웹애플리케이션,개발,개발자,초보자,입문,쉽게배우기,가이드,성능,최적화,store,데이터바인딩,웹팩,Rollup,프레임워크,웹프로그래밍,웹사이트,개발환경,웹디자인,HTML,CSS,프로그래밍