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 웹앱을 만들어보는게 목표다.
현재 Velog 는 운영하지 않습니다 :) 가끔 와서 눈팅