First look of Svelte App

Environmental Settings on VS Code

일단 VS Code Extension에서 svelte로 검색해서 뜨는 상위 세개를 깔아주었다. 우선 내가 설치한 익스텐션은 Svelte, Svelte Intellisense, Svelte 3 Snippets 이렇게 세 개이다.

Install the Svelte

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

위 명령어를 이용해서 svelte를 설치한다. 설치가 완료되는데는 그렇게 길게 걸리지 않는다.

.
├── node_modules
├── README.md
├── package-lock.json
├── package.json
├── public
│   ├── favicon.png
│   ├── global.css
│   └── index.html
├── rollup.config.js
└── src
    ├── App.svelte
    └── main.js

폴더 구조는 크게 public, src 두군데이다.

public: 웹페이지 구성을 위한 파일들이 있고, 앱이 빌드되고 나면 build 폴더에 번들링 된 파일이 포함된다.
src: App.svelte와 main.js파일이 있다. 특이한 점은 main.js 파일을 살펴보면 Svelte App의 타겟팅이 document.body라는 점이다.

// main.js
import App from './App.svelte';

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

export default app;

https://svelte.dev/ 의 메인 페이지에 나와있는 No virtual DOM 이라는 문구가 기억나게 한다. 순수 JS를 지향하는 Svelte의 철학이 돋보인다.

특이한 점은 svelte는 webpack이 아닌 rollup이라는 모듈 번들러를 이용해서 앱 패키징을 한다. 나중에 한번 살펴보아야겠다.

npm run dev 명령어로 앱을 구동시켜보자. http://localhost:5000 으로 구동이 되었다. (아쉽게도 브라우저를 자동으로 열어주지는 않는다.)

Runs Svelte App

// 구동 이미지 여기에

브라우저에서 구동시키면 Hello World! 라는 문구가 우리를 반긴다. 가벼운 프레임워크를 지향한다는 말처럼 굉장히 가벼운 느낌을 받을 수 있었다.

개발자 도구를 열어서 Elements를 살펴보니 CSS 클래스 선언부가 눈에 띈다.

<main class="svelte-1tky8bj">
    <h1 class="svelte-1tky8bj">Hello world!</h1>
  <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>

app.svelte 파일 내에 선언된 style을 위와 같이 바인딩한 것이다. Svelte는 기본적으로 컴포넌트 기반 웹 개발을 지향한다는 점을 알 수 있다.

Props

Hello World를 띄워봤으니, 이번에는 텍스트를 수정해보자. 그런데 App.svelte 파일을 보니 Hello World가 텍스트로 있는 게 아니라, name이라는 변수로 선언이 되어있다. name 변수는 App.svelte 파일의 props이며, main.js 에서 수정이 가능하다.

자, name 변수를 자기 이름으로 바꿔보자. Live reload 기능으로 금방 바뀌는 것을 확인할 수 있다.

// App.svelte
<script>
    export let name;
</script>

<main>
    <h1>Hello {name}!</h1>
    <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>

<style>
    main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }

    h1 {
        color: #ff3e00;
        text-transform: uppercase;
        font-size: 4em;
        font-weight: 100;
    }

    @media (min-width: 640px) {
        main {
            max-width: none;
        }
    }
</style>

Conclusion

Svelte를 구동해보며 느낀 점은 우선 가볍다 라는 점이다. 또한 기본적으로 리액티브를 지향하기 때문에 이런 면에서는 Vue와 닮은 구석이 있다. 또한 React와 Vue에서 지향하는 컴포넌트 기반 웹 개발을 할 수 있기에 거부감이 덜 하리라는 생각이 든다.

물론 프로그램의 복잡도가 올라가면 어떤 문제들이 또 생길지는 아직은 알 수 없지만, svelte의 이름 뜻과 같이 (날씬한) 가볍고 빠른 앱을 만들 수 있으리라 기대가 된다.