[Svelte 시리즈 7편] 작은 페이지를 조립하고 데이터를 불러오자

앞선 개념을 한 화면에 꿰어야 앱의 뼈대가 완성됩니다. 이번 글은 페이지 레이아웃과 데이터 요청을 같은 순서로 정리합니다.

이번 글에서 새로 나오는 용어

1. 페이지 컴포넌트: 라우트 전체를 대표하는 최상위 컴포넌트로, 레이아웃·데이터 요청·스토어 연결을 시작하는 지점입니다.
2. onMount: 컴포넌트가 실제 DOM에 붙은 뒤 실행되는 Svelte 훅으로, 안전하게 API를 호출할 수 있는 타이밍입니다.
3. API: 서버와 데이터를 주고받는 규칙 세트로, fetch('/api/...') 호출처럼 URL과 JSON 응답으로 구성됩니다.
4. 로딩/에러 상태: 데이터를 기다리거나 실패했을 때 사용자에게 현재 상황을 보여 주기 위한 별도 상태 플래그입니다.

개념

페이지 컴포넌트는 화면 전체를 책임지는 루트입니다. 헤더, 본문, 사이드 같은 영역을 나누고 데이터를 불러오는 출발점을 선언합니다. onMount는 컴포넌트가 실제 DOM에 붙은 직후 실행되는 함수입니다. 렌더가 끝난 후 호출하면 API를 안전하게 요청할 수 있습니다. API(Application Programming Interface)는 서버와 데이터를 주고받는 약속입니다. 로딩→성공→에러 단계를 갖추면 사용자가 현재 상태를 이해할 수 있습니다.

코드

서비스 상태 보드를 통해 페이지의 기본 흐름을 확인합니다.

<script>
  import { onMount } from 'svelte';
  let services = [];
  let loading = true;

  async function fetchStatus() {
    loading = true;
    const res = await fetch('/api/status');
    services = await res.json();
    loading = false;
  }

  onMount(fetchStatus);
</script>

{#if loading}
  <p>상태를 불러오는 중...</p>
{:else}
  <ul>
    {#each services as service (service.id)}
      <li>
        <strong>{service.name}</strong> — {service.healthy ? '정상' : '점검 중'}
      </li>
    {/each}
  </ul>
{/if}

fetchStatus 함수는 로딩 문구와 실제 데이터를 함께 제어합니다. 교내 서버 상태판이나 동아리 프로젝트 모니터를 만들 때 그대로 쓸 수 있는 패턴입니다. 이 구조를 articlesStore 같은 스토어와 결합하면 목록·상세 UI도 쉽게 확장됩니다.

// src/lib/stores/articles.js

function createArticlesStore() {
  const { subscribe, set, update } = writable({
    list: [],
    selected: null,
    loading: false,
    error: null
  });

  async function load() {
    update((state) => ({ ...state, loading: true, error: null }));
    try {
      const res = await fetch('/api/articles');
      const data = await res.json();
      set({ list: data, selected: data[0] ?? null, loading: false, error: null });
    } catch (err) {
      set({ list: [], selected: null, loading: false, error: err.message });
    }
  }

  function select(article) {
    update((state) => ({ ...state, selected: article }));
  }

  return { subscribe, load, select };
}

export const articlesStore = createArticlesStore();

루트 페이지는 load를 실행하고, 리스트 컴포넌트는 $articlesStore.list를 반복해 그립니다. 상세 컴포넌트는 $articlesStore.selected를 표시합니다. 이렇게 하면 로딩, 에러, 빈 목록 상태를 한 스토어에서 관리할 수 있습니다.

왜 중요한가

실제 앱은 요약 리스트와 상세 패널을 동시에 보여주는 경우가 많습니다. 페이지 루트가 명확하면 팀원이 이어붙일 때도 어디에서 데이터를 가져오는지 헷갈리지 않습니다. 또한 로딩-에러-성공 구조를 습관처럼 쓰면 유지보수 중에 상태 누락으로 인한 흰 화면을 막을 수 있습니다.

실습

• 따라 하기: 서비스 상태 보드를 작성하고 onMount에서 데이터를 불러온다.
• 확장하기: articlesStore를 생성해 목록·상세 레이아웃을 추가한다.
• 디버깅: 데이터가 사라지면 $articlesStore 접두사와 load의 에러 처리 구문을 점검한다.
• 완료 기준: 새로고침 버튼을 눌러도 목록과 상세가 동시에 최신 데이터를 보여 준다.

마무리

페이지는 레이아웃, 스토어, API 요청을 연결하는 중심입니다. 이 흐름을 익히면 이후 라우팅·레이아웃 심화 주제에서도 흔들리지 않습니다.