Svelte로 간단한 웹 애플리케이션 만들기

프론트엔드 개발에서 다양한 프레임워크와 라이브러리를 사용하여 웹 애플리케이션을 구축할 수 있습니다. 그 중 Svelte는 최근 인기 있는 선택지로 떠오르고 있습니다. Svelte는 전통적인 프레임워크와 달리 런타임이 아닌 컴파일 시점에 코드를 변환하여 최적화된 JavaScript 코드를 생성합니다. 이번 글에서는 Svelte를 이용해 간단한 웹 애플리케이션을 만들어 보겠습니다.

Svelte 설치하기

Svelte를 시작하기 위해 먼저 Node.js와 npm이 설치되어 있어야 합니다. 설치가 완료되었다면, Svelte 프로젝트를 생성하겠습니다. 터미널에서 아래 명령어를 입력하여 Svelte 앱을 생성합니다.

npx degit sveltejs/template svelte-app
cd svelte-app
npm install

이렇게 하면 기본 Svelte 템플릿이 설치되고, 필요한 패키지들이 함께 설치됩니다.

Svelte 애플리케이션 구조

Svelte에서는 각 컴포넌트를 .svelte 파일로 작성합니다. 이 파일은 HTML, CSS, JavaScript가 하나의 파일에 포함되어 있어 매우 직관적입니다. 프로젝트 구조는 다음과 같습니다.

svelte-app
├── public
│   └── global.css
├── src
│   ├── App.svelte
│   └── main.js
└── package.json

간단한 웹 애플리케이션 만들기

이제 간단한 투두 리스트 애플리케이션을 만들어 보겠습니다. App.svelte 파일을 아래와 같이 수정합니다.

<script>
  let todos = [];
  let newTodo = '';

  function addTodo() {
    if (newTodo.trim()) {
      todos = [...todos, newTodo.trim()];
      newTodo = '';
    }
  }

  function removeTodo(index) {
    todos.splice(index, 1);
    todos = [...todos];
  }
</script>

<style>
  ul {
    list-style: none;
    padding: 0;
  }
  li {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
  }
</style>

<h1>투두 리스트</h1>
<input bind:value={newTodo} placeholder="할 일을 입력하세요" />
<button on:click={addTodo}>추가</button>

<ul>
  {#each todos as todo, index}
    <li>
      {todo} <button on:click={() => removeTodo(index)}>삭제</button>
    </li>
  {/each}
</ul>

코드 설명

1. 변수 선언: todos 배열과 입력 필드에 바인딩할 newTodo 변수를 선언합니다.
2. 할 일 추가하기: addTodo 함수를 통해 새로운 할 일을 추가합니다. 입력 필드가 비어있지 않을 경우에만 추가합니다.
3. 할 일 삭제하기: removeTodo 함수는 선택된 할 일을 배열에서 제거합니다.
4. UI 구성: HTML을 이용해 할 일 입력 필드와 추가 버튼, 그리고 할 일 목록을 표시합니다. #each 구문을 사용하여 todos 배열을 순회하며 각 할 일을 출력합니다.

개발 서버 실행

이제 애플리케이션을 실행해 볼 차례입니다. 터미널에서 아래 명령어를 입력하여 개발 서버를 시작합니다.

npm run dev

브라우저에서 http://localhost:5000에 접속하면, 우리가 만든 투두 리스트 애플리케이션을 확인할 수 있습니다.

마무리

이번 글에서는 Svelte를 사용하여 간단한 웹 애플리케이션인 투두 리스트를 만들어 보았습니다. Svelte는 컴파일 시점에 최적화된 코드를 생성하여 성능이 뛰어나며, 직관적인 문법 덕분에 개발이 쉽습니다. 앞으로 Svelte를 활용하여 더 복잡한 애플리케이션을 만들어 보시길 바랍니다. 다양한 기능을 추가해보며 Svelte의 매력을 느껴보세요!