First look of Svelte App

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의 이름 뜻과 같이 (날씬한) 가볍고 빠른 앱을 만들 수 있으리라 기대가 된다.