새로운 웹 프레임워크 Svelte
//App.svelte
<script>
import Header from './components/Header.svelte'
const world = 'wolrd'
</script>
<Header />
<h3>Hello {world}!</h3>React, Vue 는 여전히 인기가많고 사랑받는 웹 프레임워크 이다.
Angular도 있지만.. 개인적으로 좋아하지않아서 제외..
Svelte 는 관심이있었으나, Vue에만 치중하고있는 요즘 오직 관심만 가지고있던 프레임워크다.
관심가지게된 이유는 다음과 같다.
Vue.js 과 같은 짧은 러닝커브
Vue.js 보다 훨씬 간단하게 코드를 짤수있고, 그만큼 적은 용량으로 개발이가능하다.
물론 이정도로 관심을 갖기엔 너무 적고, 가장 관심이 갔던부분은 이부분이다.
가상돔을 사용하지않는다.
또한 위의 3개 프레임워크보다 모든 리소스를 다운받는 속도가 빠르다.
Svelte의 기본문법
// App.svelte [Vue와 같이 Svelte도 별도의 파일확장자를 가진다.]
<script>
const world = 'world';
</script>
<style>
h3{
color:#000;
}
</style>
<h3>Hello {world}!</h3>
?!?!?
그렇다 이게 전부다. 너무 간단해서 놀랐다. Vue 를 처음 접했을때도 이처럼 놀랐는데..
css 의경우 자동으로 scoped 되어 해당 컴포넌트에만 적용이됨.
// Header.svelte
<script>
const classTest = 'svelte-hi'
// props 예제
export let test
</script>
<header class={classTest}>
헤더 {test}.
</header>//App.svelte
<script>
import Header from './components/Header.svelte'
const world = 'wolrd'
const com = '컴포넌트입니다.'
</script>
<Header test={com}/>
<h3>Hello {world}!</h3>컴포넌트를 작성하고 불러오는것도 이거면 끝난다.
데이터전달도 위처럼하면 끝
오늘부터 조금씩 Svelte로 개인프로젝트를하면서 공부해봐야겠다.. 굿