(기술 용어는 가능한 원어를 사용하였습니다.)
a. 기본
Svelte 튜토리얼에 오신 것을 환영합니다. 이것은 빠르고 작은 웹 애플리케이션을 쉽게 구축하기 위해 알아야 할 모든 것을 가르쳐 줄 것입니다.
API 문서와 예시뿐만 아니라, 바로 로컬에서 구동하기 위한 60초 빠른 시작 가이드도 참고할 수 있습니다.
Svelte란?
Svelte는 빠른 웹앱을 구축하기 위한 도구입니다.
이것은 매끄러운 대화형 유저 인터페이스를 쉽게 구축하게 한다는 목표를 공유하는 점에서 React나 Vue 같은 JavaScript 프레임워크와 유사합니다.
그러나 결정적인 차이점이 있습니다: Svelte는 실행 시점에 앱 코드를 해석하는 대신, 당신의 앱을 빌드 시점에 이상적인 JavaScript로 변환합니다. 이는 프레임워크의 추상화에 성능을 손해보지 않으며 앱이 처음 로드될 때 패널티가 없음을 의미합니다.
앱 전체를 Svelte로 만들거나, 기존 코드베이스에 점진적으로 추가할 수도 있습니다. 또한 컴포넌트를 기존 프레임워크에 대한 종속성 오버헤드 없이 어디서나 작동하는 독립형 패키지로 제공할 수 있습니다.
이 튜토리얼을 사용하는 방법
Svelte를 이해하려면 HTML, CSS, JavaScript에 대한 기본적인 지식이 필요합니다.
튜토리얼을 진행하면서, 새로운 기능을 설명하기 위한 작은 연습이 제시될 것입니다. 이후 챕터는 이전 챕터의 지식이 필요하므로 처음부터 끝까지 진행하기를 권장합니다. 필요하다면 위의 드롭다운 메뉴에서 탐색할 수 있습니다. ('Introduction/Basics'를 클릭하세요.)
각 챕터에는 막혔을 때 도움을 줄 수 있는 'Show me' 버튼이 있습니다. 너무 의존하지는 마세요. 제시된 코드 블록을 어디에 넣을지 고민하고 직접 에디터에 채워넣을 때 더 빨리 학습할 수 있습니다.
컴포넌트란?
Svelte에서는 앱이 하나 또는 여러 컴포넌트로 구성됩니다. 컴포넌트는 HTML, CSS, JavaScript이 함께 캡슐화된 코드 블럭이 쓰여진 .svelte 파일입니다. 에디터의 'hello world' 예시가 간단한 컴포넌트입니다.
b. 데이터 추가
정적인 markup을 렌더하는 컴포넌트는 그리 흥미롭지 않습니다. 데이터를 조금 추가해봅시다.
먼저, 컴포넌트에 script 태그를 추가하고 name 변수를 선언하세요:
<script>
let name = 'world';
</script>
<h1>Hello world!</h1>그러면 markup에서 name을 참조할 수 있습니다:
<h1>Hello {name}!</h1>중괄호 안에 어떤 JavaScript 코드나 넣을 수 있습니다. 더 밝은 인사를 위해 name을 name.toUpperCase()로 바꿔보세요.
c. 동적 attributes
텍스트를 제어하기 위해 중괄호를 사용한 것과 마찬가지로 element attributes를 제어할 때에도 사용할 수 있습니다.
이 이미지는 src 속성이 없습니다 - 추가해주죠:
<img src={src}>한결 낫습니다. 그러나 Svelte는 경고를 표시합니다:
A11y: <img> element should have an alt attribute
웹앱을 구축할 때 시각이나 운동이 불편한 사람, 하드웨어나 인터넷 연결 상황이 좋지 않은 사람을 포함하여 가능한 가장 광범위한 사용자 기반에 접근할 수 있도록 하는 것이 중요합니다. 접근성(줄여서 a11y)을 고려하는 것이 언제나 쉽지만은 않지만, Svelte는 올바르지 않은 markup을 경고함으로써 도울 것입니다.
이 경우에는 스크린리더를 사용하는 사람들 또는 인터넷 연결이 느려 이미지를 다운로드 할 수 없는 사람들을 위해 이미지를 설명하는 alt 속성이 부족합니다. 추가해줍시다:
<img src={src} alt="A man dances.">속성 안에서도 중괄호를 사용할 수 있습니다. 이것을 "{name} dances"로 바꾸어 보세요 - name 변수를 <script> 블럭 내부에 선언하는 것을 잊지 마세요.
단축 속성
src={src}와 같이 이름과 value가 같은 속성은 흔합니다. Svelte는 이러한 경우를 위해 편리한 단축어를 제공합니다:
<img {src} alt="A man dances.">d. 스타일링
HTML과 마찬가지로 컴포넌트에 <style> 태그를 추가할 수 있습니다. <p> element에 스타일을 추가해봅시다:
<p>This is a paragraph.</p>
<style>
p {
color: purple;
font-family: 'Comic Sans MS', cursive;
font-size: 2em;
}
</style>중요한 것은 이 규칙들이 컴포넌트를 scope로 한다는 것입니다. 다음 단계에서 볼 수 있듯이 실수로 앱의 다른 <p> element 스타일을 변경하지 않을 것입니다.
e. 중첩 컴포넌트
앱 전체를 한 컴포넌트에 넣는 것은 비현실적입니다. 대신 다른 파일에서 컴포넌트를 import해 마치 element를 포함하듯이 사용할 수 있습니다.
Nested.svelte를 import하는 <script> 태그를 추가해주세요:
<script>
import Nested from './Nested.svelte';
</script>...그리고 markup에 추가하세요:
<p>This is a paragraph.</p>
<Nested/>Nested.svelte에 <p> element가 있어도 App.svelte의 스타일이 적용되지 않는 점에 유의하세요.
또한 컴포넌트 이름 Nested의 첫 글자가 대문자가 된다는 점에 주의하세요. 사용자 지정 컴포넌트와 일반 HTML 태그를 구분하기 위해 이러한 문법이 도입되었습니다.
f. HTML 태그
일반적으로 <나 >와 같은 글자가 평문으로 삽입되었을 때는 특별한 의미가 없습니다.
그러나 때로는 HTML을 컴포넌트에 직접 렌더해야합니다. 예를 들어, 지금 당신이 읽고 있는 이 글은 HTML의 blob으로써 이 페이지에 포함되어 있는 markdown 파일로 존재합니다.
Svelte에서는 특수 {@html ...} 태그로 이를 수행할 수 있습니다:
<p>{@html string}</p>Svelte는
{@html ...}내부의 표현식이 DOM에 삽입되기 전까지 어떠한 sanitization도 수행하지 않습니다. 즉, 이 기능을 사용하는 경우 신뢰할 수 없는 소스에서 가져온 HTML을 수동으로 escape하는 것이 중요합니다. 그렇지 않으면 사용자가 XSS 공격에 노출될 위험이 있습니다.
g. 앱 만들기
이 튜토리얼은 사용자가 컴포넌트 작성 과정에 익숙해지는 것을 돕기 위해 설계되었습니다. 그러나 언젠가는 자신의 텍스트 편집기에서 편안하게 컴포넌트 작성을 시작하고 싶을 것입니다.
먼저, Svelte를 빌드툴과 통합해야 합니다. Vite, Rollup, webpack에 대해 공식적으로 유지보수되는 플러그인이 있습니다.
...그리고 다양한 커뮤니티 지원 플러그인도 있죠.
만약 웹 개발에 익숙하지 않고 이런 도구를 사용한 적이 없더라도 걱정하지 마세요. 과정을 설명하는 간단한 단계별 가이드인 새로운 개발자를 위한 Svelte를 준비했습니다.
또한 텍스트 에이터를 구성하고 싶을 것입니다. 공식 VS Code extension 뿐만 아니라 많은 인기 에디터를 위한 플러그인이 있습니다. 만약 편집기에 Svelte 플러그인이 없는 경우 이 가이드를 따라 .svelte 파일에 .html 파일과 같은 방식으로 문법 강조가 동작하도록 설정할 수 있습니다.
프로젝트가 설정이 완료되면 Svelte 컴포넌트를 쉽게 이용할 수 있습니다. 컴파일러가 각 컴포넌트를 일반 JavaScript 클래스로 변환합니다 — 그저 import하고 new 키워드로 인스턴스화하면 됩니다:
import App from './App.svelte';
const app = new App({
target: document.body,
props: {
// prop에 대해 나중에 배울 것입니다.
answer: 42
}
});필요한 경우 component API를 사용해 app과 상호작용할 수 있습니다.
