SvelteKit 앱을 만드는 방법은 무엇인가요?

SvelteKit은 웹 애플리케이션을 구축하기 위한 강력한 프레임워크로, Svelte 프레임워크의 단순성과 성능에 추가 기능을 결합한 것입니다. Svelte로 애플리케이션을 구축하기 위한 공식 프레임워크입니다.

SvelteKit는 빌드 과정에서 애플리케이션 코드를 매우 효율적인 자바스크립트 코드로 컴파일하는 컴포넌트 기반 프레임워크인 Svelte의 원칙을 기반으로 합니다.

SvelteKit은 라우팅, 서버 측 렌더링(SSR), 코드 분할과 같은 기능을 기본적으로 제공하는 본격적인 애플리케이션 프레임워크를 제공하여 한 단계 더 발전했습니다.

이 문서에서는 SvelteKit을 살펴보고 SvelteKit과 Back4app을 사용하여 기본 애플리케이션을 빌드합니다.

SvelteKit의 장점

SvelteKit은 여러 가지 장점을 제공합니다. 다음은 SvelteKit의 주요 장점 중 일부입니다:

성능

SvelteKit은 뛰어난 성능으로 유명합니다. 프레임워크 크기가 작아 초기 페이지 로딩 속도가 빠릅니다. 또한 SvelteKit은 변경되는 DOM 부분만 업데이트하는 반응형 업데이트를 사용합니다. 그 결과 반응성이 뛰어나고 사용이 부드러운 고성능 애플리케이션이 탄생합니다.

SvelteKit은 빌드 프로세스 중에 애플리케이션 코드를 컴파일하여 고도로 최적화되고 효율적인 JavaScript 코드를 생성합니다. 이 접근 방식은 런타임 프레임워크가 필요하지 않으므로 로드 시간이 단축되고 성능이 향상됩니다.

작은 번들 크기

SvelteKit은 다른 프레임워크에 비해 작은 번들 크기를 생성합니다. 각 컴포넌트에 필요한 코드만 포함하기 때문에 오버헤드를 최소화할 수 있습니다. 이는 인터넷 연결 속도가 느리거나 대역폭이 제한된 사용자에게 매우 유용합니다.

SvelteKit의 작은 번들 크기는 성능을 개선하고 모바일 기기에서 사용자 경험을 향상시킵니다. 또한 효율적인 코드 분할과 지연 로딩을 지원하여 개발자의 경험을 개선합니다.

풍부한 컴포넌트 에코시스템

풍부한 컴포넌트 에코시스템은 SvelteKit의 중요한 장점입니다. SvelteKit은 개발자에게 애플리케이션에 쉽게 통합할 수 있는 다양한 사전 빌드 및 사용자 지정 가능한 구성 요소를 제공합니다.

SvelteKit의 풍부한 컴포넌트 에코시스템은 개발을 가속화하고 UI 일관성을 개선하며 코드 재사용성을 촉진할 수 있습니다. 또한 다른 라이브러리 및 도구로 신속하게 프로토타이핑하고 확장할 수 있습니다.

서버 측 렌더링(SSR)

SvelteKit은 서버 측 렌더링 기능을 제공하여 개발자가 페이지를 클라이언트에 전달하기 전에 서버에서 미리 렌더링할 수 있도록 지원합니다. 이 접근 방식은 초기 페이지 로딩 속도를 향상시키고 검색 엔진 가시성을 최적화하며 전반적인 사용자 경험을 향상시킵니다.

SvelteKit의 서버 측 렌더링은 SvelteKit 애플리케이션의 전반적인 성능을 향상시킵니다. 또한 캐싱, 동적 콘텐츠, 원활한 탐색 및 코드 공유를 가능하게 합니다.

기본 제공 라우팅

SvelteKit은 애플리케이션 경로 관리를 간소화하는 기본 제공 라우팅 시스템을 제공합니다. 이를 통해 개발자는 선언적으로 경로를 정의할 수 있습니다. 또한 개발자는 매개변수를 사용하여 경로를 정의하여 동적 페이지를 만들 수도 있습니다.

SvelteKit의 라우팅 시스템은 프로그래밍 방식의 탐색 기능을 제공합니다. 여기에서 개발자는 SvelteKit에서 제공하는 기능을 사용하여 프로그래밍 방식으로 다양한 경로를 탐색할 수 있습니다. 또한 SvelteKit은 경로 가드 및 미들웨어 기능을 제공하여 개발자가 고급 라우팅 로직을 구현할 수 있도록 합니다.

SvelteKit의 한계

SvelteKit은 많은 장점을 제공하지만 개발자가 알아야 할 몇 가지 제한 사항도 있습니다. 다음은 몇 가지입니다:

학습 곡선

SvelteKit은 React나 Angular와 같은 다른 프레임워크에 비해 상대적으로 새롭기 때문에 사용 가능한 학습 리소스가 적을 수 있습니다. SvelteKit은 몇 가지 고유한 개념과 구문을 도입하여 초보 개발자에게는 어려울 수 있습니다.

이미 Svelte에 익숙한 개발자는 SvelteKit으로 쉽게 전환할 수 있지만, Svelte를 처음 접하는 개발자는 프레임워크를 익히는 데 시간을 투자해야 할 수 있습니다.

제한된 커뮤니티 지원

SvelteKit은 아직 인기를 얻고 있기 때문에 커뮤니티 지원이 다른 프레임워크에 비해 광범위하지 않을 수 있습니다. SvelteKit의 제한된 커뮤니티 지원으로 인해 개발자가 배우고, 문제를 해결하고, 일자리를 찾는 데 어려움을 겪을 수 있습니다.

그러나 커뮤니티가 성장하고 있으며 제한된 지원의 영향을 완화할 수 있는 방법이 있습니다. 예를 들어 개발자는 포럼과 소셜 미디어 플랫폼을 통해 기존 Svelte 커뮤니티에 참여할 수 있습니다.

기존 코드베이스와의 호환성

다른 프레임워크로 구축된 기존 코드베이스가 있는 경우 이를 SvelteKit으로 마이그레이션하려면 상당한 노력이 필요할 수 있습니다. SvelteKit은 다른 아키텍처 접근 방식을 따르기 때문에 전체 코드베이스의 로직을 다시 작성해야 합니다.

SvelteKit은 라우팅 시스템을 도입하여 기존 코드베이스 라우팅 메커니즘과 충돌할 수 있습니다. SvelteKit으로 마이그레이션할 때 새로운 개념을 배우고 기존 지식을 조정해야 할 수 있습니다.

프로젝트 소개

이 튜토리얼을 따라 SvelteKit 프레임워크를 사용하여 기본 피드백 애플리케이션을 구축합니다. 피드백 애플리케이션은 CRUD(만들기, 읽기, 업데이트, 삭제) 기능을 제공하고 데이터 저장을 위해 Back4app을 사용합니다.

SvelteKit 애플리케이션 구축

Sveltekit 애플리케이션을 만들려면 터미널에서 다음 명령을 실행합니다:

npm create svelte@latest feedback-application

위의 코드를 실행하면 애플리케이션을 구성하는 과정을 안내하는 몇 가지 메시지가 표시됩니다. 프롬프트는 다음과 같이 표시됩니다:

애플리케이션을 구성한 후 애플리케이션의 디렉토리로 이동하여 필요한 종속성을 설치합니다. 이렇게 하려면 터미널에서 다음 코드를 실행합니다:

cd feedback-application
npm install

이제 피드백 애플리케이션을 성공적으로 만들고 필요한 종속 요소를 설치했습니다. 애플리케이션의 외관을 개선하기 위해 애플리케이션에 Google 글꼴을 추가합니다. 이렇게 하려면 src 디렉토리에 있는 app.html 파일에 글꼴에 대한 링크를 추가해야 합니다. 링크는 Google Fonts 웹사이트에서 찾을 수 있습니다.

애플리케이션에서 사용할 글꼴은 컴포터 및 몬세라트 글꼴입니다. app.html 파일의 헤드 태그에 다음 코드를 추가하여 애플리케이션에서 이 글꼴을 사용할 수 있습니다.

<!-- app.html -->
<link href="<https://fonts.googleapis.com/css2?family=Montserrat&display=swap>" rel="stylesheet">
<link href="<https://fonts.googleapis.com/css2?family=Comforter&display=swap>" rel="stylesheet">

다음으로 애플리케이션에 글로벌 스타일을 추가합니다. 이렇게 하려면 스타일 폴더의 global.css 파일로 이동합니다. 스타일 폴더는 src 디렉터리에서 찾을 수 있습니다.

global.css 파일에 다음 코드를 작성합니다:

/* global.css */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    inline-size: 40%;
    margin: auto;
    font-family: 'Montserrat', sans-serif;
    background-color: #f2f2f2;
}

input{
    border: none;
    border-radius: 12px;
    padding: 1rem;
    background-color: #FFFFFF;
    color: #808080;
    inline-size: 100%;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
}

button{
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 12px;
    color: #f2f2f2;
    background-color: #333333;
    font-family: 'Montserrat', sans-serif;
}

button:hover{
    background-color: #f2f2f2;
    color: #333333;
}

다음으로 애플리케이션의 레이아웃을 만듭니다. 레이아웃 파일을 사용하여 애플리케이션의 레이아웃을 정의합니다. 레이아웃 .svelte 파일은 페이지 레이아웃의 구조를 정의하는 재사용 가능한 레이아웃 컴포넌트를 만들기 위한 특수 파일입니다. src/routes 디렉토리에 +layout.svelte 파일을 생성해야 합니다.

애플리케이션의 레이아웃을 다음과 같이 정의합니다:

<!-- +layout.svelte -->
<script>
    import '../style/global.css'
</script>

<header>
    <h1>Feedback App</h1>
</header>
<slot></slot>

<style>

    h1{
        text-align: center;
        padding: 1rem 0;
        font-family: 'Comforter', cursive;
    }

</style>

위의 코드 블록은 글로벌 스타일을 애플리케이션에 적용하는 global.css 파일을 가져옵니다. 또한 헤더 요소도 정의합니다. 헤더 요소 안에는 “피드백 앱”이라는 텍스트가 있는 h1 요소가 있습니다.

슬롯 요소는 페이지 콘텐츠의 플레이스홀더를 정의합니다. 페이지를 렌더링하면 애플리케이션이 해당 콘텐츠를 슬롯에 삽입하여 레이아웃 내에 표시합니다. 코드 블록의 스타일 섹션에서 h1 요소의 스타일을 지정합니다.

이제 애플리케이션의 스타일과 레이아웃을 정의했습니다. 다음으로 애플리케이션의 홈페이지를 생성합니다. 이렇게 하려면 src/routes 디렉토리에 있는 +page.svelte 파일에 다음 코드를 작성합니다.

<!-- +page.svelte -->
<script lang="ts">
    let data = {
        feedback: '',
        rating: '',
    }

    const handleClick = (event: any) => {
        data.rating = event.target.value;
    }
</script>

<div class="page">
    <form>
        <input type="text" placeholder="Share your thought" name="feedback" bind:value={data.feedback}/>

        <div class="rating">
            <input type="button" value="1" class="button" on:click={handleClick}>
            <input type="button" value="2" class="button" on:click={handleClick}>
            <input type="button" value="3" class="button" on:click={handleClick}>
            <input type="button" value="4" class="button" on:click={handleClick}>
            <input type="button" value="5" class="button" on:click={handleClick}>
        </div>

        <button>Post</button>
    </form>
</div>

<style>
    form{
        margin-block-start: 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        align-items: center;
    }

    .button{
        border-radius: 100%;
        color: #333333;
        padding: 1rem 1.5rem;
        background-color:#ffffff;
    }

    .button:hover{
        background-color: #333333;
        color: #f2f2f2;
    }

    .rating{
        display: flex; 
        gap: 5rem;
    }
</style>

위의 코드 블록은 간단한 평가 시스템을 갖춘 피드백 양식을 생성합니다. 텍스트 필드에 생각을 입력하고 번호가 매겨진 버튼을 클릭하여 경험을 평가할 수 있습니다. 그러면 애플리케이션이 입력 내용을 데이터 개체에 저장합니다.

핸들클릭 함수는 데이터.rating 속성에 등급을 저장하고, 바인드 지시문은 데이터.feedback 속성에 피드백을 저장합니다. bind 지시어를 사용하면 입력 값과 컴포넌트의 데이터 간에 양방향 데이터 바인딩을 수행할 수 있습니다.

이제 웹 브라우저에서 애플리케이션을 볼 수 있습니다. 이렇게 하려면 터미널에서 프로젝트의 디렉토리로 이동하여 다음 명령을 실행합니다:

npm run dev

위의 명령을 실행하면 http://localhost:5173/ 링크가 제공됩니다. 웹 브라우저에서 이 링크로 이동하면 애플리케이션을 확인할 수 있습니다.

튜토리얼을 올바르게 따라했다면 애플리케이션은 다음과 같은 모습이어야 합니다:

Back4app과 애플리케이션 통합

Back4App은 애플리케이션의 백엔드 기능을 구축하고 관리할 수 있는 도구와 인프라를 제공하는 서비스형 백엔드(BaaS) 플랫폼입니다. Back4App을 사용하면 백엔드 서버 설정 및 유지 관리의 복잡성에 대한 걱정 없이 앱의 뛰어난 기능을 구축하는 데 집중할 수 있습니다. Back4app은 데이터베이스 관리, 사용자 인증, API 호스팅 등 다양한 기능을 제공합니다.

Back4app 계정 만들기

Back4app이 제공하는 훌륭한 기능을 사용하려면 먼저 Back4app 계정이 있어야 합니다. 다음의 간단한 단계를 따라 계정을 만들 수 있습니다:

1. Back4app 웹사이트를 방문하세요.
2. ‘가입하기 ‘ 버튼을 클릭합니다.
3. 가입 양식을 작성하여 제출하세요.

Back4app ChatGPT 플러그인 소개

최근 개발자의 편의를 위해 AI를 사용하는 추세에 따라 Back4app은 ChatGPT 플러그인을 도입했습니다. 이 플러그인은 개발자와 기술 전문가가 아닌 일반 사용자도 Back4app 애플리케이션을 만들고 상호 작용할 수 있도록 도와줍니다.

플러그인을 사용하면 ChatGPT와의 대화를 실제 애플리케이션으로 변환할 수 있습니다. 즉, Back4app 플랫폼을 처음 개발하거나 처음 사용하더라도 Back4app 애플리케이션을 쉽게 만들고 사용자 지정할 수 있습니다.

ChatGPT에서 플러그인을 사용하려면 ChatGPT Plus에 가입되어 있는지 확인하세요. 아직 가입하지 않은 경우 ChatGPT Plus를 구독한 후 “GPT-4 ” 버튼을 클릭하면 옵션이 있는 팝업창이 나타납니다.

플러그인 옵션을 선택한 다음 Back4app 플러그인을 선택합니다. 그러면 Back4app의 ChatGPT 플러그인을 사용할 수 있습니다.

플러그인을 사용하여 Back4app 애플리케이션 만들기

ChatGPT의 Back4app 플러그인을 사용하면 Back4app 애플리케이션을 쉽게 만들 수 있습니다. 어떤 종류의 애플리케이션을 만들고 싶은지 ChatGPT에 알려주기만 하면 나머지는 자동으로 처리됩니다.

예를 들어

애플리케이션을 만든 후 Back4app 웹사이트로 이동하여 로그인한 후 앱을 확인하여 애플리케이션이 생성되었는지 확인합니다.

Back4app 애플리케이션에 데이터 추가

Back4app의 ChatGPT 플러그인을 사용하여 애플리케이션에 데이터를 추가할 수 있습니다. 여기에서 ChatGPT에 피드백 앱에서 피드백 클래스를 생성하고 사용자 지정 피드백으로 채우도록 요청합니다.

다음은 이를 수행하는 방법의 예입니다:

플러그인은 애플리케이션에 피드백 클래스를 생성하고 추가하려는 사용자 지정 피드백의 예를 요청합니다.

사용자 지정 피드백의 예를 제공하면 플러그인이 애플리케이션에서 피드백 및 평점과 함께 피드백을 생성합니다. ChatGPT에 피드백 및 평점을 제공하여 애플리케이션에 더 많은 피드백 및 평점을 추가할 수 있습니다.

이제 플러그인이 애플리케이션에서 피드백 클래스와 사용자 지정 피드백 및 등급을 생성했는지 확인할 수 있습니다.

Back4app에 연결

다음 단계는 애플리케이션을 Back4app 애플리케이션에 연결하는 것입니다. 이렇게 하려면 Parse JavaScript SDK를 설치해야 합니다. 터미널에서 다음 코드를 실행하여 설치할 수 있습니다:

npm install parse

자바스크립트 구문 분석 SDK 설치가 완료되었습니다. 애플리케이션 ID와 자바스크립트 키 자격 증명을 사용하게 됩니다. 이 자격 증명은 Back4app 앱 대시보드의 보안 및 키 섹션에서 찾을 수 있습니다. 애플리케이션 ID와 자바스크립트 키를 애플리케이션에 안전하게 저장하세요.

parse에서 축소된 버전의 Parse를 src 디렉터리의 +page.svelte 파일로 가져와서 초기화 메서드를 호출합니다. 이 메서드는 애플리케이션 ID와 자바스크립트 KEY 자격 증명을 인수로 받습니다.

예를 들어

//+page.svelte
import Parse from 'parse/dist/parse.min.js';
Parse.initialize(APPLICATION_ID, JAVASCRIPT_KEY);

페이지.svelte 파일의 스크립트 태그 내에 위의 코드 블록을 추가해야 한다는 점에 유의하세요. Parse에서 초기화 메서드를 호출한 후 다음 단계는 Parse의 serverURL 속성을 https://parseapi.back4app.com/ 로 설정하는 것입니다.

이렇게요:

//+page.svelte
(Parse as any).serverURL = "<https://parseapi.back4app.com/>";

Back4app에서 데이터 가져오기

Back4app 애플리케이션에 이미 있는 데이터를 표시하기 전에 데이터를 가져와야 합니다. 데이터를 가져오기 위해 fetchFeedbacks 함수를 생성합니다. 이 함수에는 애플리케이션에서 피드백과 평점을 가져오는 로직이 포함됩니다.

함수를 만들기 전에 카드 컴포넌트를 만듭니다. 카드 컴포넌트는 피드백의 모양과 느낌을 결정합니다. 카드 컴포넌트를 만들려면 먼저 src 디렉토리에 components 폴더를 만듭니다. 그런 다음 components 폴더에 card.svelte 파일을 만듭니다.

card.svelte 파일에 다음 코드를 작성합니다:

<!-- card.svelte -->
<script lang="ts">
	export let feedback: string = '';
	export let rating: number = 0;
</script>

<div class="card">
	 <h5>{feedback}</h5>
	 <p>{rating} ratings</p>
</div>

<style>
	.card{
	    display: flex;
	    justify-content: space-between;
	    padding: 1rem;
	    background-color: #FFFFFF;
	    border-radius: 12px;
	    inline-size: 100%;
	    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1)
	}
</style>

이 코드는 카드 컴포넌트를 정의합니다. 스크립트 태그에서 이 코드는 피드백 및 평가 변수를 소품으로 내보냅니다. 즉, 이 컴포넌트를 가져오는 컴포넌트는 이러한 프로퍼티의 값을 정의할 수 있습니다. 이 코드는 피드백 변수를 빈 문자열로, 평점 변수를 0으로 초기화합니다.

div 태그는 카드 컴포넌트의 기본 구조를 나타내며, 스타일 태그에는 카드 컴포넌트에 적용된 CSS 스타일이 포함되어 있습니다.

그런 다음 +page.svelte의 스크립트 태그에서 카드 컴포넌트를 임포트하고 fetchFeedbacks 함수를 생성합니다.

이렇게요:

//+page.svelte
import Card from "../components/card.svelte";
import { onMount } from "svelte";

let feedbackData: any = [];

const fetchFeedbacks = async () => {
  try {
    const query = new Parse.Query("Feedback");
    const feedbacks = await query.find();
    feedbackData = feedbacks;
  } catch (error) {
    console.log(error);
  }
};

onMount(fetchFeedbacks);

이 코드는 fetchFeedbacks 함수를 정의합니다. 또한 onMount 라이프사이클 훅을 사용하여 fetchFeedbacks 함수를 호출하여 데이터베이스에서 피드백을 가져옵니다.

fetchFeedbacks 함수는 Parse.Query() 메서드를 사용하여 앱의 데이터베이스에서 “피드백” 객체를 검색합니다. 그런 다음 Parse.Query() 호출 결과에 대해 Parse SDK의 find() 메서드를 호출하여 쿼리 결과의 배열을 반환합니다. 마지막으로 결과 배열을 feedbackData 변수에 할당합니다.

이제 +page.svelte 파일의 HTML 요소가 포함된 div 태그에서 Svelte의 각 블록을 사용하여 feedbackData 배열의 데이터를 렌더링합니다.

예를 들어

<!-- +page.svelte -->
<div class="feedbacks">
	{#each feedbackData as feedback}
	    <Card feedback={feedback.get('feedbackText')} rating={feedback.get('rating')}/>
	{/each}  
</div>

div 태그 내에서 각 블록은 feedbackData 배열을 반복하고 각 요소를 변수 피드백에 할당합니다. 배열의 각 피드백에 대해 카드 컴포넌트를 렌더링합니다. 피드백의 get() 메서드를 사용하여 feedbackText 및 rating의 값을 가져옵니다. 그런 다음 카드 컴포넌트의 피드백 및 평점 소품에 값을 전달합니다.

페이지.svelte 파일의 스타일 태그에 아래 코드 블록을 추가하여 클래스 피드백으로 div 태그의 스타일을 지정합니다:

/* +page.svelte */
.feedbacks{
	display: flex;
	flex-direction: column;
	gap: 2rem;
	margin-block-start: 3rem;
	border: 2px #e2e2e2 solid;
	padding: 2rem;
	border-radius: 7px;
}

애플리케이션에서 Back4app에 데이터 추가하기

처음에는 Back4app의 ChatGPT 플러그인을 사용하여 Back4app 애플리케이션에 데이터를 추가했지만, 애플리케이션 사용자는 그렇게 할 수 없습니다. 사용자가 애플리케이션에서 데이터를 추가할 수 있도록 하려면 Back4app 앱의 데이터베이스에 새로운 피드백 및 평점을 추가하는 함수를 만들어야 합니다.

이렇게요:

// +page.svelte
const handleSubmit = () => {
  try {
    const Feedback = new Parse.Object("Feedback");
    Feedback.set("feedbackText", data.feedback);
    Feedback.set("rating", +data.rating);
    Feedback.save().then(() => {
      console.log("New Feedback added successfully");
    });
  } catch (error) {
    console.log(error);
  }

  fetchFeedbacks();
};

위의 코드 블록을 +page.svelte 파일의 스크립트 태그에 추가합니다. handleSubmit() 함수는 새로운 Parse “피드백” 객체를 생성하고 피드백Text 및 rating 속성을 data.feedback 및 data.rating의 값으로 설정합니다. 그런 다음 save() 메서드를 사용하여 객체를 Parse 서버에 저장합니다. 마지막으로 이 함수는 fetchFeedbacks() 함수를 호출합니다.

이제 이벤트 바인딩을 사용하여 +page.svelte 파일의 양식에 handleSubmit 함수를 바인딩합니다. 사용자가 양식을 제출할 때마다 함수가 실행되도록 함수를 on:submit 이벤트에 바인딩합니다.

<form on:submit={handleSubmit}>
	<input 
	type="text" 
	placeholder="Share your thought" 
	name="feedback" 
	bind:value={data.feedback}
	/>
	
	<div class="rating">
	    <input type="button" value="1" class="button" on:click={handleClick}>
	    <input type="button" value="2" class="button" on:click={handleClick}>
	    <input type="button" value="3" class="button" on:click={handleClick}>
	    <input type="button" value="4" class="button" on:click={handleClick}>
	    <input type="button" value="5" class="button" on:click={handleClick}>
	</div>
	
	<button>Post</button>
 </form>

Back4app에서 데이터 삭제

데이터베이스에서 해당 레코드를 제거하기 위해 destroy 메서드를 사용하여 Back4app에서 데이터를 삭제할 수 있습니다. 주어진 ID를 기준으로 앱의 데이터베이스에서 피드백을 삭제하는 로직이 포함된 deleteFeedback 함수를 생성합니다.

deleteFeedback 함수를 만들기 전에 on:click 이벤트를 사용하여 deleteFeedback 프로퍼티와 삭제 피드백 프로퍼티에 바인딩하는 버튼 요소를 추가하여 카드 컴포넌트를 업데이트합니다. card.svelte 파일의 코드를 아래 코드 블록으로 바꿉니다.

<!-- card.svelte -->
<script lang="ts">
	export let feedback: string = '';
	export let rating: number = 0;
	export let deleteFeedback: any = '';
</script>

<div class="card">
	<div style="display: flex; flex-direction: column; gap: 1rem; ">
	<h5>{feedback}</h5>
	<button on:click={deleteFeedback}>Delete</button>
	</div>
	<p>{rating} ratings</p>
</div>

<style>
	.card{
	  display: flex;
	  justify-content: space-between;
	  padding: 1rem;
	  background-color: #FFFFFF;
	  border-radius: 12px;
	  inline-size: 100%;
	  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1)
	}
</style>

페이지.svelte 파일에 deleteFeedback 함수를 만듭니다:

// +page.svelte
const deleteFeedback = async (id: string) => {
  try {
    const Feedback = Parse.Object.extend("Feedback");
    const feedback = new Feedback();
    feedback.id = id;
    await feedback.destroy();
    const newData = feedbackData.filter((item: any) => item.id !== id);
    feedbackData = newData;
  } catch (error) {
    console.log(error);
  }
};

deleteFeedback 함수는 Parse.Object.extend 메서드를 사용하여 새 “피드백” 객체를 만듭니다. 그런 다음 객체의 id 속성을 함수에 전달된 id 매개변수로 설정합니다. 그런 다음 “피드백” 객체의 비동기 삭제 메서드를 호출하여 Back4app에서 지정된 ID를 가진 피드백 항목을 삭제합니다.

그런 다음 이 함수는 feedbackData.filter 메서드를 사용하여 피드백 데이터 배열을 필터링합니다. 이 함수는 지정된 ID를 가진 피드백 항목을 필터링하여 삭제된 피드백 항목이 없는 새 배열을 만듭니다. 그런 다음 이 함수는 피드백 데이터에 새 배열을 할당합니다.

이제 삭제 피드백 함수를 카드 컴포넌트의 삭제 피드백 프로퍼티에 전달합니다. 이렇게 하면 사용자가 카드 컴포넌트의 버튼 요소를 클릭할 때마다 deleteFeedback 함수가 실행됩니다.

이렇게요:

<!-- +page.svelte -->
<div class="feedbacks">
	{#each feedbackData as feedback}
		<Card 
		feedback={feedback.get('feedbackText')} 
		rating={feedback.get('rating')} 
		deleteFeedback={() => deleteFeedback(feedback.id)}
		/>
	{/each}  
</div>

애플리케이션 테스트

애플리케이션 빌드를 마쳤으니 다음 단계는 애플리케이션을 테스트하는 것입니다. 애플리케이션을 테스트하려면 터미널의 애플리케이션 디렉토리로 이동하여 개발 서버를 실행합니다.

개발 서버를 실행한 후 브라우저를 열고 다음 링크( http://localhost:5173/)로 이동합니다. 애플리케이션은 아래 이미지와 같이 표시되어야 합니다.

피드백을 추가하려면 입력란에 “앱이 정말 마음에 듭니다”라고 쓴 다음 “4”라는 텍스트가 있는 버튼을 클릭하여 평가합니다. 마지막으로 ‘게시’를 클릭하여 피드백을 제출합니다.

새 피드백을 추가했음을 확인하려면 이전 카드 아래에 “앱이 정말 마음에 듭니다”라는 텍스트와 평점 4가 표시된 새 카드가 나타납니다. Back4app에서 애플리케이션의 대시보드로 이동하여 확인할 수도 있습니다.

피드백을 삭제하려면 삭제 버튼을 클릭하기만 하면 됩니다. 이를 확인하려면 “앱이 훌륭했습니다” 피드백을 삭제합니다.

결론

SvelteKit은 Svelte를 사용하여 강력하고 성능이 우수한 웹 애플리케이션을 개발하기 위한 프레임워크입니다. 메타 프레임워크이므로 모든 유형의 웹 애플리케이션을 구축하는 데 사용할 수 있는 일련의 도구와 추상화를 제공합니다.

SvelteKit과 Back4app을 통합하면 개발자는 프론트엔드 애플리케이션 개발에 집중하고 Back4app은 백엔드를 처리할 수 있습니다. Back4app은 백엔드 개발의 복잡성을 줄여 개발자가 풀스택 웹 애플리케이션을 더 쉽게 만들 수 있게 해줍니다.

자주 묻는 질문