Dev_Ryomi

보호되어 있는 글입니다.

@layer - Svelte framework에서 사용되는 기능 중 하나로 style sheet를 layer 별로 정리 및 관리할 수 있게 도와줌 - layer는 style sheet를 그룹화하여 원하는 방식으로 스타일을 구성하고 관리할 수 있게 해주는 방법 - 더 구조적이고 모듈화된 스타일 시트를 작성할 수 있으며 CSS Class 간 충돌을 방지하는데 도움이 됨 - Base Layer : 웹 페이지의 기본 스타일을 정의하는데 사용 : font, text style, 기본 색상, 전체 페이지의 배경 등과 같은 기본적인 스타일 규칙이 들어감 : 웹 페이지의 모든 요소에 공통적으로 적용되는 스타일 정의 - Components Layer : 페이지 내에서 사용되는 구성요소 (ex) 버튼, 카드, 네비게이션 ..

- onMount function onMount( fn: () => | NotFunction | Promise | (() => any) ): void; : onMount 함수는 컴포넌트가 DOM에 마운트된 직후에 콜백을 실행하기 위해 예약합니다. 이 함수는 컴포넌트의 초기화 중에 호출되어야 합니다(하지만 컴포넌트 내부에 위치할 필요는 없으며, 외부 모듈에서 호출될 수 있습니다). : onMount는 서버 사이드 컴포넌트 내에서 실행되지 않습니다. onMount에서 반환된 함수는 컴포넌트가 언마운트될 때 호출됩니다. * 이 동작은 onMount에 전달된 함수가 동기적으로 값을 반환할 때만 작동합니다. 비동기 함수는 항상 Promise를 반환하므로 동기적으로 함수를 반환할 수 없습니다. - beforeUpd..

- slot : 컴포넌트는 요소와 마찬가지로 자식 콘텐츠를 가질 수 있습니다. 콘텐츠는 요소를 사용하여 자식 컴포넌트에서 노출되며, 자식이 제공되지 않을 경우 렌더링되는 대체 콘텐츠를 포함할 수 있습니다. this fallback content will be rendered when no content is provided, like in the first example this is some child content that will overwrite the default slot content * 일반적인 요소를 렌더링하려면 을 사용할 수 있습니다. - `slot name="name"` : 이름이 지정된 슬롯을 사용하면 소비자가 특정 영역을 대상으로 할 수 있습니다. 또한 대체 콘텐츠를 가질 수도 있..

- on:eventname : 컴포넌트는 createEventDispatcher를 사용하거나 DOM 이벤트를 전달함으로써 이벤트를 발생시킬 수 있습니다. dispatch('hello')}> one two : 컴포넌트 이벤트를 수신하는 방법은 DOM 이벤트를 수신하는 것과 동일합니다: : DOM 이벤트와 마찬가지로, on: 지시문을 값 없이 사용하면 이벤트가 전달되어 소비자가 이를 수신할 수 있습니다. - --style-props : CSS 사용자 정의 속성을 사용하여 테마를 적용하기 위해 스타일을 컴포넌트에 props로 전달할 수도 있습니다. : Svelte의 구현은 사실상 래퍼 요소를 추가하는 문법 설탕입니다. 다음 예시를 살펴보겠습니다: 이것은 다음과 같이 해석됩니다: * 이는 추가적인 요소이므로 C..

- on: eventName on:eventname={handler} on:eventname|modifiers={handler} : on: 지시문을 사용하여 DOM 이벤트를 수신 count: {count} : 핸들러는 인라인으로 선언할 수 있으며, 성능 저하가 없다. 속성과 마찬가지로, 구문 하이라이터를 위해 디렉티브 값에 따옴표를 사용할 수 있다. (count += 1)}> 카운트: {count} : '|' 문자로 DOM 이벤트에 수정자를 추가할 수 있다. : 사용할 수 있는 Modifiers preventDefault — 핸들러를 실행하기 전에 event.preventDefault()를 호출 stopPropagation — event.stopPropagation()를 호출하여 이벤트가 다음 요소에 도..

- {@html string} // this string contains some HTML!!! {string} // this string contains some HTML!!! {@html string} : 텍스트 표현식에서는 ''와 같은 문자가 이스케이프 처리되지만, HTML 표현식에서는 그렇지 않다. : 표현식은 독립적으로 유효한 HTML이어야 한다. : 아래의 코드는 유효한 HTML이 아니기 때문에 동작하지 않으며 Svelte 코드를 컴파일하지도 않는다. {@html ""}내용{@html ""} * Svelte는 HTML을 주입하기 전에 표현식을 제거하거나 변형하지 않는다. 데이터가 신뢰할 수 없는 소스에서 왔다면, 반드시 제거되어야 하며, 그렇지 않으면 사용자를 XSS 취약점에 노출..

- If (조건부 렌더링) {#if answer === 42} 질문은 무엇이었을까요? {/if} {#if porridge.temperature > 100} 너무 뜨거워요! {:else if 80 > porridge.temperature} 너무 추워요! {:else} 딱 적당해요! {/if} - Each(배열/객체 순회) {#each items as item} {item.name} x {item.qty} {/each} : each 블록에 두 번째 인수로 index 전달 (optional) {#each items as item, i} {i + 1}: {item.name} x {item.qty} {/each} : 두 번째 인수로 key 표현식을 제공하면 데이터 변경 시 리스트를 비교하여 항목을 추가하거나 제거..

- Tags : 소문자 태그는 일반적인 HTML 요소를 나타냄 : 대문자로 시작하는 태그는 컴포넌트를 나타냄 - Attributes와 Props : 기본적으로 속성은 HTML 속성과 동일하게 작동 can't touch this : 값은 따옴표로 묶지 않고 사용 가능 : 속성 값에는 JavaScript 표현식을 포함하거나 표현식 사용 가능 page {p} ... : 부울 속성은 값이 truthy이면 요소에 포함되고, falsy이면 제외됩니다. : 나머지 속성은 값이 nullish(값이 null 또는 undefined)인 경우를 제외하고 포함 This div has no title attribute : 표현식에는 일반 HTML에서 구문 강조 표시가 실패할 수 있는 문자가 포함될 수 있으므로 값에 따옴표를 사..