Dog foot print

{@html} {post.title} {@html post.content} 일반 텍스트를 표현할 때 문자 은 &gt 혹은 &lt로 변경됩니다. 그러나 @html에서는 이를 그대로 렌더링 합니다. {@html ""} hello svelte {@html ""} //it's not work위와 같이 {@html value}를 통해 div를 렌더링 하는 방법은 작동하지 않습니다. 또한 스벨트는 HTML을 사전 점검하여, 위험한 스크립트나, 잘못된 태그를 가려 보여주지 않습니다. 이를 방지하기 위해 source를 검사하거나, 믿을 만한 사람에게서 이 데이터를 받아야 합니다. #svelte

{#key} {#key expression}…{/key}key블럭은 특정 값이 변경 될때마다, 삭제와 생성을 반복합니다. {#key value} {value} {/key} key블럭은 값이 변경되었을 때 transition을 새롭게 시작하는데 유용합니다. key값이 변경된다면, 새롭게 스벨트 컴포넌트를 인스턴스화하고 생성자함수를 실행합니다. #svelte

{#each…} 스벨트는 반복 가능한 데이터 구조에 한하여, 컴포넌트에 데이터를 전달하여 렌더 할 수 있습니다. {#each expression as name}...{/each} {#each expression as name, index}...{/each} {#each expression as name (key)}...{/each} {#each expression as name, index (key)}...{/each} {#each expression as name}...{:else}...{/each}Shopping list {#each items as item} {item.name} x {item.qty} {/each} 반복 가능한 배열은 각 블럭마다 반복 횟수에 맞는 index를 가진 값을 사용 할 ..

{#if…} #{if}는 svelte내에서 조건에 따라 각기 다른 컴포넌트를 마운트 시킬 수 있습니다. {#if expression}...{/if} {#if expression}...{:else if expression}...{/if} {#if expression}...{:else}...{/if}{#if answer === 42} what was the question? {/if}블락으로 감싸진 컨텐츠는 조건에 따라 렌더 됩니다. {#if porridge.temperature > 100} too hot! {:else if 80 > porridge.temperature} too cold! {:else} just right! {/if}{:else if condition} 과 {:else}를 사용하여, 추가적..

Comment Hello worldHTML에서 사용되는 주석 방식을 컴포넌트 내부에서 사용 가능합니다. 만약 주석이 svelte-ignore와 사용된다면 다음 HTML요소에 관한 경고를 사용 할 수 업게 됩니다. 보통 경고 문구를 해제하기 위해서 사용 되니, 적당한 사유와 동반하여 사용 하시면 됩니다. #svelte

Attributes and props can't touch this 기본적으로 svelte 에서 element에 attribute 를 적용하는 것은 일반 HTML와 동일합니다. HTML에서 attribute에 전달하는 값은 문자열일 필요는 없습니다. page {p} ...attribute value는 javascript 표현식을 사용 할 수 있습니다. 혹은 문자열 보간법을 이용하지 않고, 자바사크립트 표현식을 바로 사용 가능합니다. This div has no title attributeboolean 형식의 attribute는 전달되는 값의 형태에 따라 truthy혹은 falsy로 분류되어 boolean값으로 전달 됩니다. 다른 모든 속성들은 nullish하여, null 혹은 undefined를 ..

Svelte 파일 내부에 있는 style 태그는 해당 컴포넌트안에서만 유효범위를 가집니다. 이것은 Element 들에 컴포넌트에서 유효한 해쉬값을 붙인 클래스를 붙이는 것으로 가능합니다. 만약 해당 컴포넌트외에 전역적으로 style을 부여하고 싶다면 :global(selector)를 사용하시면 됩니다. 만약 @keyframes 를 전역적으로 사용 하고 싶다면 -global- 을 사용하시면 됩니다. 위의 예제에서 my-animation-name이 사용되었지만 다른 이름으로 교체 하실 수 있습니다. #svelte #style #keyframe