** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요.
1. Svelte의 현 위치
- 아직까지 웹프론트엔드 프레임워크의 대세는 react입니다.
- 위의 트렌드 그래프에서도 보다시피 주황색 라인인 react조회수가 월등한 것을 확인할 수 있습니다.
- 그 다음이 vue, 그리고 angular, svelte 순서로 볼 수 있습니다.
- 그럼에도 불구하고 제가 Svelte강의를 열게 된 것은 easy, easy, easy하기 때문입니다.
- 웹프론트엔드를 처음 배우거나, 웹퍼블리셔에서 프런트엔드 개발자로 넘어갈 때 React부터 한다면 매우 어렵게 느껴질 것입니다.
- 좀 쉬운 Svelte로 웹프론트엔드 프레임워크들을 이런 것이구나를 익히도 다른 언어를 가는 것도 좋을 듯합니다.
- 그리고 십 년 전 제이쿼리가 대세가 될 수 있었던 것은 사실 쉬웠기 때문이거든요.
- 그래서 웹 프런트엔드 프레임워크도 쉬운 Svelte이 대세가되지 않을까하는 혼자만의 상상으로 강의를 진행해보고자 합니다.
2. Svelte의 소개
- Svelte는 2016년에 출시한 오픈 소스, 웹프론트엔드 프레임워크입니다. 2019년 3번째 버전이 나오면서 자리를 잡고 개발자들에게 많은 관심을 갖게 되었습니다.
- svelte 영어를 해석해보자면, [날씬한, 호리호리한] 이런 뜻입니다.
- 한마디로, 기존에 웹프론트엔드 프레임워크들을 플러그인 설치해서 무겁게 갔다면, 스벨트는 그런 것 다 빼고 순수 자바스크립트를 이용해서 가볍게 가겠다는 것을 이름에 담은 겁니다.
- Svelte 공식 사이트의 블로그 첫 번째 포스트에는 다음과 같은 문구가 있습니다.
"Frameworks without the framework"- Svelte는 프레임워크 없는 프레임워크다라는 뜻입니다.
- Svelte는 자바스크립트를 사용하기 때문에 굳이 프레임워크까지 써가면서 코딩해야 하는 걸까부터 시작한 것 같습니다.
- 이 부분은 매우 동의를 합니다. 자바스크립트만으로 충분히 웹을 만들 수 있는데 굳이 프레임워크를 배워야 할까 가 저도 가끔 하는 생각이었습니다.
## 프로그래밍 용어 설명
| 용어 | 설명 |
| 라이브러리 | 컴퓨터 프로그램에서 자주 사용되는 부분 프로그램들을 모아 놓은 것. (재사용 가능한 명령의 모음) |
| 프레임워크 | 소프트웨어 어플리케이션이나 솔루션의 개발을 수월하게 하기 위해 소프트웨어의 구체적 기능들에 해당하는 부분의 설계와 구현을 재사용 가능하도록 협업화된 형태로 제공하는 소프트웨어 환경 (재사용 가능한 명령을 규칙과 패턴으로 강제화시켜 틀에 넣어 제공하는 프로그램) |
- 위의 사전적 용어를 퍼블리셔나 프런트엔드 개발자가 쉽게 이해하기 위해 설명해보겠습니다.
- 프레임워크와 라이브러리는 복잡한 개발을 편리하게 작성하라고 제공해주는 코드입니다. 자바스크립트가 어려우니까 더 쉽게 제작하라고 제공한 문서라고 보면 됩니다. 하지만 라이브러리는 전체 틀이 아닌 기능을 제공해서 개발자가 필요한 기능을 호출해서 사용한다고 보면 됩니다. 대신 프레임워크는 개발자가 작업하기 위한 전체적인 틀을 제공해서 개발자는 그 틀 안에서 그 방식에 맞춰서 작업해야 합니다.
- 제이쿼리는 라이브러리입니다. 라이브러리는 개발자가 필요한 기능들만 호출해서 사용할 수 있고, 또한 개발 주도권이 개발자에게 있다고 할 수 있습니다.
- 뷰나 앵귤러는 프레임워크입니다. 원하는 기능 구현에만 집중하여 빠르게 개발할 수 있도록 기본적으로 필요한 기능을 갖추고 있는 라이브러리를 말합니다. 보통 프레임워크는 라이브러리개념을 포함하고 있습니다. 개발자에게 공통적인 개발 환경을 제공하며 개발할 수 있는 범위들이 정해져있습니다. 라이브러리와는 다르게 개발의 주도권이 프레임워크에게 있다고 말할 수 있습니다. 프레임워크가 개발자의 코드를 사용한다고 보면 됩니다. 그리고 프레임워크는 라이브러리를 포함합니다.
- 하지만 리액트같은 경우는 보통 3대 프레임워크라고 하지만 라이브러리라고도 합니다. 리액트 홈페이지에서도 자신들은 웹 서비스 중에서 사용자 인터페이스 개발을 위해 사용되는 라이브러리라고 말하고 있습니다. 하지만 Hooks, JSX, Redux 등을 사용하기 위해 일정한 규칙과 패턴이 제공기 때문에 개발환경을 리액트에 맞춰야만 작업할 수 있습니다. 그런 것으로 보면 프레임워크로 봐도 무방하지 않을까 합니다.
## 프레임워크 없는 프레임워크다?
- React는 라이브러리(프레임워크)입니다. Hooks, JSX, Redux 등을 사용하기 위해 일정한 규칙과 패턴이 제공됩니다.
- 원래 브라우저는 HTML, CSS, JS만 인식합니다. 그럼 React가 사용하는 위의 기능을 사용하려면 프레임워크 플러그인 붙여야 한다는 이야기입니다.
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>- 물론 우리가 React를 개발할 때 바벨을 사용하기 때문에 직접 붙이거나 하진 않죠?
import React from 'react';
import ReactDOM from 'react-dom';- 이런 식으로 프로젝트 생성하면 자동으로 생성돼서 붙여져서 나옵니다.
- 이런 것들이 붙여져서 나오기 때문에 React구문들을 사용할 수 있습니다.
- 하지만 Svelte은 프레임워크의 틀을 지우는 것부터 시작했습니다. 그래서 외부 CDN으로 연결하는 방식은 따로 없죠.
- Svelte은 이렇게 생각한 것 같습니다. 우리가 자바스크립트를 잘 사용한다면 굳이 저런 규칙과 패턴이 필요할까?라는 거죠.
- 그렇다고 Svelte에 비해 React나 Vue가 나쁘다는 이야기는 아닙니다. 각각의 프레임워크는 각각의 장점을 갖고 있습니다.
- Svelte은 결국 우리가 사용해야 는 것은 자바스크립트다!라고 말하는 것으로 보입니다.
3. Svelte의 장점
- 위의 이미지는 Svelte 공식 사이트의 첫 화면을 가져온 것입니다.
- 첫 화면에 보면 자신만의 장점을 저렇게 배너로 잘 구현해 놓았습니다.
- Write less code : 보다 적은 코드
- No Virtual DOM : 가상 돔 없이
- Truly reactive : 진정한 반응성
- 이렇게 3가지로 잘 정리되어 있습니다.
1) (다른 프레임워크) 보다 적은 코드
- 여러 가지 이유로 코드를 줄일 수 있지만, 간단히 설명하자면 변수 선언부터 간결합니다. 그냥 자바스크립트랑 똑같습니다.
- 리액트는 값을 useState를 통해 관리하고, Vue는 data를 통해 관리하기 때문에 일단 무조건 자바스크립트보단 깁니다.
- 근데 Svelte는 자바스크립트 변수 선언과 같게 사용하므로 코드가 간결합니다.
- 어떤 가요? Svelte이 확실히 간단하게 작성하죠?
2) 가상돔 없이 사용
- Virtual DOM은 DOM에 직접 접근하여 조작하는 것이 아닌, DOM을 자바스크립트 객체 형태로 만들어 메모리에 두고 필요할 때 꺼내서 조작하는 방법입니다. 이것을 우린 가상 돔이라고 합니다.
- 이 가상 돔은 React가 나오면서 많은 개발자들에게 각광받아 온 개념입니다.
- 가상 돔을 만들어도 속도도 나쁘지 않고, React나 Vue를 사용하다보면 자연스럽게 받아들이는 개념이라 어렵지 않습니다.
- 제이쿼리가 DOM을 무겁게 사용해서 다른 프레임워크들이 가상돔을 만들어서 더 빠르게 사용했던 것입니다.
- 하지만 가상돔 없이도 DOM을 무겁지 않게 비슷한 성능과 속도를 낸다면, 과연 가상돔을 쓸 필요가 있을까요?
- Svelte이 가상돔을 사용하지 않고, DOM을 가볍게 제어합니다.
- 그럼 Svelte은 가상돔을 사용하지 않고, 어떻게 DOM을 제어할까요?
- 위는 요즘 프런트엔드 언어들이 웹팩[webpack]을 이용해서 번들링 하는 과정을 그림으로 표시한 것입니다.
- 실제 사이트로 들어가면 애니메이션으로 멋지게 돌아가며 설명하고 있습니다.
- 번들링이란 복잡한 DOM이나 CSS, 요소들을 나눠 Node.js로 작업하고 배포 시 하나의 파일로 모이게 만드는 것을 말합니다.
- 이때 위에 그림에 있는 js들은 하나의 js파일로 모이고, sass나 css로 만든 것은 하나의 css로 모이는 것입니다.
- 리액트나 뷰는 이때 js에 자신의 규칙과 패턴으로 이루어진 자신의 언어로 js파일로 들어가게 됩니다.
- 대신 브라우저가 인식하게끔 라이브러리도 같이 붙여져서 들어갑니다.
- Svelte은 이 과정에서 자신의 언어를 컴파일만 하고, 순수 자바스크립트로 들어가게 됩니다.
- 그래서 Svelte은 자신은 프레임워크라고 소개하지 않고, 최적화된 자바스크립트로 변환하는 컴파일러라고 소개합니다.
- 그리고 라이브러리 없이 순수 자바스크립트로 들어가기 때문에 빌드될 때 용량이 작아진다는 장점도 생기게 됩니다.
3) 진정한 반응성
- Svelte의 마지막 장점은 반응성이 좋다는 점입니다.
- 프런트엔드 개발은 보통 하나의 동작으로 여러 가지를 처리하는 일이 많이 있습니다.
- 메인이벤트가 일어났을 때, 나머지 이벤트들이 자동으로 발생하게 할 수 있다면 개발이 훨씬 편해집니다.
- Svelte은 이 작업을 쉽게 하도록 설계되어 있습니다.
## 클릭할 때마다 숫자가 증가하는 이벤트 제작, 자동으로 제곱 값을 구해주는 코드
<script>
let num = 0;
$: square = num * num;
const incrementCount = () => num = num + 1;
</script>
<button on:click={incrementCount}>
클릭횟수 : {num}
</button>
<p>제곱 값: {square}</p>- 스크립트 안의 코드는 현재 3줄이라는 것은 잘 보면 됩니다.
## 결과 확인
마치며...
- 모든 언어는 다 장단점이 있다고 생각합니다. 그래서 어떤 것이 좋다고 나쁘다고 말하는 것은 아닙니다.
- Svelte는 아직 사용하고 있는 개발자가 많지 않습니다. 그래서 다양한 소스나 깃, 플러그인들이 많지 않다는 것을 단점이라고 볼 수 있겠습니다.
- 그래도 다른 프레임워크에 비해 많이 쉽기 때문에 프런트엔드를 입문한다면 Svelte로 배우면 다른 프레임워크도 쉽게 배우지 않을까요? 그리고 미리 다른 프레임워크를 배웠다면 Svelte는 쉽게 배울 수 있을 것입니다.
- 그리고 계속 변화되는 프런트엔드 환경에서 프론트엔드 개발자라면 어떻게 변화하고 있는지 계속해서 관심 갖고 공부하는 것이 좋을 것입니다.
'웹언어 > Svelte' 카테고리의 다른 글
| [Svelte강좌] 5강 Svelte Event - 오쌤의 니가스터디 (0) | 2022.10.11 |
|---|---|
| [Svelte강좌] 4강 Reactivity(반응성) - 오쌤의 니가스터디 (0) | 2022.10.04 |
| [Svelte강좌] 3강 State(상태값) - 오쌤의 니가스터디 (0) | 2022.09.28 |
| [Svelte강좌] 2강 컴포넌트 - 기본사용법 - 오쌤의 니가스터디 (0) | 2022.09.26 |
| [Svelte강좌] 1강 스벨트 개발환경 구축(설치) - 오쌤의 니가스터디 (0) | 2022.09.22 |
