1. 새로운 컴포넌트 파일 생성: 새로운 컴포넌트를 만들기 위해 .svelte 확장자를 가진 파일을 생성합니다.

2. 컴포넌트 코드 작성: .svelte 파일에는 HTML, CSS, 그리고 JavaScript를 함께 작성할 수 있습니다. 일반적으로 다음과 같은 형태로 작성됩니다:

<script>
    // JavaScript 코드
</script>

<style>
    /* CSS 코드 */
</style>

<!-- HTML 코드 -->

1. 컴포넌트 로직 작성: <script> 태그 내부에는 컴포넌트의 상태(state) 및 동작을 정의하는 JavaScript 코드를 작성할 수 있습니다. 예를 들어:

<script>
    let count = 0;

    function increment() {
        count += 1;
    }
</script>

1. 컴포넌트 템플릿 작성: <script> 태그 외부에는 컴포넌트의 외관을 정의하는 HTML 코드를 작성할 수 있습니다. 예를 들어:

<button on:click={increment}>
    Clicked {count} times
</button>

1. 컴포넌트 사용: 작성한 컴포넌트를 다른 Svelte 컴포넌트나 HTML 파일에서 사용할 수 있습니다. 예를 들어:

<script>
    import MyComponent from './MyComponent.svelte';
</script>

<MyComponent/>

이렇게 작성한 Svelte 컴포넌트는 기존의 웹 프레임워크보다 선언적이며, 실행시간에 컴파일되어 최적화된 JavaScript 코드를 생성합니다. Svelte를 사용하면 효율적이고 빠른 웹 애플리케이션을 개발할 수 있습니다.