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

Luvit 한달 스터디

 

🎞️최종 프로젝트: Moving

Svelte의 기본 문법부터, 라우팅, API 통신, 외부 라이브러리 연동까지, 그동안 학습한 것들을 종합해서 TMDB API를 활용한 OTT 사이트 Moving 클론 프로젝트를 진행했다. 데이터 흐름과 컴포넌트 아키텍처를 고민하며 실제 서비스와 유사한 구조를 구현해볼 수 있는 프로젝트 경험이었다.

 

프로젝트 개요

Moving 프로젝트는 메인 페이지의 자동 슬라이드 배너, 현재 상영작/인기 상영작 등 카테고리별 영화 목록, 그리고 각 영화의 상세 페이지로 구성된 SPA이다. 프로젝트 구현을 위해 svelte-routing으로 페이지 구조를 설계하고, swiper.js로 동적인 UI를 구현했다. 또 Svelte의 {#await} 블록과 커스텀 스토어를 사용해 TMDB API 데이터를 효율적으로 연동해 사용했다.

 

핵심 기능/학습 내용

1. 컨테이너/프레젠테이셔널 패턴을 적용한 컴포넌트 설계

이번 프로젝트에서는 코드 관심사 분리를 위해 컨테이너(Container)와 프레젠테이셔널(Presentational) 패턴을 도입했다.

• 컨테이너 컴포넌트(/containers): API 호출, 상태 관리 등 데이터와 로직을 전담한다. {#await} 블록을 사용해 비동기 데이터를 불러온 후, 프레젠테이셔널 컴포넌트로 전달하는 역할을 한다.
• 프레젠테이셔널 컴포넌트(/components): 컨테이너로부터 데이터를 전달받아 순수하게 UI를 그리는 역할에만 집중하는 컴포넌트. 로딩 스피너, 에러 페이지, 영화 목록 등이 포함된다.

components 폴더는 3가지 하위 폴더로 더 세분화하였다.

• common: 모든 페이지에서 공통적으로 사용할 컴포넌트 모음 
• main: 메인페이지에만 표시하는 컴포넌트 모음
• sub: 서브 페이지에서 표시하는 컴포넌트 모음

이렇게 데이터 로직과 UI 렌더링 로직을 명확하게 구분하여 컴포넌트 구조를 구성하였다.

<!-- /src/containers/MainListContainer.svelte (컨테이너) -->
<script>
    import { mainPromise } from '../libs/store'; // Promise를 담은 스토어
    import MainList from '../components/main/MainList.svelte'; // UI 컴포넌트
    import MainLoading from '../components/common/MainLoading.svelte';
    import Error from '../components/common/Error.svelte';
</script>

{#await $mainPromise}
    <MainLoading />
{:then res}
    <!-- 로직 처리 후 UI 컴포넌트로 데이터 전달 -->
    <MainList movies={res.data.results} />
{:catch error}
    <Error {error} />
{/await}

 

2. svelte-routing을 리용한 다중 페이지 구성

메인 페이지와 각 영화의 상세 페이지 간 이동을 구현하기 위해 svelte-routing을 사용했다. App.svelte에서 전체적인 라우팅 구조를 정의하고, 동적 파라미터(:id)를 활용하여 각기 다른 영화 상세 페이지를 렌더링하도록 구현했다.

<!-- /src/App.svelte -->
<script>
	import { Router, Route } from "svelte-routing";
	import Header from './components/common/Header.svelte';
	import MainPage from './pages/MainPage.svelte';
	import NowPage from './pages/NowPage.svelte';
	import NowSubPage from './pages/NowSubPage.svelte';
	// ...
</script>

<Header />
<main>
    <Router {url}>
        <Route path="/" component={MainPage} />
        <Route path="/now" component={NowPage} />
        <!-- 동적 파라미터를 사용한 상세 페이지 라우트 -->
        <Route path="/now/:id" component={NowSubPage} />
        <!-- ... -->
    </Router>
</main>
<!-- ... -->

 

3. swiper.js로 구현한 슬라이드 UI

메인 페이지의 상단 배너와 카테고리별 영화 목록은 swiper.js 라이브러리를 연동하여 동적인 캐러셀 형태로 구현했다. Svelte용 Swiper 컴포넌트를 사용하니, 네이티브 Svelte 컴포넌트를 다루듯 props로 옵션을 전달하는 것만으로 자동 재생, 네비게이션, 페이지네이션 등 복잡한 기능을 쉽게 적용할 수 있었다.

<!-- /src/components/main/MainList.svelte -->
<script>
    import { Swiper, SwiperSlide } from 'swiper/svelte';
    import { Navigation, Pagination, Autoplay } from 'swiper';
    import 'swiper/css';
    // ...
</script>

<Swiper
    modules={[Navigation, Pagination, Autoplay]}
    navigation
    pagination={{ clickable: true }}
    autoplay={{ delay: 2500, disableOnInteraction: false }}
    loop={true}
>
    {#each movies as movie}
    <SwiperSlide>
        <!-- 슬라이드 아이템 -->
    </SwiperSlide>
    {/each}
</Swiper>

 

4. 스토어와 {#await} 블록을 활용한 API 데이터 관리

store.js 파일 내에 axios를 사용하여 TMDB API를 호출하고, 그 결과인 Promise 자체를 writable 스토어에 담아 반환하는 커스텀 스토어 함수를 만들어 사용했다.

// /src/libs/store.js
import { writable } from "svelte/store";
import axios from 'axios';

const setPromise = (url) => { 
    let promise;
    const { subscribe } = writable(promise);

    const getPromise = async () => {
        // ... API 호출 설정 ...
        try {
            const res = await axios.request(options);
            return res;
        } catch(error) {
            throw new Error(error);
        }
    };
    
    promise = getPromise();
    return { subscribe };
}

export const mainPromise = setPromise('now_playing');
// ...

컨테이너 컴포넌트에서는 이 스토어를 구독($mainPromise)하여 {#await} 블록에 넘겨주기만 하면, 로딩 중, 성공, 실패 각 상태에 맞는 UI를 선언적으로 렌더링할 수 있다. 이 패턴을 사용하여 컴포넌트의 script 영역에서 비동기 상태를 관리하는 코드가 사라져 깔끔하고 직관적인 구조를 유지할 수 있었다.

 

 

느낀점

Moving 프로젝트는 지금까지 학습한 Svelte 기능들을 하나의 프로젝트로 통합해보는 최종 과제였다. 컴포넌트 아키텍쳐 설계부터 라우팅을 통한 페이지 흐름 구성, 스토어를 활용한 데이터 상태 관리, 외부 라이브러리 도입을 통한 UI 확장까지 Svelte 개발의 전반적인 과정을 직접 경험할 수 있었다. 이를 통해 Svelte가 가진 간결함과 강력한 기능들이 실제 프로젝트에서 어떻게 효과적으로 쓰일 수 있는지 체감할 수 있었고, 전반적인 개발 숙련도 역시 한 층 높일 수 있는 경험이었다.

---

🥳새로운 웹 개발의 시작 스벨트 Svelte 완독 후기

한 달간의 Svelte 스터디가 끝났다. 스벨트를 처음 접하는 입장에서 매우 만족스러운 학습 경험이었다.

🧩구조적인 학습 방식

챕터별로 학습 내용을 되돌아볼 수 있는 돌아보기와 쪽지 시험 코너가 있어, 챕터의 핵심 개념을 정리하고 복습하는데 많은 도움이 되었다. 내용 역시 코드 예제를 중심으로 구성되어 있어, 따라서 타이핑해보면서 개념을 체회할 수 있는 구성이었다.

 

🎨실습 위주의 구성

총 세가지 프로젝트가 포함되어 있다:

• My Bucket List
• Best Tour
• Moving

이 프로젝트들을 통해 스토어 상태 관리, 라우팅 구성, 외부 API 연동, UI 라이브러리 적용 등 다양한 기능들을 직접 구현해볼 수 있었다. Moving 프로젝트의 경우, 샘플 코드를 넘어 실전 개발에 가까운 경험을 할 수 있었던 점이 특히 좋았다. 덕분에 실제 서비스에서 스벨트를 어떻게 활용할 수 있을지 감을 잡을 수 있었다.

 

🐈버전 고민 x

실습은 sveltekit 없이 진행되었다. 하지만 책 부록에서 sveltekit 관련 내용도 간단히 다뤄주기 때문에 최신 버전의 스벨트를 사용할 때도 크게 무리가 없을 것으로 보인다. 버전 차이로 인한 문제도 없었고, 실습 코드를 바로 적용해도 잘 작동했기 때문에 버전에 대한 걱정 없이 학습할 수 있는 책이다. 25년 출간된 최신 도서여서, 지금 시점에서 Svelte를 학습하려는 사람에게 적합하다.

책으로 svelte를 학습하고자 한다면 Luvit...강추💯

 

🚩부담스럽지 않은 분량

나는 1-2부, 3부, 4-5부, 6-7부 이렇게 4분할 하여 학습을 진행했다.

일주일에 하루정도 투자했는데 여유롭게 완독할 수 있었다. 쉬운 설명과 부담스럽지 않은 분량으로, 쉽고 빠르게 스벨트를 익힐 수 있는 구성이었다.

한 달동안 경험한 스벨트는 정말 가볍고 직관적인 프레임워크였다. 이 책은 그런 Svelte의 철학과 기능을 빠르게 익히고 직접 사용해볼 수 있는 훌륭한 가이드였다. 짧은 기간 동안 프레임워크의 전반적인 구조와 실전 사용법까지 익힐 수 있었던 알찬 경험이었고, Svelte를 빠르게 배우고 싶은 사람이라면 이 책을 적극 추천하고 싶다!