Svelte에서 전역 변수를 사용하기 위해서는 src 폴더 내부에 stores.js 파일을 생성해야 합니다. stores.js 파일은 Svelte Store를 정의하는 데 사용됩니다. 예를 들어, 전역적으로 사용되는 상태를 위한 Store를 생성할 수 있습니다.

** stores.js **

import { writable } from 'svelte/store';

export const greeting = writable('Hello');
export const userCount = writable(0);

위의 코드에서는 greeting과 userCount라는 전역 상태를 위한 Store를 생성하고 내보냈습니다. writable 함수는 Svelte Store를 생성하는 함수이며, 초기값을 인자로 전달할 수 있습니다.

이제 다른 Svelte 컴포넌트에서 이 Store를 사용할 수 있습니다.

** App.svelte **

<script>
  import { greeting, userCount } from './stores.js';
</script>

<main>
  <h1>{$greeting}</h1>
  <p>Current User Count: {$userCount}</p>
</main>

<script>
  // Store 값을 변경하기 위해 다음과 같이 사용할 수 있습니다.
  $greeting.set('Bonjour');
  $userCount.update(n => n + 1);
</script>

<style>
  /* 스타일링 코드 */
</style>

이 예제에서 $ 접두사는 Store를 읽고있음을 나타냅니다. $greeting은 greeting Store의 값에 접근하는 방법이며, $greeting.set('Bonjour')은 greeting Store의 값을 변경하는 방법입니다. 마찬가지로, $userCount.update()를 사용하여 userCount Store 값을 증가시킬 수 있습니다.

이런 방식으로 Svelte에서 전역 변수 및 상수를 사용할 수 있습니다. Store를 만들어서 필요한 컴포넌트에서 값을 읽거나 변경할 수 있습니다.