SvelteKit 및 TypeScript 시작하기

Svelte JS는 웹 개발을 위한 가장 유명한 프레임워크 중 하나이며 간단한 구문, 손쉬운 상태 관리 등으로 인해 개발자 커뮤니티에서 가장 사랑받는 프레임워크 중 하나가 되었습니다.

반면에 TypeScript는 정적 타이핑과 대규모 프로젝트에서의 우수한 성능으로 인해 모든 프로젝트 개발에 가장 적합한 선택입니다.

SvelteKit + TypeScript

SvelteKit은 Svelte로 구동되는 최근 출시된 프레임워크로 유연하고 강력한 라우팅 시스템 등의 큰 장점을 포함하고 있습니다. 중대형 프로젝트를 개발할 수 있는 훌륭한 대안이며 개발 속도를 높이기 위해 많은 도구를 통합합니다.

이 자습서에서는 프로젝트에서 두 도구를 통합하는 방법을 배웁니다.

Note: Before you start make sure you have Node JS installed on your machine

먼저 새 SvelteKit 프로젝트를 생성해 보겠습니다.

npm create svelte@latest my-project-name

스켈레톤 프로젝트를 사용하도록 선택합니다.
그리고 다음 단계를 따르십시오.

이제 프로젝트 폴더로 이동합니다.

cd my-project-name

npm install

//to actively check for TS errors in our code runs
npm run check:watch

그게 다예요 😎, 우리는 이미 TypeScript로 구성된 SvelteKit 프로젝트를 가지고 있습니다. 이제 Svelte 내에서 TypeScript가 어떻게 보이는지 봅시다. 이를 위해 API를 가져올 것입니다.

index.svelte로 이동하여 다음과 같이 TS 지원을 추가해야 합니다.

  <script lang="ts">

  </script> 

In this occasion we will be fetching a test API, also we will be using axios which you can install running in your terminal npm install axios

우리가 작업할 API의 형식은 다음과 같습니다.

  {
      "id": 1,
      "email": "[email protected]",
      "first_name": "George",
      "last_name": "Bluth",
      "avatar": "https://reqres.in/img/faces/1-image.jpg"
  } 

가장 먼저 할 일은 TS 인터페이스와 API에서 가져올 함수를 정의하는 것입니다.

interface User {
   id: number;
   email: string;
   first_name: string;
   last_name: string;
   avatar: string;
}

type userData = {
    data: User[];
};

const getUser = async (url: string): Promise<User> => {
   // here we can use axios to get the user from the API
}

우리의 기능을 완성하자

const getUsersData = async (url: string): Promise<User> => {
    const { data, status } = await axios.get<userData>(url);
    if (status === 200) {
        console.log(JSON.stringify(data.data));
        return data.data;
    } else {
            throw new Error('Something went wrong');
    }
};

const userRespose = getUsersData("https://reqres.in/api/users");

터미널에서 다음과 같은 것을 볼 수 있습니다. 즉, 코드가 올바르게 작동하고 🥳 데이터를 받고 있음을 의미합니다.



이제 이 데이터를 HTML에 표시하기만 하면 됩니다. 👌이것이 Svelte에서 어떻게 작동하는지 봅시다:

{#await usersRespose}
    <p>...loading</p>
    {:then result}
        {#each result as user}
            <div class="user">
                <p>{user.id} - {user.first_name} {user.last_name}</p>
                <img src={user.avatar} alt={user.name}>
            </div>
        {/each}
    {:catch error}
        <p>Upps! {error}</p>
{/await}

결과 스타일을 지정하기 위해 약간의 CSS를 추가해 보겠습니다.

<style>
    .user {
        display: flex;
        align-items: center;
        margin: 20px;
    }
    .user img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-left: 10px;
    }
</style>

이제 결과를 볼 수 있습니다 😏


전체 코드:

<script lang="ts">
    import axios from 'axios';

    type User = {
        id: number;
        email: string;
        first_name: string;
        last_name: string;
        avatar: string;
    };

    type userData = {
        data: User[];
    };

    const getUsersData = async (url: string): Promise<User> => {
        const { data, status } = await axios.get<userData>(url);
        if (status === 200) {
            console.log(JSON.stringify(data.data));
            return data.data;
        } else {
            throw new Error('Something went wrong');
        }
    };

    const usersRespose = getUsersData("https://reqres.in/api/users");
</script>

{#await usersRespose}
    <p>...loading</p>
    {:then result}
        {#each result as user}
            <div class="user">
                <p>{user.id} - {user.first_name} {user.last_name}</p>
                <img src={user.avatar} alt={user.name}>
            </div>
        {/each}
    {:catch error}
        <p>Upps! {error}</p>
{/await}


<style>
    .user {
        display: flex;
        align-items: center;
        margin: 20px;
    }
    .user img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-left: 10px;
    }
</style>

그게 다입니다. 보시다시피 TypeScript와 SvelteKit을 단일 프로젝트에 통합했으며 두 기술의 이점을 즉시 확인했습니다. 한편으로는 TS의 정적 타이핑을 사용하는 보다 명확하고 읽기 쉬운 JavaScript 구문과 다른 한편으로는 Svelte가 제공하는 모든 이점을 활용하여 웹 애플리케이션을 만들 수 있습니다.

이 튜토리얼이 지금부터 Svelte JS 프로젝트에 TS를 통합하는 데 도움이 되었기를 바랍니다. ✌🏻