EN

페이지 3: 데이터 로딩 및 API 엔드포인트

3. 데이터 로딩 및 API 엔드포인트

SvelteKit은 load 함수를 사용하여 서버 및 클라이언트에서 데이터를 가져올 수 있는 강력한 데이터 로딩 메커니즘을 제공합니다.

3.1. load 함수로 데이터 가져오기 (+page.js / +page.server.js)

+page.js 파일의 load 함수는 서버와 클라이언트 모두에서 실행될 수 있으며, +page.server.js 파일의 load 함수는 오직 서버에서만 실행됩니다.

// src/routes/posts/[slug]/+page.server.js
export async function load({ params }) {
  const res = await fetch(\`https://api.example.com/posts/\${params.slug}\`);
  const post = await res.json();
  return { post };
}

+page.svelte에서 로드된 데이터를 프롭스로 직접 접근할 수 있습니다.

// src/routes/posts/[slug]/+page.svelte
<script>
  export let data; // \`data\` prop은 load 함수에서 반환된 값을 포함합니다.
</script>
<h1>{data.post.title}</h1>
<p>{data.post.content}</p>

3.2. API 엔드포인트 (+server.js)

+server.js 파일을 사용하여 백엔드 API 엔드포인트를 생성할 수 있습니다. 각 HTTP 메소드 (GET, POST, PUT, DELETE)에 대한 함수를 내보냅니다.

// src/routes/api/items/+server.js
import { json } from '@sveltejs/kit';

export async function GET() {
  const items = [{ id: 1, name: 'Item A' }, { id: 2, name: 'Item B' }];
  return json(items);
}

export async function POST({ request }) {
  const newItem = await request.json();
  // 데이터베이스에 저장 로직...
  return json({ message: 'Item added!', item: newItem }, { status: 201 });
}
Contact Us