페이지 5: 배포 및 고급 기능

5. 배포 및 고급 기능

배포는 SvelteKit 애플리케이션의 유연한 측면이며, 다양한 어댑터를 통해 이루어집니다. 이를 통해 앱을 다양한 환경에 맞게 최적화할 수 있습니다.

5.1. 어댑터를 사용한 배포

SvelteKit은 Vercel, Netlify, Node, Static 등 다양한 배포 환경을 지원하는 어댑터를 제공합니다. 예를 들어, Node.js 서버에 배포하려면 @sveltejs/adapter-node를 설치하고 svelte.config.js를 구성합니다.

// svelte.config.js
import adapter from '@sveltejs/adapter-node';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter()
  }
};
export default config;

그 후, npm run build 명령으로 빌드하고 생성된 출력물을 배포합니다.

5.2. 서버 사이드 렌더링 (SSR) 및 정적 사이트 생성 (SSG)

• SSR (Server-Side Rendering): SvelteKit의 기본 동작 방식입니다. 요청 시 서버에서 HTML을 생성하여 전송하므로 초기 로드 시간이 빠르고 SEO에 유리합니다.
• SSG (Static Site Generation): adapter-static을 사용하여 앱을 완전히 정적인 HTML, CSS, JS 파일로 미리 빌드할 수 있습니다. 이는 변경이 거의 없는 콘텐츠 기반 웹사이트에 적합하며, CDN을 통해 빠르게 제공될 수 있습니다.

5.3. 기타 고급 기능

• Pre-rendering: 특정 경로를 빌드 시 미리 렌더링하여 정적 파일로 만들 수 있습니다.
• Hooks (src/hooks.server.js): 서버에서 요청을 가로채어 인증, 응답 수정 등 글로벌 로직을 처리할 수 있습니다.
• 환경 변수: $env/static/private 및 $env/static/public을 사용하여 환경 변수를 안전하게 관리합니다.

이 5단계를 모두 완료했다면, 강력하고 현대적인 SvelteKit 웹 애플리케이션을 제작할 준비가 된 것입니다.