스벨트18 [SVELTE] Special tags- The @debug tag, HTML tags special tag 1. the @debug tag {@debug user}Hello {user.firstname}! 2023. 3. 17. [SVELTE] Module context- Sharing code, Exports Module context 1. Sharing code {title} {composer} / performed by {performer} let current는 현재 재생되는 오디오를 저장하고 있으며, stopOthers 함수로 현재 실행되고 있는 오디오가 현재 인스턴스에서 실행되는 오디오가 아니라면 일시정지시켜준다. 2. exports stop all audio {title} {composer} / performed by {performer} const elements에는 이제까지 등록된 오디오들이 저장된다. stopAll 함수는 내에서 export 되었기 때문에, 부모 컴포넌트에서 stopAll를 import하여 사용할 수 있다. 2023. 3. 17. [SVELTE] Special elements - svelte:self, component, element, window, window bindings, document, body, head, options, fragment Special elements 1. svelte:self 는 컴포넌트가 재귀적으로 자신을 포함할 수 있게 하는 요소이다. 폴더 트리구조와 같은 형태를 표현해야 할 때 유용하다. {name}{name}{#if expanded} {#each files as file} {#if file.files} 이지만 자기 자신을 import 하는 것은 불가능 하기 때문에 .. --> {:else} {/if} {/each} {/if} 2. svelte:c.. 2023. 3. 17. [SVELTE]Context API- setContext and getContext Context API 1. setContext and getContext Map 컴포넌트는 MapMarker 컴포넌트를 자식 요소로 가진다.Map 컴포넌트는 lat, lon, zoom을 props로 전달받는다.MapMarker 컴포넌트는 lat, lon, label을 props로 전달받는다 {#if map} {/if}MapMarker 컴포넌트를 자식 요소로 가지기 위해 slot을 사용한다.lat, lon, zoom을 props로 가진다.마운트 되면 mapbox를 가져온다.import { setContext } from 'svelte'로 setContext를 가져오고 import { key } from './mapbox.js'로 .. 2023. 3. 17. 이전 1 2 3 4 5 다음
