svelte 3

svelte ?

• svelte 는 날씬한, 호리호리한 이라는 뜻을 가진 형용사 입니다.
• Rich Harris 라는 분이 제작한 프론트엔드 프레임워크 또는 컴파일러 입니다.
• vue, react 와는 다르게 가상돔을 사용하지 않는다.

- 스벨트는 빌드시, 모든 코드를 효율적인 javascript 로 변환
- 가상돔과 npm 의존성(코어 라이브러리)을 없애고 런타임(실행환경)에 코드를 해석하지 않는다.
컴파일러는 번역기다. 스벨트는 이런 컴파일 역할을 하여 효율적인 javascript 코드로 변환
가상돔을 사용하지 않는다. + react, vue 처럼 npm 의존성(vue, react, react-dom)이 존재하지 않는다.


"dependencies": {
    "sirv-cli": "^0.4.4"
},
  "devDependencies": {
    "@rollup/plugin-commonjs": "^11.0.0",
    "@rollup/plugin-node-resolve": "^7.0.0",
    "rollup": "^1.20.0",
    "rollup-plugin-livereload": "^1.0.0",
    "rollup-plugin-svelte": "^5.0.3",
    "rollup-plugin-terser": "^5.1.2",
    "svelte": "^3.0.0"
}

svelte는 기본적으로 컴파일러이기 때문에, 런타임에 svelte 관련 라이브러리를 불러오거나 의존성이 존재하지 않음.

-> Virtual(가상) DOM이 없고, Runtime(런타임)에 로드할 프레임워크 또는 라이브러리가 없음을 의미

• 현재 최신버전은 3.19.1 버전이다.

시작하기

• https://svelte.dev/
• https://svelte.dev/repl/hello-world?version=3.19.1
• 공식사이트에 친절한 설명과 라이브코딩이 가능한 REPL이 준비되어있다.

npx degit sveltejs/template my-svelte-project
cd my-svelte-project
npm i
npm run dev

• https://github.com/sveltejs/template 여기서 템플릿 구조 확인이 가능

src/example, public/build 폴더를 제외하면 초기 구성은 위 사진과 같다

• /public에는 svelte 가 완료한 컴파일 또는 빌드 결과가 들어감
• /src는 svelte 컴포넌트를 작성(*.svelte)
• rollup.config.js은 Rollup이라는 Webpack에 대응하는 자바스크립트용 모듈 번들러의 설정 파일
• src/main.js가 svelte 의 시작점이다

// rollup.config.js input 에 시작점

import App from './App.svelte';

const app = new App({
	target: document.querySelector('#app'),
	props: {
		name: 'world'
	}
});

export default app;

컴포넌트

• 스벨트 컴포넌트는 확장자 *.svelte 를 가진다
• 컴포넌트란 독립적인 소프트웨어 모듈을 의미한다(재사용 가능한 단위)
• 스벨트 컴포넌트도 같은 맥락이다 어떤 코드에 대해서 재사용 가능하도록 나눈 조각이다(html + css + js)

// component format

<script>
	// logic goes here
</script>

<style>
	/* styles go here */
</style>

<!-- markup (zero or more items) goes here -->

• 마크업 요소는 없거나, 여러 개일 수 있음
• 순서는 중요하지 않음
• style 태그는 해당 컴포넌트에 유효범위를 가짐

간단한 예제코드

<script>

    let count = 0;
    let count2 = 100;

    const addCount = () => {
        count2++
    }


</script>

<button on:click={() => count += 1}>
    {count}
</button>

<button on:click={addCount}>
    {count2}
</button>

<style>

    button {
        background-color: #4287f5; /* Green */
        border: none;
        outline: none;
        color: white;
        padding: 8px;
        text-align: center;
        text-decoration: none;
        font-size: 14px;
        display: inline-block;
    }

</style>

• 버튼을 클릭하면 각 상태들이 증가하는 예제입니다.
• :on 디렉티브를 이용하여 이벤트에 바인딩을 할 수 있습니다.
• 태그내에 {count} / {count2} 라고 선언한 부분은 상태값 count / count2 를 참조합니다.

// props 관련
// PropsExample.svelte
<script>
    export let name = null;
    export let age = null;

    export const readOnly = 'readOnly!!'; // const 로 선언하면 무조건 읽기 전용
</script>

<div>
    <p>난 부모에게 값을 받았어요!</p>
    <p>
        name : {name} / age : {age}
    </p>
    <p>
        readOnly : {readOnly}
    </p>

    <div>
        <button on:click={() => name = '변경이름'}>변경</button>
    </div>
</div>


let person = {
		name : 'nameProp',
		age : 100
	}
<PropsExample name="{person.name}" age="{person.age}" readOnly="zzzz"/>

• props 로 사용할 상태들을 export 키워드로 선언이 가능하다
• const 를 export 로 선언해도 읽기전용이라 값이 그대로 고정이다

느낌

• 다른 기존 react, vue, angular 와 비교하였을때, 학습곡선이 확실히 낮다.
• 프론트엔드 프레임워크 3대장에 비해 인지도가 작지만 가상돔을 사용안하고, 새로운 접근방식으로 만들어진 기술이라 오히려 웹 친화적인 느낌이 든다.
• 라이프사이클, 스토어 등 아직 학습할 부분이 남아있으나 공식문서가 설명이 잘 되어있는 점과 다양한 예제가 제공된다는점이 마음에 든다.
• 최종적으로 TODO List 웹앱을 만들어보는게 목표다.