이번 장에서는 2장에서 생성한 프로젝트의 파일 내용을 살펴보면서 스벨트의 기본 구성을 알아보겠습니다.

스벨트는 컴포넌트 단위로 코드를 작성합니다. 스벨트에서 말하는 컴포넌트란 애플리케이션을 구성하는 블록들이라고 말할 수 있습니다. 한 개 이상의 컴포넌트가 스벨트 애플리케이션을 구성합니다. 한 개의 .svelte 파일 안에 스벨트 컴포넌트 코드를 작성합니다.

컴포넌트 파일의 구성은 다음과 같습니다.

스벨트 컴포넌트 파일 구성

<!-- 자바스크립트 코드 -->
<script>
   스크립트 블록
</script>
<!-- HTML 코드 -->
<main>
   HTML 블록
</main>
<!-- CSS 코드 -->
<style>
   스타일 블록
</style>

스크립트 블록, HTML 블록, 스타일 블록으로 구성되어 있습니다. HTML 블록의 <main>은 생략하기도 합니다.