Jaewonism - POST : [자바스크립트 프레임워크 소개] Svelte, Github, Front-end, Back-end, Web Developer, 웹 개발자, 프론트 엔드, 개발자, 백 엔드, Node JS, Express JS, Ruby On Rails

JOIN
LOGIN
background-image
Java Script JAN 4. 2017
[자바스크립트 프레임워크 소개] Svelte

Svelte란?

  • 2016년 11월에 출시된 Svelte 는 Java Script 프레임워크로, 크기가 매우 작다는 장점이 있다.
  • 전통적인 프레임워크는 모듈을 정의하고, 실행하며, 상태를 유지하고, 뷰를 업데이트하는 등의 모든 행위에 대해 런타임 코드를 필요로 한다.
  • Svelte 는 프레임워크를 전혀 사용하지 않은 것처럼 순수한 Java Script 코드로 작성된다.
  • 오버헤드가 없으므로 기존 애플리케이션에서 점진적으로 쉽게 적용할 수 있다.
  • Svelte 에서 애플리케이션은 하나 이상의 컴퍼넌트로 구성된다.
    • 컴퍼넌트는 마크업, 스타일, 동작을 함께 캡슐화하는 재사용 가능한 코드 블락이다.

시작하기

svelte-cli 설치

1
2
3
$ yarn global add svelte-cli
# or
$ npm i -g svelte-cli

HelloWorld.html 생성하기

  • PascalCase 를 사용하길 권장한다.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <h1>Hello, {{name}}!</h1>
    <button on:click="reverseName()">Click Me!</button>

    <script>
    export default {
    data() {
    return {
    name: 'World',
    }
    },
    methods: {
    reverseName() {
    const reverseName = this.get('name')
    .split('')
    .reverse()
    .join('');
    this.set({
    name: reverseName,
    });
    },
    },
    };
    </script>

컴파일 하기

1
$ svelte compile --format iife HelloWorld.html > HelloWorld.js

  • --format iife즉시 실행 함수 표현식 을 생성한다는 의미다.

index.html 생성 및 컴퍼넌트 API 사용하기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<title>Svelte example</title>
</head>
<body>
<div id="svelte-app"></div>
<script src='./HelloWorld.js'></script>
<script>
const app = new HelloWorld({
target: document.getElementById('svelte-app'),
data: {
name: 'World',
},
});
</script>
</body>
</html>