[svelte] AI교육 사이트 만들기 3 - 프레임워크 선택(svelte)

Svelte란?

---

출처: 나무위키

svelte는 2016년 출시된 새로운 웹 개발 프레임 워크이다. 제작자가 리치 해리스란 사람인데...facebook같은 회사에 react팀이 있는 것에 비하면 개인이 만들었다는 점이 인상적이다. 물론 많은 기여자들이 있긴 하겠지만 이렇게 제작자가 명확히 있는 프레임워크도 드물다.

공부하면서 스택오버플로우를 찾아볼 때에도 리치해리스가 직접 답변을 해주는 부분이 재미있었다. 상당히 고퀄의 답변을 달아놔서 도움이 많이 됐다.

svelte는 기존의 프레임워크들과는 다른 몇 가지 특징이 있는데 그 특징을 알면 svelte가 대충 어떤 프레임워크인지 짐작이 갈 것이다.

	기존 프레임 워크	Svelte
정체성	프레임워크	컴파일러
번들크기	보통	매우 작음
작동	런타임	빌드
가상 DOM	사용	사용하지 않음

런타임이 지속적으로 가상DOM을 활용하여 DOM을 업데이트 해주는 다른 프레임워크과는 매커니즘이 다르다. svelte로 작성된 코드를 build 하면 바닐라코드로 컴파일한다.

결국 svelte 는 바닐라코드를 작성하기 편한 방편일 뿐 런타임에 영향을 주는 프레임워크는 아니다.

Svelte를 선택한 이유..

---

Framework	React	Svelte
학습시간	⭐⭐⭐	⭐⭐⭐
난이도	⭐	⭐⭐⭐
유지보수	⭐⭐	⭐⭐⭐
속도	⭐⭐	⭐⭐⭐
안전성	⭐⭐⭐	⭐
래퍼런스	⭐⭐⭐	⭐

Vue나 Angular는 이미 그 인기가 React에 비해 많이 떨어지는 것 같아 고려에 두지 않았고 최근에 상승세인 Svelte를 고려해 보았다. 공교롭게도 두 프레임워크의 별이 14개로 같았다. 하지만 사실 React는 경험이 별로 없었고 어차피 거의 새롭게 배워야 하는 상황에서 가장 최신의 프레임워크를 경험해보고 싶은 마음이 있었다. 또한 잠깐 훑어본 결과 React보다 쉬워보였다. 물론 더 깊이 들어가면 더 어려울 수도 있지만 내가 엄청난 대규모의 웹서비스를 만들 것도 아니고 개인이 하기엔 조금이라도 더 쉬워야 생산성도 높고 유지보수도 쉽기 때문에 Svelte를 프레임워크로 선택했다.

또한 잠깐 홈페이지의 튜토리얼을 해본 느낌은 신빅하고 재미있었다. 문법도 상당히 쉬운 편이었고 직관적인 느낌이 들었다.

공부하기

---

공부하기 가장 좋은 방법은 홈페이지의 튜토리얼을 보는 것이다. 튜토리얼이 상당히 잘 되있다. 물론 영어를 조금 이해해야 되지만 번역기를 돌려가면서 해도 큰 무리는 없었다.

Svelte tutorial

Welcome to the Svelte tutorial. This will teach you everything you need to know to build fast, small web applications easily. You can also consult the API docs and the examples, or - if you're impatient to start hacking on your machine locally - the 60-second quickstart.

https://svelte.dev/tutorial/basics

홈페이지 튜토리얼을 공부하고 나서 유튜브를 참고해서 todo-list 나 tic-tac-toe 같은 쉬운 프로젝트를 진행해보는게 도움이 될 듯하다.

국내에는 참고할 만한 svelte 자료가 별로 없는 듯 하다. 보통 svelte 홈페이지의 turorial을 번역해서 쭉 늘어놓은 자료가 대부분이었고 자신의 말로 설명했으면 보통 내용이 부족했다.

💡

팁: tutorial은 간단한 설명과 이에 관련된 문제를 해결하는 형식이어서 설명 부분만 해석해 놓은 건 영어를 모르겠을 때 유용하긴하다.

Uploaded by N2T