1. try-catch 문 사용하기

가장 일반적인 오류 처리 방법은 try-catch 문을 사용하는 것입니다. Svelte 컴포넌트 내에서 try-catch 문을 사용하여 예외를 처리할 수 있습니다. 예를 들어:

<script>
  let error = null;

  function handleClick() {
    try {
      // 오류가 발생할 수 있는 코드
      throw new Error('오류가 발생했습니다.');
    } catch (e) {
      error = e;
    }
  }
</script>

<main>
  {#if error}
    <p>오류가 발생했습니다: {error.message}</p>
  {:else}
    <button on:click={handleClick}>오류 발생시키기</button>
  {/if}
</main>

위의 예제에서는 버튼을 클릭하면 try 블록 내에서 오류가 발생하고, catch 블록에서 해당 오류를 처리하고 error 변수에 할당합니다. 이후 error 변수가 null이 아닌 경우에는 오류 메시지를 표시하고, 그렇지 않은 경우에는 버튼을 표시합니다.

2. onError 이벤트 사용하기

Svelte 컴포넌트에서는 onError 이벤트를 사용하여 컴포넌트 내에서 발생한 오류를 처리할 수도 있습니다. 예를 들어:

<script>
  let error = null;

  function handleClick() {
    // 오류가 발생할 수 있는 코드
    throw new Error('오류가 발생했습니다.');
  }

  function handleError(event) {
    error = event.detail.error;
  }
</script>

<main>
  {#if error}
    <p>오류가 발생했습니다: {error.message}</p>
  {:else}
    <button on:click={handleClick}>오류 발생시키기</button>
  {/if}
</main>

<script on:error={handleError}></script>

위의 예제에서는 handleClick 함수에서 오류가 발생하면 onError 이벤트가 발생하고, handleError 함수에서 오류를 처리하여 error 변수에 할당합니다. 그리고 error 변수가 null이 아닌 경우에는 오류 메시지를 표시하고, 그렇지 않은 경우에는 버튼을 표시합니다. 또한, on:error 속성을 사용하여 handleError 함수를 등록해야 합니다.

3. Rollup 플러그인 사용하기

Svelte는 Rollup과 함께 사용되는 경우, rollup-plugin-terser와 같은 플러그인을 사용하여 오류 처리를 할 수도 있습니다. 이 플러그인은 코드를 최적화하고, 오류 처리를 위한 디버그 정보를 포함시킵니다. Rollup 플러그인을 사용하는 방법은 Svelte 공식 문서를 참조하시기 바랍니다.

이상으로 Svelte에서의 오류 처리 방법을 소개했습니다. 선택한 방법에 따라 프로젝트의 요구사항에 맞게 오류 처리를 구현할 수 있습니다.