Front-End

18_Svelte_Debugging

Debugging The @debug tag 가끔 데이터 흐름을 앱을 통해 검사할 필요가 있습니다. 한 가지 방법은 마크업 내부에 console.log(...)을 사용하는 것입니다. 실행을 일시 중지하려면 검사할 쉼표로 구분된 값의 목록과 함께 {@debug} 태그를 사용할 수 있습니다. {@debug user} Hello {user.firstname}! 이제 개발 도구를 열고 요소와 상호 작용하기 시작하면 사용자 값이 변경됨에 따라 디버거가 트리거 됩니다. 마무리 이제 Svelte의 튜토리얼을 마쳤습니다. API Reference, Examples, Blog을 통해 계속 학습할 수 있습니다. Twitter 사용자인 경우 @sveltejs를 통해 업데이트를 받을 수 있습니다. 로컬 개발 환경에서 설정하려..

17_Svelte_Module_Context

Module Context Sharing Code 지금까지 살펴본 모든 예에서, 이제 상태 관리 없이 컴포넌트간 간에 '대화(talk)'가 가능합니다. function stopOthers() { if (current && current !== audio) current.pause(); current = audio; } Exports context="module" 스크립트 블록에서 내보낸 모든 항목은 모듈 자체에서 내보내기가 됩니다. AudioPlayer.svelte에서 stopAll 함수를 내보내면 다음과 같습니다. 그러면 App.svelte에서 다음을 가져올 수 있습니다. 그리고 이벤트 핸들러를 사용합니다. stop all audio 컴포넌트가 default export이므로 defaul..

16_Svelte_Special_Elements

Special Elements Svelte는 다양한 내장 요소(element)를 제공합니다. 는 컴포넌트가 재귀적으로 자신을 포함할 수 있습니다. 폴더 트리 뷰와 같은 폴더에 다른 폴더가 포함될 수 있는 경우에 유용합니다. Folder.svelte에서 다음을 하기를 원합니다. {#if file.files} {:else} {/if} 하지만 불가능합니다. 왜냐하면 모듈은 스스로 가져올 수 없기 때문입니다. 대신 를 사용합니다. {#if file.files} {:else} {/if} 컴포넌트는 svelte:component와 함께 카테고리를 변경할 수 있습니다. {#if selected.color === 'red'} {:else if selected.color === 'green'..

15_Svelte_Context_API

Context API Context API 컨텍스트 API는 Props로 데이터와 기능을 전달하거나 이벤트를 많이 디스패치하지 않고도 컴포넌트가 서로 '대화(talk)'할 수 있는 메커니즘을 제공합니다. 아주 유용한 고급 기능입니다. Mapbox GL 지도를 사용하여 이 예제 앱을 사용합니다. 컴포넌트를 사용하여 마커를 표시하려 하지만 기본 Mapbox 인스턴스에 대한 참조를 각 컴포넌트의 props로 전달할 필요는 없습니다. 컨텍스트 API에는 setCountext와 getContext로 나누어져 있습니다. 컴포넌트가 setContext(key, context)를 호출하면, 자식 컴포넌트는 const context = getContext(key)로 컨택스트를 검색할 수 있습니다. 먼저 컨..

14_Svelte_Component_Composition

Component Composition Slots(슬롯) 요소(element)가 자식(children)을 가질수 있는 것처럼 컴포넌트도 가질 수 있습니다. 하지만 컴포넌트가 자식을 받아들이기 전에 어디에 두어야 하는지 알아야합니다. 이 작업은 요소로 수행합니다. 이를 실습 예제에서 Box.svelte에 넣습니다. 이제 다음 항목을 안에 자식으로 넣을 수 있습니다. Hello! This is a box. It can contain anything. Slot Fallbacks(슬롯 대비책) 컴포넌트는 내용을 요소 내부에 넣어 비어 있는 슬롯에 대해 fallback을 지정할 수 있습니다. no content was provided 이제 하위 항목 없이 다음과 같은 인스턴스를 만들 수 있습니다. Hello! T..

13_Svelte_Classes

Classes 클래스 지침 다른 속성과 마찬가지로 다음과 같이 JavaScript 속성으로 클래스를 지정할 수 있습니다. foo 이는 UI 개발에서 매우 일반적인 패턴으로, Svelte에는 이를 단순화하기 위한 특별 지침이 포함되어 있습니다. foo selected 클래스는 표현식의 값이 true일 때마다 요소에 추가되고, false일 때는 제거됩니다. Shorthand 클래스 지침 종종 클래스의 이름은 종속된 값의 이름과 같습니다. 이러한 경우, 다음과 같은 간단한 양식을 사용할 수 있습니다.

12_Svelte_Actions

Actions 사용 지침 Action은 기본적으로 요소 레벨의 라이프사이클 함수입니다. 다음과 같은 경우 유용합니다. 써드파티 라이브러리와의 연계 이미지 lazy 로드 tooltips 사용자 정의 이벤트 핸들러 추가 이 예제 앱에서는 주황색 상자를 'pannable'로 만들고 싶습니다. panstart, panmove, panend 이벤트에 대한 이벤트 핸들러가 있찌만 기본 DOM 이벤트는 아닙니다. 그래서 직접 디스패치 해야 합니다. 먼저, pannable 함수를 가져옵니다. import { pannable } from "./pannable.js"; 다음 요소와 함께 사용합니다. pannable.js 파일을 엽니다. 액션 함수는 전환 함수처럼 노드와 일부 선택적 매개 변수를 수신하고, 액..

11_Svelte_Animations

Animations 이전 Transitions의 전환 지연 장에서 항목을 전환하면 새 위치로 부드럽게 이동합니다. 하지만 전환되지 않은 항목은 어색하게 움직입니다. 이를 위해 애니메이션 지침을 사용합니다. 먼저 "시작, 마지막, 반전, 재생'의 Flip 함수를 svelte/animate에서 가져옵니다. import { flip } from "svelte/animate"; 그 다움 요소에 추가합니다. 이 경우에는 움직임이 약간 느리므로 duration 파라미터를 추가하여 조절할 수 있습니다. duration은 또한 d => 밀리초 함수일 수 있습니다. 여기서 d는 요소가 이동해야하는 픽셀 수 입니다. 모든 전환 및 애니메이션은 JavaScript가 아닌 CSS로 적용되므로 기본 스레드를 차단(또는 가로막지..

10_Svelte_Transitions

Transitions 전환(Transition) 지침 요소를 DOM으로 우아하게 전환하여 사용자 인터페이스를 보다 매력적으로 만들 수 있습니다. Svelte는 transition 지침을 통해 이 작업을 매우 쉽게 수행할 수 있습니다. 먼저, svelte/transition에서 fade 함수를 가져옵니다. 그런 다음 p 요소에 추가합니다. Fades in and out 파라미터 추가 전환(Transition) 함수는 매개변수를 허용할 수 있습니다. fade 전환을 fly로 대체합니다. 다음 옵션과 함께 에 적용합니다. Flies in and out 전환이 진행 중일때 확인란을 전환하면 처음이나 끝이 아니라 현재 지점에서 전환됩니다. In and Out 전환 지시어 대신 요소는 in 또는 out 지시어를 가..

09_Svelte_Motion

Motion Tweened 값을 설정하고 DOM 업데이트를 자동으로 보는 것이 좋습니다. Svelte에는 애니메이션을 사용하여 변경 사항을 전달하는 슬릭 사용자 인터페이스를 구축하는 데 도움이 되는 도구가 포함되어 있습니다. progress 스토어를 tweened 값으로 변경하는 것부터 시작하겠습니다. 버튼을 클릭하면 진행 표시줄이 새 값으로 애니메이션됩니다. 그래도 약간 로봇같고 만족스럽지 않아서 용이한 함수를 추가합니다. svelte/easing 모듈에는 페너 완화 방정식이 포함되어 있으며, p와 t 모두 0과 1 사이의 값인 고유한 p => t 함수를 제공할 수 있습니다. tweened에서 이용 가능한 옵션의 모든 설정은 다음과 같습니다. delay - 시작 시간(밀리초) 전 duration - 시..