svelte8 svelte 번역 - 8 - Template Syntax / Special elements Svelte에서 컴포넌트는 태그를 사용하여 자식 콘텐츠를 받을 수 있습니다. 이 콘텐츠는 기본적으로 컴포넌트 소비자가 제공한 자식 요소들로 대체됩니다. 자식 요소가 없을 경우, 슬롯 안에 있는 대체 콘텐츠(fallback content)가 렌더링됩니다.기본 사용법: 이 기본 콘텐츠는 자식 요소가 제공되지 않으면 렌더링됩니다. 이 자식 콘텐츠는 기본 슬롯 콘텐츠를 덮어씁니다.명명된 슬롯(Named Slots):슬롯에 이름을 지정하여 특정 위치에 콘텐츠를 전달할 수 있습니다. 각 명명된 슬롯은 대체 콘텐츠를 가질 수 있습니다. 헤더가 제공되지 않았습니다. 헤더와 푸터 사이의 콘텐츠 푸터가 제공되지 않았습니다. Hello © 2019 Svelte Industries명명된 슬롯에 컴포넌트를 전달하.. 2024. 10. 17. svelte 번역 - 7 - Template Syntax / Component directives on:eventnameSvelte 컴포넌트는 DOM 이벤트와 동일하게 컴포넌트에서도 이벤트를 발생시키고 수신할 수 있습니다. 이벤트는 createEventDispatcher 함수를 사용하여 프로그램적으로 디스패치할 수 있으며, DOM 이벤트를 전달(forwarding)하는 방식으로도 가능합니다. dispatch('hello')}> one two 컴포넌트 이벤트 수신은 DOM 이벤트와 동일하게 처리됩니다.on: 지시어가 값 없이 사용되면 이벤트가 전달되며, 소비자가 해당 이벤트를 수신할 수 있게 됩니다.--style-props컴포넌트에 CSS 사용자 정의 속성을 사용해 스타일을 props로 전달할 수 있습니다. Svelte는 이를 위해 래퍼 요소를 추가하는 문법적 설탕을 제공합니다.예를 들어:위 코드는 .. 2024. 10. 17. svelte 번역 - 6 - Template Syntax / Element directives on:eventnameon: 지시어는 DOM 이벤트를 수신하는 데 사용됩니다. count: {count}핸들러는 인라인으로 선언할 수 있으며, 성능에 영향을 주지 않습니다. (count += 1)}> count: {count}이벤트에 수정자를 추가할 수 있으며, | 문자로 구분합니다. 사용할 수 있는 수정자는 다음과 같습니다:preventDefault — event.preventDefault()를 호출하여 기본 동작을 막음stopPropagation — event.stopPropagation()을 호출하여 이벤트가 다음 요소에 도달하는 것을 방지stopImmediatePropagation — 다른 리스너가 실행되지 않도록 방지passive — 터치/휠 이벤트에서 스크롤 성능을 향상capt.. 2024. 10. 17. svelte 번역 - 5 - Template Syntax / Special tags {@html ...} 블록{@html} 블록은 HTML 표현식을 사용하여 HTML을 렌더링할 때 사용됩니다. 일반 텍스트 표현식에서는 및 >와 같은 문자가 이스케이프 처리되지만, {@html} 표현식에서는 이스케이프 처리가 되지 않습니다.HTML 표현식은 독립적으로 유효한 HTML이어야 합니다. 예를 들어, {@html ""}과 {@html ""}를 각각 사용하여 내용을 감싸는 것은 유효한 HTML이 아니므로 작동하지 않습니다. 또한, Svelte 코드 자체를 컴파일하지는 않습니다.Svelte는 HTML을 삽입하기 전에 표현식을 자동으로 정리하지 않으므로, 신뢰할 수 없는 데이터에서 HTML을 삽입할 경우 XSS(크로스 사이트 스크립팅) 공격에 노출될 수 있습니다. 따라서 외부 데이터를 HTML로 삽입.. 2024. 10. 17. svelte 번역 - 4 - Template Syntax / Logic blocks {#if ...} 블록{#if} 블록은 조건부 렌더링을 위해 사용됩니다. 특정 조건이 충족되면 해당 내용을 렌더링할 수 있습니다.{#if answer === 42} what was the question?{/if}추가 조건은 {:else if}와 함께 사용할 수 있으며, 선택적으로 {:else}로 끝날 수 있습니다.{#if porridge.temperature > 100} too hot!{:else if 80 > porridge.temperature} too cold!{:else} just right!{/if}{#if} 블록은 요소뿐만 아니라 텍스트를 포함할 수도 있습니다.{#each ...} 블록{#each} 블록은 값의 리스트를 반복하여 렌더링하는 데 사용됩니다.Shopping list {#.. 2024. 10. 17. svelte 번역 - 3 - Template Syntax / Basic markup 태그 (Tags)소문자로 된 태그 는 일반 HTML 요소를 나타냅니다. 대문자로 시작하는 태그, 예를 들어 또는 은 컴포넌트를 나타냅니다. 속성과 속성 전달 (Attributes and Props)기본적으로, HTML 요소의 속성은 HTML에서와 동일하게 작동합니다. can't touch thisHTML처럼 값이 따옴표 없이도 작성될 수 있습니다.속성 값은 JavaScript 표현식을 포함할 수 있습니다.page {p}또는 속성 자체가 JavaScript 표현식일 수 있습니다....불리언 속성은 그 값이 참일 경우 요소에 포함되며, 거짓이면 제외됩니다.This div has no title attribute경우에 따라, HTML 문법이 깨지지 않도록 속성 값에 따옴표를 추가할 수 있습니다. 따옴표는.. 2024. 10. 17. svelte 번역 - 2 - Template Syntax / Svelte Components Svelte ComponentsSvelte 컴포넌트는 Svelte 애플리케이션의 기본 구성 요소입니다. 이들은 .svelte 파일에 작성되며, HTML의 상위 집합을 사용합니다.세 가지 섹션(스크립트, 스타일, 마크업)은 모두 선택 사항입니다.속성에 대해 기본 초기값을 지정할 수 있으며, 이는 컴포넌트가 인스턴스화될 때 소비자가 속성을 지정하지 않으면 사용됩니다. 속성이 이후에 업데이트되면 지정되지 않은 속성은 undefined로 설정됩니다.const, class, function을 export하는 경우, 외부에서 읽기 전용으로만 사용할 수 있습니다. 함수는 유효한 속성 값으로 사용할 수 있습니다.속성을 읽기 전용으로 만든 경우, bind:this 문법을 사용하여 엘리먼트의 속성으로 접근할 수 있습니다... 2024. 10. 17. svelte 번역 - 1 - Introduction IntroductionSvelte 참조 문서에 오신 것을 환영합니다! 이 문서는 Svelte에 대해 어느 정도 익숙한 분들이 더 자세히 알아보고자 할 때 참고할 수 있는 리소스입니다.아직 Svelte에 익숙하지 않다면, 이 참조 문서를 보기 전에 대화형 튜토리얼이나 예제를 먼저 살펴보는 것이 좋을 수 있습니다. REPL을 사용하여 온라인에서 Svelte를 시도해 볼 수 있습니다. 또는 더 완전한 기능을 갖춘 환경을 원한다면, StackBlitz에서 Svelte를 사용해 볼 수 있습니다.새 프로젝트 시작하기Svelte 팀의 공식 애플리케이션 프레임워크인 SvelteKit을 사용하는 것을 권장합니다:npm create svelte@latest myappcd myappnpm installnpm run devS.. 2024. 10. 17. 이전 1 다음