Svelte 튜토리얼 시작하기

Svelte 공식 사이트의 튜토리얼은 커리큘럼이 잘 짜여있고 직접 타이핑하며 결과를 바로 확인할 수 있습니다.

 

공식 사이트 튜토리얼의 모습은 다음과 같습니다.

공식 사이트 튜토리얼

하지만, 현재 리뉴얼 중인 Svelte 튜토리얼 주소가 있는데 디자인이 바뀌었고 기존 내용이 더 세분화되었으며 SvelteKit 내용이 추가되고 있습니다. 그래서 이 튜토리얼 사이트로 Svelte, 그리고 SvelteKit을 정리해보려고 합니다.

 

리뉴얼 중인 튜토리얼의 모습은 다음과 같습니다.

리뉴얼 중인 튜토리얼

튜토리얼 활용 방법

---

튜토리얼을 활용하는 방법은 간단합니다. 오른쪽 상단 에디터에 코드를 작성하면 오른쪽 하단에 구현된 모습이 나타나는것을 이용해 왼쪽의 지문을 읽고 지문에서 알려준 방법으로 에디터에 써서 의도한 대로 잘 나타내면 됩니다.

 

에디터에 쓴 코드가 정답과 완벽하게 일치하면 화면 가운데 주황색의 solve 버튼이 회색으로 바뀌고 클릭할 수 없게 됩니다. 하지만 띄어쓰기, 철자까지 완벽하게 맞아야 회색으로 바뀌기 때문에 어느정도 의도한 대로 화면에 구현 사항이 나타났거나 지문을 읽어도 잘 모르겠으면 solve를 누르고 코드를 확인하면 됩니다. 다만, solve를 누르면 우리가 구현한 코드는 없어지기 때문에 구현한 코드를 잘 기억하거나 따로 메모해서 비교해야 합니다.

 

해당 문법에 궁금한 것이 있다면 주어진 코드를 활용해서 이것저것 구현해보는 것이 좋아보입니다. 코드를 에디터에 작성하면 바로 화면에 나타나기 때문에 직접 로컬에서 환경설정을 하고 코드를 작성해 실행하는 것보다 쉽고 빠르게 궁금점을 해결할 수 있습니다.

 

튜토리얼은 네 파트로 구성되어 있습니다.

 

• Part1: Welcome to Svelte
• Part2: Introduction to SvelteKit
• Part3: Advanced Svelte
• Part4: Advanced SvelteKit

아직 SvelteKit에 대한 튜토리얼인 Part2와 Part4는 완성되지 않아 Svelte에 대한 부분인 Part1과 Part3을 먼저 정리하려고 합니다.

Part1, Part3의 목차는 다음과 같습니다.

목차

Part1은 Svelte의 기본 사용법을 소개하고 있고, Part3은 Svelte의 애니메이션을 소개하고 있습니다.