일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 |
- 스벨트
- 리액트 예제
- 자료구조
- react
- TDD
- 자바스크립트 자료구조
- 이종호
- 비동기
- Svelte
- 호키스
- 스위프트
- 개발
- SWIFT
- data structure
- HTML
- 자바스크립트
- 계명대 이종호
- 계명대
- queue
- 호키도키
- jest
- 힛잇
- 자스민
- IOS
- Hitit
- javascript
- 리액트
- hokeys
- hokidoki
- 개발자
- Today
- Total
목록2021/05 (26)
Dog foot print
{#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
태그는 모든 컴포넌트가 인스턴스되었을 때 실행되는 것이 아닌 처음 script를 읽혔을 때 실행 됩니다. 보통의 script태그와 마찬가지로 변수를 선언 가능합니다. context="module" 속성을 가진 script 내부에서 export 키워드를 통하여, 모듈을 방출 할 수 있으며 컴파일 되었을 때, 모듈화 됩니다. export default는 사용 할 수 없습니다. 이유는 해당 파일에서 기본 방출 되는 것은 스벨트 컴포넌트이기 때문입니다. Note : 에서는 반응성을 구현 할 수 없습니다. 만약 다양한 컴포넌트에서 반응성을 필요로 한다면 store를 생성하는 것을 고려하세요 .
Store contract store = { subscribe: (subscription: (value: any) => void) => (() => void), set?: (value: any) => void }개발자는 svelte/store의 도움 없이, store contract를 구현 할 수 있습니다. 다음은 커스텀 스토어를 생성하기 위한 규칙입니다. 스토어는 반드시 subscription 정의에 맞는 첫번째 전달인자를 가진 .subscribe메서드를 가지고 있어야 합니다. subscription콜백은 신속하고 동기적으로 현재 값을 전달해주어야 합니다. .subscribe메서드는 반드시 unsubscribe메서드를 반환해야 합니다. unsubscribe메서드를 호출 하게되면, 더 이상 store의 ..