https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

Svelte는 프론트 엔드 웹 앱 개발을 위한 떠오르는 프론트 엔드 프레임워크입니다.

사용이 간편하고 결과를 빠르게 생성할 수 있습니다.

이 기사에서는 Svelte로 첫 번째 앱을 만드는 방법을 살펴보겠습니다.

프로젝트 생성

첫 번째 앱을 작성하기 위해 https://svelte.dev/blog/the-easiest-way-to-get-started 에서 thw svelte-app.zip 를 다운로드하여 Svelte 프로젝트를 만들 수 있습니다.

그런 다음 압축을 풀고 실행npm install하여 패키지를 설치합니다.

또는 다음을 실행할 수 있습니다.

npx degit sveltejs/template my-svelte-project  
cd my-svelte-project  
npm install  
npm run dev

Svelte 프로젝트를 생성합니다. my-svelte-project를 우리가 선택한 이름으로 대체할 수 있습니다.

그런 다음 http://localhost:5000/ 으로 이동합니다.
index.js 에서 다음이 있어야 합니다.

import App from "./App.svelte";const app = new App({  
  target: document.body  
});export default app;

우리 앱의 진입점으로.

앱의 body 태그에 앱 콘텐츠가 표시됩니다.

첫 번째 앱 작성

이제 앱이 실행되었으므로 코드 작성을 시작할 수 있습니다. 예를 들어,

다음을 작성할 수 있습니다.
App.svelte :

<script>  
  let name = "Jane";  
</script><main>  
  Hello {name}  
</main>

첫 번째 앱을 만듭니다. name 변수가 있고 'Jane' 로 설정되어 있으며 템플릿에서 참조했습니다.

따라서 화면에 Hello Jane가 표시되어야 합니다.
script 태그의 코드는 main 마크업에서 참조됩니다.
style 태그에 스타일을 추가할 수 있습니다. 예를 들어 다음과 같이 작성할 수 있습니다.
App.svelte :

<script>  
  let name = "Jane";  
</script><style>  
  p {  
    font-weight: bold;  
  }  
</style><main>  
  <p>Hello {name}</p>  
</main>

그런 다음 텍스트를 굵게 만듭니다.

중괄호 안에서 JavaScript를 호출할 수도 있습니다.

예를 들어 다음과 같이 작성할 수 있습니다.
App.svelte :

<script>  
  let name = "Jane";  
</script><main>  
  <p>Hello {name.toUpperCase()}</p>  
</main>

그런 다음 화면에 Hello JANE가 표시됩니다.

동적 속성

앱에 동적 HTML 속성 값을 추가할 수 있습니다.

예를 들어 URL이 변수 값으로 설정된 이미지를 추가하기 위해 다음을 작성할 수 있습니다.
App.svelte :

<script>  
  let src =  
    "https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF\_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=755&q=80";  
</script><main>  
  <img src={src} alt='' >  
</main>

위의 코드에서 이미지의 URL을 변수src 값으로 설정했습니다.

그런 다음 src를 src 값으로 전달합니다.

속기

src={src} 와 같은 것이 있으면 {src} 로 축소할 수 있습니다.

위의 예를 다음과 같이 다시 작성할 수 있습니다.

<script>  
  let src =  
    "https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF\_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=755&q=80";  
</script><main>  
  <img {src} alt='' >  
</main>

구성 요소 추가

앱에 구성 요소를 추가하여 앱의 코드를 더 작은 조각으로 나눌 수 있습니다.

이를 위해 다음과 같이 구성 요소를 가져온 다음 마크업에서 참조합니다.
Button.svelte :

<script>  
</script><button>  
  Button  
</button>

App.svelte ;

<script>  
  import Button from "./Button.svelte";  
</script><main>  
  <Button />  
</main>

그런 다음 Button.svelte 구성 요소를 통해 화면에 버튼을 얻습니다.

원시 HTML 표시

다음 코드를 작성하여 구성 요소에 원시 HTML을 표시할 수 있습니다.
App.svelte :

<script>  
  let string = "<b>hello</b>";  
</script>

<main>  
  <p>{@html string}</p>  
</main>

@html 태그는 콘텐츠를 원시 HTML로 표시하려는 것을 나타냅니다. 따라서 화면에 굵게hello가 표시됩니다.

이벤트 처리

앱을 유용하게 만들려면 사용자 이벤트를 처리할 수 있어야 합니다.

예를 들어, on:click 속성을 사용하여 다음과 같이 버튼의 클릭 이벤트를 처리할 수 있습니다.
App.svelte :

<script>  
  let count = 0;  
  const handleClick = () => {  
    count += 1;  
  };  
</script>

<main>  
  <button on:click={handleClick}>  
    Increment  
  </button>  
  <p>{count}</p>  
</main>

위의 코드에서 on:click 속성을 handleClick 태그에 있는 script 함수로 설정했습니다.

그런 다음 버튼을 클릭하면 count가 증가합니다. 그러면 count의 최신 값이 표시됩니다.

DOM은 script의 값이 업데이트되어 자동으로 업데이트되므로 걱정할 필요가 없습니다.

우리 코드의 다른 변수에서 파생된 변수를 추가할 수도 있습니다.

예를 들어 다음과 같이 값이 두 배count인 새 변수를 추가할 수 있습니다.

<script>  
  let count = 0;  
  $: doubleCount = count * 2; 
  const handleClick = () => {  
    count += 1;  
  };  
</script>

<main>  
  <button on:click={handleClick}>  
    Increment  
  </button>  
  <p>{count} {doubleCount}</p>  
</main>

위의 코드는 다음과 같습니다.

$: doubleCount = count * 2;

count 에서 계산된 변수입니다. 참조 값이 변경될 때마다 코드를 반환하도록 Svelte에 지시합니다.

결론

Svelte를 시작하는 것은 간단합니다. React, Angular 및 Vue와 같은 다른 주요 프레임워크와 동일한 구성 요소 기반 아키텍처를 사용합니다.

각 구성 요소에는 논리 부분과 마크업 부분이 있습니다. 이벤트는 요소에 이벤트 핸들러를 설정하여 처리할 수 있습니다.
$ 로 레이블을 추가하여 다른 변수에서 파생된 변수를 가질 수 있습니다.