Skip to main content

스벨트 튜토리얼에 오신 것을 환영합니다! 이 튜토리얼에서는 성능이 좋으면서 작고 가벼운 여러 규모의 웹 애플리케이션을 쉽게 구축하는 데 필요한 모든 것을 알려드립니다.

물론 API 문서예시를 참조해도 되고, 로컬에서 바로 시작해보고 싶은 경우 npm init svelte로 프로젝트를 생성할 수도 있습니다.

스벨트가 무엇인가요?

스벨트는 웹 애플리케이션을 구축하기 위한 도구입니다. 다른 사용자 인터페이스 프레임워크와 마찬가지로 마크업, 스타일 및 동작을 결합한 구성 요소로 앱을 선언적으로 빌드할 수 있습니다.

이러한 컴포넌트는 작고 효율적인 자바스크립트 모듈로 컴파일 되어 기존 UI 프레임워크와 관련된 오버헤드를 제거합니다.

이 튜토리얼에서 다룰 스벨트킷과 같은 애플리케이션 프레임워크를 사용하여 전체 앱을 스벨트로 빌드하거나 기존 코드베이스에 점진적으로 추가할 수 있습니다. 또한 컴포넌트를 어디서나 작동하는 독립형 패키지로 제공할 수도 있습니다.

튜토리얼을 어떻게 사용하나요?

스벨트를 이해하려면 HTML, CSS, 자바스크립트에 대한 기본적인 지식이 있어야 합니다.

이 튜토리얼은 크게 네 부분으로 나뉩니다:

각 섹션에는 기능을 설명하기 위해 만들어진 연습 문제가 있습니다. 각 연습 문제는 이전의 연습 문제에서 배운 내용을 바탕으로 진행되므로 처음부터 끝까지 순서대로 학습하는 것을 추천합니다. 필요하다면 화면 위쪽의 메뉴를 통해 이동할 수 있습니다.

만약 막히면, 에디터 왼쪽에 있는에디터 오른쪽 위에 있는 solve 버튼을 눌러볼 수 있습니다. (화면 아래쪽의 토글을 사용하여 튜토리얼 보기와 에디터 보기를 전환할 수 있습니다. 이 섹션과 같이 연습 문제가 포함되어 있지 않은 섹션에서는 solve 버튼이 비활성화됩니다.) 하지만 너무 의존하지는 마세요. 제안된 각 코드 블록을 어디에 넣어야 하는지 파악하고 에디터에 직접 입력하는 것이 더 빠르게 학습할 수 있습니다.

Next: 컴포넌트 처음 알아보기

1
2
<h1>Welcome!</h1>
 
initialising