[Luvit 한달 스터디] 새로운 웹 개발의 시작 스벨트 #3

이번주에는 스타일 제어(CSS, 애니메이션, 모션, 트랜지션)와 DOM 제어(액션, 특별요소)를 공부하고 2개의 프로젝트를 실습해보았다. 이번 글은 실습에서 느낀 것 위주로 작성해봄!
 

Luvit 한달 스터디

 

🪣프로젝트: My Bucket List

간단한 투두 프로젝트를 해보았다. UI 구현, props 활용과 props->store로 리팩토링 까지 점진적으로 기능을 확장하며 Svelte의 핵심 개념을 체험할 수 있는 프로젝트였다. 아래는 주요 학습 내용과 느낀점들
 

컴포넌트 

UI를 기능 단위로 분리해서 컴포넌트 기반으로 구성했다. 헤더(BucketHeader), 리스트(BucketList), 아이템(BucketItem), 입력 폼(BucketCreate) 등으로 컴포넌트를 나누어 개발함으로써 코드의 재사용성과 유지보수성을 높일 수 있다.
 
App.svelte에서는 각 컴포넌트를 조합하여 전체 애플리케이션 구조를 완성했다.

<script>
	import BucketHeader from "./components/BucketHeader.svelte";
    import BucketList from "./components/BucketList.svelte";
    import BucketCreate from "./components/BucketCreate.svelte";
</script>

<svelte:head>
    <title>My Bucket List</title>
</svelte:head>
<div class="bucketbox">
    <BucketHeader />
    <BucketList />
    <BucketCreate />
</div>

 

데이터 관리(Props, Store)

1. Props를 이용한 데이터 전달

프로젝트 처음에는 상위 컴포넌트인 App.svelte가 모든 상태를 소유하고, 자식 컴포넌트에게 Props를 통해 데이터와 이벤트 핸들러를 전달하는 방식을 사용했다. 데이터 흐름이 명확하다는 장점이 있지만, 컴포넌트 구조가 깊어질수록 중간 컴포넌트들이 사용하지 않는 props를 전달해야 하는 props drilling이 발생할 수 있는 구조였다. 
 

2. 스토어를 통한 전역 상태 관리

props drilling 문제를 해결하고, 상태 관리를 더욱 효율적으로 하기 위해 스토어를 활용하도록 리팩토링을 진행했다. store.js 파일에 커스텀 스토어를 생성하여 데이터와 관련된 로직을 한 곳에서 관리한다.
 
스토어는 writable, derived 스토어를 기반으로 애플리케이션의 상태를 관리하는 세 개의 커스텀 스토어를 만들었따.
 
setBucketData

주요 데이터 및 액션 관리

writable 스토어를 감싸 버킷 리스트의 데이터(buckets)와 수정 모드 상태(editMode)뿐만 아니라, 데이터를 조작하는 모든 함수(onToggle, onRemove, onSubmin 등)를 하나의 객체로 묶어 반환하는 커스텀 스토어이다. 데이터와 그 데이터를 변경하는 로직을 함께 캡슐화하여 컴포넌트의 부담을 줄이고 관리 포인트를 일원화했다.

// ch20_bucketlist/store/src/store.js
import { writable } from "svelte/store";
import { initialBuckets } from "./bucketData";
import { v4 as uuidv4 } from "uuid";

const setBucketData = () => {
    let initBucketData = {
        buckets: initialBuckets,
        editMode: ''
    }
    const { subscribe, update } = writable(initBucketData);

    const onToggle = (id) => {
        update(datas => { /* ... 체크 토글 로직 ... */ });
    };
    const onRemove = (id) => {
        update(datas => { /* ... 아이템 삭제 로직 ... */ });
    };
    const onSubmit = (bucketText) => {
         update(datas => { /* ... 새 아이템 추가 로직 ... */ });
    };
    // ... onEditMode, offEditMode, onEditItem 등 다른 함수들

    // 필요한 기능들을 객체로 리턴
    return {
        subscribe,
        onToggle,
        onRemove,
        onEditMode,
        offEditMode,
        onEditItem,
        onSubmit
    }
}
export const buckets = setBucketData();

 
setFormBucket

데이터 추가 시 사용될 텍스트 관리

새로운 버킷을 추가할 때 사용되는 <input>의 텍스트 값을 관리하기 위한 writable 스토어이다. 값을 초기화하는 resetForm 같은 커스텀 메서드를 추가하여 writable 스토어를 확장했다.

// ch20_bucketlist/store/src/store.js
const setFormBucket = () => {
    const { subscribe, set } = writable('');

    const resetFrom = () => set(''); // 값을 초기화

    return {
        subscribe,
        set,
        resetFrom
    }
}
export const bucketText = setFormBucket();

 
setChkCount

스토어로부터 파생된 데이터(체크된 개수) 관리

derived 스토어는 다른 스토어의 값에 의존하는 새로운 값을 만드는 데 사용된다. setChkCount는 buckets 스토어가 변경될 때마다, 완료되지 않은(chk:false) 할 일의 개수를 자동으로 다시 계산하여 제공한다. 이를 통해 할 일 개수를 수동으로 관리할 필요 없이 항상 최신 상태를 유지할 수 있다.

// ch20_bucketlist/store/src/store.js
import { derived } from "svelte/store";
// ...
const setChkCount = () => {
    const count = derived(buckets, $buckets => {
        return $buckets.buckets.filter((bucket) => !bucket.chk).length;
    });
    return count;
}
export const chkCount = setChkCount();

 
데이터 흐름: 컴포넌트-스토어 상호작용
커스텀 스토어를 사용하니 데이터 흐름이 한결 단순하고 명확해졌다.

• 읽기: BucketHeader는 남은 할 일 개수를 표시하기 위해 chkCount 스토어를 구독한다. Svelte의 $ 문법을 사용하여 $chkCount 처럼 접근하면, 값이 변경될 때마다 컴포넌트가 자동으로 리렌더링된다. BucketList 역시 $buckets.buckets를 구독하여 리스트를 화면에 그린다.
• 쓰기: BucketItem의 휴지통 아이콘을 클릭하면, onRemove(bucket.id) 함수가 호출된다. 이 함수는 buckets 스토어에서 가져온 것으로, 내부적으로 update를 실행하여 스토어의 상태를 변경한다. 상태가 변경되면, 이 스토어를 구독하고 있던 BucketList와 BucketHeader가 즉시 새로운 상태를 반영하여 업데이트된다.

이렇게 컴포넌트는 스토어의 메서드를 호출하여 상태 변경을 요청하고, 스토어는 내부 로직에 따라 상태를 업데이터하며, 이 상태를 구독하는 모든 컴포넌트는 자동으로 화면을 갱신하는 단방향 데이터 흐름이 완성된다.
 

동적인 화면 전환 효과

스벨트의 내장 트랜지션과 애니메이션 기능을 활용하여 효과를 주었다. 리스트 아이템이 추가되거나, 삭제될 때 효과를 적용하여 부드럽게? 생동감 있게 만들었다.
 

<!-- ch20_bucketlist/store/src/components/BucketList.svelte -->
<script>
    import { fade, slide } from "svelte/transition";
    import { flip } from "svelte/animate";
    // ...
</script>

{#each $buckets.buckets as bucket, index(bucket) }
    <div in:fade out:slide animate:flip>
        <BucketItem {bucket} />
    </div>
{/each}

in:fade, out:slide, animate:flip을 사용하여 단 몇줄만으로 자연스러운 애니메이션이 완성됐다.

---

🛩️프로젝트: Best Tour

My Bucket List에 이은 두 번째 프로젝트. 상품 목록을 보여주고, 좋아요 기능을 통해 선호도를 표시하며 새로운 여행 상품을 추가하고 삭제하는 기능을 구현했다. 
이전 프로젝트에서 다뤘던 스토어를 이용한 상태 관리를 다시 한번 적용하며 스토어에 대한 이해를 한층 높일 수 있었다. 이미지와 복합적인 데이터 구조를 다뤄서 좀 더 실제적인 애필리케이션 개발에 한 걸음 다가감
 

컴포넌트

역시 UI를 기능별로 나누었다. 

• Title.svelte: 페이지의 제목을 표시하는 컴포넌트
• BestList.svelte: 전체 여행 상품 목록을 표시하는 컨테이너 컴포넌트
• BestCreate.svelte: 새로운 여행 상품을 추가하는 폼과 버튼을 담은 컴포넌트

// ch21_besttour/complete/src/App.svelte
<script>
	import Title from "./components/Title.svelte";
	import BestList from "./components/BestList.svelte";
	import BestCreate from "./components/BestCreate.svelte";
</script>

<div class="bestbox">
	<Title name="BEST TOUR" />
	<BestList />
	<BestCreate />
</div>

 

커스텀 스토어

프로젝트 핵심 로직은 store.js 파일에 정의된 커스텀 스토어를 통해 관리된다. 데이터와 데이터를 조작하는 로직을 UI로부터 분리하여 코드의 응집도와 재사용성을 높였다.
 
setBestData

여행 상품 데이터, 핵심 로직

writable 스토어를 기반으로, 여행 상품 목록의 초기 데이터를 설정하고 '좋아요' 토글, 상품 삭제, 새 상품 추가와 같은 핵심적인 데이터 조작 함수들을 함께 제공하는 커스텀 스토어이다.
 

// ch21_besttour/complete/src/store.js
import { writable } from "svelte/store";
import { initialBests } from './bestData';
import { v4 as uuidv4 } from 'uuid';

const setBestData = () => {
    const { subscribe, update } = writable(initialBests);

    // '좋아요' 상태를 토글하는 함수
    const onToggle = (id) => {
        update(datas => {
            const setDatas = datas.map((best) => {
                return best.id === id ? { ...best, like: !best.like } : best;
            });
            return setDatas;
        });
    };

    // 특정 아이템을 삭제하는 함수
    const onRemove = (id) => { /* ...삭제 로직... */ };

    // 새 아이템을 리스트에 추가하는 함수
    const onSubmit = (bestTexts) => { /* ...추가 로직... */ };

    return {
        subscribe,
        onToggle,
        onRemove,
        onSubmit
    };
};

export const bests = setBestData();

 
setFormBest

입력 폼 데이터 관리

새로운 여행 상품을 추가할 때 사용되는 여러 입력 필드의 상태를 하나의 객체로 관리하는 커스텀 스토어이다. 폼을 초기화하는 resetFrom 같은 유틸리티 함수도 함께 제공하여 폼 관리를 용이하게 했다.

// ch21_besttour/complete/src/store.js
const setFormBest = () => {
    let formText = { name: '', price: '', image: '', descript: '' };
    const { subscribe, set } = writable(formText);

    const resetForm = () => {
        set({ name: '', price: '', image: '', descript: '' });
    };

    return { subscribe, set, resetForm };
};

export const bestTexts = setFormBest();

 

스토어와 컴포넌트 상호작용

각 컴포넌트는 필요한 스토어를 직접 구독하여 데이터에 접근하고, 스토어가 제공하는 함수를 호출하여 상태를 변경한다. 

• 데이터 구독($ 문법): BestList.svelte는 $bests를 each 블록에서 사용하여 여행 상품 목록을 반복 렌더링하고, BestCreate.svelte는 $bestTexts를 각 input에 bind:value하여 양방향 데이터 바인딩을 구현했다.
• 액션 호출: BestItem.svelte의 좋아요 버튼은 on:Click={()=>onToggle(id)}와 같이 bests 스토어에서 가져온 onToggle 함수를 직접 호출한다. 상태가 변경되면 $bests를 구독하는 BestList 컴포넌트가 자동으로 업데이트되어 변경사항이 화면에 즉시 반영된다.

<!-- ch21_besttour/complete/src/components/BestItem.svelte -->
<script>
    import { bests } from '../store';
    // ...
    const { onToggle, onRemove } = bests;
</script>

<li>
    <a href="#!">
        <img src={image} alt={name} />
        <button class="likebox" on:click={() => onToggle(id)}>
            <!-- ... -->
        </button>
        <!-- ... -->
    </a>
</li>

---

🐈느낀점

프로젝트를 하면서 Svelte의 개발 방식에 익숙해질 수 있었다. React에 익숙하기 때문에 동일한 애플리케이션을 React로 구현하는 상황을 가정하면서 비교해보니 Svelte만의 장점들이 더 명확하게 느껴지는 듯 하다.
 
1. 상태관리: React에서는 상태와 상태를 변경하는 함수들을 Props로 계속해서 내려보내야 하지만, Svelte에서는 스토어를 만들어서 필요한 컴포넌트에서 바로 불러 사용할 수 있었다. props drilling을 원천적으로 차단하고, 컴포넌트들이 상태 로직으로부터 독립되어 훨씬 깔끔하다고 느꼈다. 물런 React에서도 useReducer나 Context로 상태관리를 할 수 있긴 하지만, 스벨트 Store가 더 직관적으로 느껴졌다.
 
2. 반응성: 스벨트에서는 스토어 앞에 $ 기호를 붙이는 것만으로도 값의 변화를 구독하고 화면을 자동으로 갱신할 수 있다. React에서 useEffect를 사용하여 특정 상태 변화를 감지하고 부수 효과를 처리하는 것보다 훨씬 간단하다고 느꼈다. 코드의 양이 줄어들 뿐만 아니라, 이 값이 바뀌면 이 부분도 바뀐다는 관계가 명확하게 드러났다.
 
3. 간결한 컴포넌트 구조: 스벨트에서는 <script>, <style> 마크업이 한 파일 안에 공존하는 구조 덕분에 컴포넌트의 모든 코드를 한 눈에 파악하기 쉬웠다. 또한 상태 관리 로직을 Store로 분리하면서 UI 컴포넌트들은 오직 화면을 그리는 책임에만 집중할 수 있었다. React였다면 상태 로직을 품어 컴포넌트가 훨씬 비대해졌을 것. Svelte를 쓰니 컴포넌트가 가볍게 느껴지는 듯 하다.
 
프로젝트를 통해 스벨트의 핵심 문법을 경험해볼 수 있었다. 컴포넌트 구성부터 props, store를 사용한 상태 관리, 그리고 트랜지션으로 효과까지 단계별로 기능을 구현하면서 이전 학습에서는 경험할 수 없었던 문법 활용과 Svelte 앱 흐름을 알 수 있었다. Svelte가 제공하는 개발 편의성과 재미를 제대로 느낄 수 있었던 학습이었음!