Tags 소문자의 태그()의 경우 HTML 엘리먼트로 인식한다. 대문자로 시작하는 태그(capitalised tag)의 경우는 컴포넌트 인식 Attributes and props 기본적으로 html attributes 는 html 속성으로 동일하게 작동 javascript 표현식도 가능 attribute name과 value name이 같을 경우 단순이 '{name}' 으로 선언도 가능 그외 아래와 같은 Spread attributes 도 사용 가능 '$$props' references all props that are passed to a component '$$restProps' contains only the props which are not declared can't touch this page..

Svelte 컴포넌트의 기본적인 구조는 아래와 같다. '.svelte' 확장자를 사용해서 파일을 컴포넌트를 정의할 수 있다. Component Format (기본 골격) script 영역 'import' 구문을 통해서 .svelte 확장자의 다른 컴포넌트를 불러와서 사용할 수 있다. 'let' 키워드를 통한 State 값을 선언하여 변수를 선언한다. click array 를 활용하는 방법 위의 코드에서 'count = count + 1;'와 같이 상태값을 재할당하는 방식으로 갱신하는 것처럼 배열에서도 .push(), .splice() 사용이후에 자동으로 업데이트 되지 않으므로 재할당이 필요하다. 'arr = arr' 또는 스프레드 연산자를 사용하여 재할당 한다. 'export' 키워드를 사용한 Props..

Vue보도 조금 늦게 나온 프론트엔드 프레임워크. 2019년 3버전이 나온 이후 관심을 받음 "Frameworks without the framework"? Svelte의 장점 Write less code Svelte의 상태값은 특별한 규칙을 만들기보다 자바스크립트 변수 선언을 하는 것이 전부 Svelte 코드 {a} + {b} = {a + b} React 코드 import React, { useState } from 'react'; export default () => { const [a, setA] = useState(1); const [b, setB] = useState(2); function handleChangeA(event) { setA(+event.target.value); } functio..