1. 프론트엔드? 백엔드?
나만의 웹사이트를 만들고 싶어요!
내가 만든 코드나 워킹툴을 웹에서 구동되도록 올리고 싶어요!
프론트엔드/백엔드 개발자가 되고 싶어요!
'나 요새 프로그래밍에 관심이 생겼는데 어떤 언어부터 공부하면 좋을까?' 라는 질문을 받으면 대부분의 사람들이 추천하는 언어는 아마 python과 Javascript 일 것입니다.
특히 프론트엔에 관심이 있는 사람이라면 Javascript는 선택이 아닌 필수기도 합니다.(백엔드는 그나마 python, Ruby 등 다양한 언어로 개발이 가능합니다.)
보통 Javasctipt를 공부하는 가장 기초적이고 보편적인 테크는 바닐라 자바스크립트(vanila JS)를 공부하고 필요에 따라 React JS, Node JS, Vue Js, Angular Js 등의 런타임/프레임워크로 옮겨가는 식일 것입니다.
하지만 오늘은 이러한 3대장이 아닌 다소 생소하실 수 도 있는 Svelte JS(이하 Svelte)라는 프레임워크를 소개해드리려 합니다.
2. Svelte가 뭔데?
Svelte는 처음 세상에 등장한지 5년도 되지않은 따끈따끈한 프레임 워크(2019년 3.0 version 출시)로 React JS나 Vue JS와 같은 구성 요소의 프레임 워크입니다. 하지만 단순히 같은 프레임워크라면 이미 강력한 커뮤니티와 확장성을 갖고 있는 React Js나 Vue JS를 버리고 새로 공부할 필요가 없습니다. 오늘은 Svlete의 주요 장점과 특징을 3가지로 추려서 소개합니다.
1). 짧고 간결하며 직관적인 코드
일반적으로 코드가 길어질수록 버그의 수도 많아지기 마련입니다. 또한 버그 픽스를 위해 들여야 되는 노력과 시간은 더욱 많아집니다. 또한 코드의 가독성은 전체적인 코드의 길이와도 많은 연관이 있기 때문에 코드가 짧을수록 다른 사람과 공유하고, 함께 develope하기 유리합니다. Svelte는 다양한 부분에서 동일한 기능을 수행할 때 React Js와 Vue JS보다 훨씬 간결한 코드로 마무리할 수 있습니다.
#In Svelte
<script>
let a = 1;
let b = 2;
</script>
<input type="number" bind:value={a}>
<input type="number" bind:value={b}>
<p>{a} + {b} = {a + b}</p>#In React
import React, { useState } from 'react';
export default () => {
const [a, setA] = useState(1);
const [b, setB] = useState(2);
function handleChangeA(event) {
setA(+event.target.value);
}
function handleChangeB(event) {
setB(+event.target.value);
}
return (
<div>
<input type="number" value={a} onChange={handleChangeA}/>
<input type="number" value={b} onChange={handleChangeB}/>
<p>{a} + {b} = {a + b}</p>
</div>
);
};
위 코드의 길이만 봐도 Svelte가 확실히 간결하고 짧다는 것을 알 수 있습니다. 특히 Svelte의 경우 state를 선언할 때 단순히 let () = x로 선언해주면 인식할 수 있고, 모든 동작을 function으로 구성할 필요도 없고 특별한 구문을 알 필요도 없이 직관적으로 나타낼 수 있기 때문에 잘모르는 사람이 봐도 쉽게 이해가 가능하다는 장점이 있습니다.
2). 매우 빠른 실행속도와 안정성
우리가 보는 웹페이지는 결국 일종의 Document로 브라우저가 우리의 코드를 읽고 해석하여 나타내주는 것이라 생각하면 됩니다. 우리는 브라우저가 코드를 보다 명확히, 정확히 해석하길 바라며 구조화된 형태로 코드를 작성하게 됩니다. 이때 만일 DOM 이 없다면 Java script는 웹 페이지의 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못하게 됩니다.
React Js와 Vue JS는 가상 DOM을 사용하여 실행 시 컴포넌트를 배치하는 시간이 소요됩니다.(우리 눈에는 보이지 않지만) 그러나 Svelte의 경우 실제 DOM이 변하는 경우 그 부분을 즉각적으로 업데이트하기 때문에 훨씬 빠른 속도와 성능을 보여줍니다.
3). Svelte는 프레임워크이자 컴파일러이다.
동일한 기능을 수행하는 웹페이지를 svelte와 React로 제작할 때 svelte의 파일은 React 보다 매우 작은 크기를 갖습니다. 파일의 크기가 작다는 것은 배포부터 저장까지 다양한 부분에서 이점을 주기 때문에 생각 이상으로 중요한 요소 중 하나입니다. Svelte가 이렇게 작은 파일크기를 가질 수 있는 것은 다른 프레임워크와 다르게 컴파일되는 언어이기 때문입니다.(가장 혁신적이라 생각하는 부분)
React로 제작한 Project를 컴파일하기 위해선 번들로 만들어 통합배포해야 하는 불편함이 있습니다. Webpack과 Babel을 호출하여 프로젝트 파일을 번들링 한 뒤, 최소화(minify) 하고, react와 react-dom 라이브러리를 번들에 추가한 뒤, 또 다시 그 파일을 최소화(minify)하고, 하나의 출력 파일을(혹은 몇 개의 chunk로 분리된 파일을) 생성해야 합니다.
하지만 svelte는 자체적으로 컴포넌트를 컴파일할 수 있습니다. 이렇게 컴파일 된 결과는 [project + Svelte 런타임 환경]이 아닌, 하나의 [Svelte app] 입니다. Svelte는 Roll up이나 Webpack의 트리 쉐이킹 이점을 가져와 코드에 사용되는 프레임워크만을 포함해 자체적인 앱으로 만들어 줍니다.
(또한 이러한 컴파일러로써의 역할과 가상 DOM을 사용하지 않는다는 장점이 결합되어 svelte는 반응성을 가진 언어가 되었다!)
3. 함께 읽어보면 더 좋으실 글들
svelte의 장점에 대해 상세하고 자세하게 설명한 글 : https://daveceddia.com/svelte-intro/
공식 사이트 : https://svelte.dev/