이 글은 노마드 코더 Nomad Coders의 유튜브 영상인 배워야할까? 스벨트 10분 완벽 정리해드림. 영상을 보고 작성하였습니다.
Svelte란?
Svelte(스벨트)는 인터렉티브 웹사이트를 구축하는 툴이다.
작년 스택 오버플로우에서 가장 많이 사랑받는 웹 프레임워크로 뽑혔다.
영상에서 다루는 주제
- Svelte가 무엇이고, 어떻게 동작하는지
- 리액트와 어떤 점이 다른지, 어떻게 동작하는지
- 어떻게 리액트보다 빠른지
- 개발자들이 왜 좋아하는지
React, Vue와 다른점
Svelte는 리액트처럼 인터렉티브 웹을 구축한다. But, 구축하는 방법이 다르다.
React, Vue와 다르게 Svelte는 라이브러리, 프레임워크가 아니다.
Svelte는 컴파일러에 가깝다.
리액트로 웹 서비스를 빌드하면 제작하고 배포를 하게 되면, 유저가 웹 사이트에 들어올 때 2가지 종류의 코드를 다운받아야 한다.
- 우리가 작성한 코드. 이것은 우리의 애플리케이션을 구성하는 코드들이다.
- ReactJS의 코드. 왜나면 우리가 쓴 코드가 ReactJS를 사용하니까.
즉, 애플리케이션을 사용하기 위해서는 유저는 리액트도 다운받아야 하는 것이다. 이는 일종의 표준화된 방식이기도 하다. 개발자가 jQuery를 사용하면 유저도 jQuery를 다운받아야 하는 것 같이. 그래야 너의 코드를 사용할 수 있다.
오래전 Svelte의 홍보 문구는 스르륵 사라지는 마법의 UI 프레임워크(The magical disappearing UI framework)였다.
왜나면 실제로 그러하다 스스륵 사라진다!
동작 방법
Svelte로 코딩하고 배포를 할 때 Svelte는 알아서 코드를 분석하고 컴파일을 자동으로 한다. 브라우저가 바로 이해할 수 있는 JS코드로! 브라우저에게 별도로 Svelte가 무엇인지 설명할 필요가 없다.
즉, 유저가 Svelte를 사용하는 웹에 방문하면 어플리케이션 작업 수행에 필요한 코드만 주면 된다.
용량
덕분에 Svelte 코드가 쓰인 앱 사이즈는 엄청 작다.
Svelte로 To do 앱을 작성했을 때 3.6KB이고, 같은 내용은 React로 짜면 45KB이다.
Svelte는 리액트, 뷰보다 훨씬 빠르다. Svelte는 바닐라JS와 같은 스피드를 보여준다.
실제로 Svelte 공식 웹에서 바닐라JS와 스피드가 속도가 같다고 밝혔다. 이는 사실이다. Svelte가 곧 바닐라JS니까.
컴파일러 덕분에 Virtual DOM이라는 걸 쓰지 않아도 된다.
😎 잠시 Virtual DOM 설명
Virtual DOM은 앱의 UI를 나타내는데, 리액트JS가 메모리에 보관하고 있다. 이는 유저가 보고있는 실제 UI와 가끔 동기화되는데, 덕분에 리액트JS로 하여금 새로고침이 필요한 요소를 찾아 유저에게 변경된 UI를 보여주게 된다.
리액트가 처음 출시되었을 때, 변경사항 체크를 위해 UI 사본을 메모리에 저장하는 것은 그 어떤 프레임워크도 하지 않는 놀라운 방법이었다.
하지만, Svelte에선 더 나아가서 Virtual DOM이 필요없다. 왜냐면 컴파일러가 더욱 최적화된 JS 코드를 만들어서 더욱 빠른 속도고 UI를 새로고침할 수 있기 때문이다.
개인적으로 Virtual DOM의 유무는 큰 중요사항이 아니라 생각한다. 사실 Inferno 처럼 Svelte 보다 빠른 프레임워크가 있는데, Inferno는 Virtual DOM을 사용하기 때문이다. (띠용 👀)
Svelte를 왜 좋아하나?
개인적으로 사용해보고 인터넷 커뮤니티를 살펴본 결과 가장 큰 이유는 '개발 경험(Developer Experience)' 때문이다.
리액트, 뷰와 비교하여 Svelte로 개발하는 것이 좋다. Svelte 만든 사람들이 개발 경험을 정말 중요시 한 것 같다.
또한 리액트, 뷰 경험이 있다면 배우기도 쉽고 직관적이다.
어떤 느낌이냐면 Java 개발하며 모든 규칙에 얽매여있다가, 파이썬으로 넘어와서 넘나 쉽고 규칙없음에 기뻐하는 것과 비슷하다.
Sveltet로 카운터를 만들어보면 그게 뭔말인지 알거다!
Svelte 컴포넌트의 3요소
- Script Tag
- Style Tag
- HTML Tag (?)
뷰 개발자라면 꽤 친숙할 것이다. hook, state 같은 걸 배울 필요도 없다.
Svelte의 좋은 개발 경험
한 번만 클릭하도록
유저가 1번만 클릭하도록 제한하고 싶으면 Script Tag 에 코드를 적을 필요 없이, on-click 에 |once 만 추가해주면 된다. 이것이 개발 경험이 좋다는 뜻이다.
bindings
bindings 를 사용하면 유저로부터 입력을 쉽게 받을 수 있다.
소스를 이렇게만 적어주면 <input> 에서 입력 받은 값을 화면에 보여줄 수 있다.
유저가 입력을 하지 않았을 땐 if/else로 UI를 변경해보자. 그럼 소스를 아래와 같이 적으면 된다.
Svelte는 binds, once 같은 것들로 리액트처럼 직접 구현하지 않게끔 시간을 줄여준다.
또한, 코드가 직관적이라 처음 보는 사람도 어렵지 않게 읽을 수 있다.
Svelte는 누가 배워야 하는가?
당신이 리액트, 뷰 개발자인데 지겨워졌고, 더 간단한 것을 원하고 새로운 것을 시도하고 싶다면 good chioce이다.
당신이 초보자이고 취업을 준비한다면 리액트, 뷰를 추천한다.
요즘 2022 Web Trends를 살펴보면 Svelte에 대한 언급이 빠지지 않는 것 같다. 노마드코더 채널에 Svelte에 대한 영상이 나와서 후다닥 살펴보았는데, 유저가 웹에 방문할 때 React나 Vue 소스를 다운받을 필요 없다는 점이 인상적이다. 문법 또한 직관적이고 정말 심플하다 (이게 된다고? 🤭)! 토이 프로젝트로 만들어보면서 왜 핫한지 체감해보고 싶다 👍!
