만들면서 배우는 Svelte

JS 프론트엔드 프레임워크의 뉴페이스, Svelte를 만나보세요.

주제 소개 📝

2019년 들어 가장 핫하게 관심이 높아진 프론트엔드 프레임워크 Svelte(스벨트)를 배워보는 강좌입니다.

왜 배워야 하는지 ✒️

^{▲ Svelte 로고}

현재는 React, Vue.js 등 다양한 프론트엔드 프레임워크가 있습니다. 각각의 프레임워크들은 서로 다른 철학과 방법론을 가지고 있습니다.
Svelte는 보다 적은 코드로 완벽한 리액티비티 구현을 대표적인 특징으로 내세우는 프레임워크입니다.

다음 코드는 State를 각기 다른 프레임워크로 구현해 본 예시입니다. 보시면 코드량의 확연한 차이를 알 수 있습니다.

^{▲ 타 프레임워크에 비해 코드량이 단연 적은 Svelte}

사실 각기 프레임워크들은 다르긴 하지만 모두 비슷한 개념을 갖고 있기도 합니다. 만약 프론트엔드가 처음이라면 현재 나온 프레임워크 중에서 가장 배우기 쉽기 때문에 Svelte를 먼저 익히고 나면 다른 프레임워크를 익히는 데에도 많은 도움이 되어줄 것으로 생각됩니다.

그리고 기존에 다른 프레임워크를 이미 사용하고 계신 분이라면 Svelte를 배우는 게 그리 어렵지 않을 것이고, 계속해서 변하고 있는 프론트엔드가 어떤 방향으로 갈 것인지에 대한 거시적인 시야를 넓히는 데에 좋은 경험이 되지 않을까 하는 생각을 해봅니다.

섹션마다 간단한 소개 📖

• 0~4강: Svelte 기초
• 5강: Svelte를 이용한 To-do 서비스 개발
• 6강: To-do 서비스를 Store를 이용해 리팩토링
• 7강: Router 적용
• 8강: Ajax 처리
• 10강: 강의에 필요한 간단한 Javascript 기타 문법

강의 결과물 🧰

저희가 최종적으로 만들게 되는 앱의 모습입니다. 단순한 Todo앱이지만, 여기서 배운 패턴들을 확장하시면, 실제 프로젝트에서도 사용이 가능할 것입니다.

^{▲ Svelte로 만든 To-Do 앱}

수업 소스 & 교재 💡

• 2-4강까지의 예제 
  https://github.com/freeseamew/svelte-tutoral-basic-example

• Todo 기본 예제
  https://github.com/freeseamew/todo-svelte-basic

• Todo 리팩토링 + Routift + Ajax
  https://github.com/freeseamew/todo-svelte-store

• 만들면서 배우는 Svelte (e-Book 교재) - todo실습 노트는 교육사이트에서 수강자만 다운가능합니다.
  https://freeseamew.gitbook.io/svelte/