Dog foot print

requirement 일렉트론 윈도우에서는 svelte를 사용 할 수 있어야 한다. 유용한 플러그인 및 모듈을 설치하여, 깔끔한 폴더 구조를 만들어야 한다. svelte와 일렉트론에서 typescript를 사용 할 수 있어야 한다. svelte에서는 scss를 사용 할 수 있어야 한다. svelte에서 최신 문법을 사용 할 수 있어야 한다. svelte에서는 css초기화가 되어야 한다. svelte에서는 css 브라우저 접두사가 붙어야한다. rollup-plugin-copy 현재 문제점은 아래와 같이 파일이 번들링 되며 public폴더에 build 폴더가 생겨, public 폴더가 오염된다는 문제가 있다. 그래서, 빌드 시 public 폴더에는 영향을 미치지 않으며, public 폴더 내부에 존재하는 파..

use:action 액션이란 스벨트에서 사용되는 용어로써, 돔 노드의 요소가 생성, 업데이트, 삭제될 때 실행되는 함수를 의미한다.( 액션은 돔 노드가 생성될 때 최초 호출된다. ) 함수는 update와 destroy를 가진 객체를 리턴 할 수 있는데, 이 각각의 프로퍼티는 노드 요소가 업데이트 되거나, 삭제 될 때 실행되는 메서드로 디스트로이 프로퍼티는 해당 엘리먼트가 삭제될 때, 이벤트 리스너들을 삭제하는 식으로 주로 사용된다. #svelte

bind:group & this Bind:group bind:group 문법은 type="radio" 혹은 type="checkbox" 의 인풋에서 요긴하게 사용되는 예약어이다. 아래의 코드에서 보다시피 radio 버튼에 group을 설정하게 되면, 버튼이 클릭되었을 때, 해당 value가 변수에 할당되게 된다. Checkbox는 다중 선택이 가능하기 때문에, 이를 bind:group으로 설정하면 체크되어 있는 input의 value가 배열에 저장되게 된다. bind:this bind:this는 특정 돔 노드를 변수에 할당하는 역할을 한다. 다만, 렌더링 이후에, 노드 요소가 변수에 할당되기 때문에, 사용시 주의를 필요로 한다. #svelte

on:eventname on:eventname={handler} on:eventname|modifiers={handler}스벨트에서는 on: 키워드를 컴포넌트에 입력하는 것으로 해당 컴포넌트에서 발생하는 DOMevent를 연결 할 수 있습니다. count: {count} 이벤트 핸들러는 성능의 영향을 주지않고 인라인으로 선언 할 수 있습니다. ' 따옴표와 함께 사용하는 경우, 스벨트 문법은 하이라이팅 되며, 정상 작동 합니다. count: {count} preventDefault 같은 모디파이어를 사용하는 경우 | 문자와 함께 사용 할 수 있습니다. 사용 할 수 있는 modifier의 종류는 다음과 같습니다. preventDefault - 이벤트 핸들러가 실행 되기전에 event.preventDe..

Snapshot Test Snapshot test란 UI가 바뀌지 않았다는 것을 증명하는 유용한 도구이다. snapshot 은 UI컴포넌트를 렌더링 한 후, 이를 다음 테스트와 함께 저장된 스냅샷과 비교하며 테스트가 진행된다. snapshot테스트는 두개의 스냅샷이 일치 하지 않은 경우, 실패하게 됩니다. 이 경우, 새롭게 적용한 컴포넌트의 UI가 의도치 않게 변경되었거나, 컴포넌트가 버전이 변경되었음을 시사합니다. Snapshot Testing with Jest 모든 App의 그래픽 UI를 렌더하는 대신에, 테스트 렌더러를 사용하여, React 트리를 빠르게 생성 할 수 있습니다. import React from 'react'; import renderer from 'react-test-renderer..

{@html} {post.title} {@html post.content} 일반 텍스트를 표현할 때 문자 은 > 혹은 <로 변경됩니다. 그러나 @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를 가진 값을 사용 할 ..