Svelte로 시작하는 웹 프런트엔드

세계적으로 관심이 높아지고 있는 프런트엔드 프레임워크, Svelte(스벨트)의 핵심 사용방법을 정리한 기초 강의입니다. 한국의 좀 더 많은 분들이 Svelte를 쉽고 편리하게 이용하기를 바라는 마음에서 강의를 만들었습니다.

(4.9) 수강평 21개

수강생 970명

Indie Coder

Svelte

초급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.

이런 걸 배울 수 있어요

Svelte (스벨트)
웹 프런트엔드 기초

떠오르는 FE 대세 스벨트(Svelte)
기초부터 쉽고 빠르게!

Svelte라고 들어보셨나요?

Svelte는 현재 전세계 프런트엔드 시장에서 가장 주목받고 있는 프레임워크입니다. React(리액트)나 Vue(Vue.js)보다 다소 늦게 세상에 나왔지만 후발 주자임에도 불구하고 이들 이상의 큰 기대를 받고 있습니다.

StactOverflow 및 Stateofjs 등을 보면 얼마나 많은 개발자들이 Svelte에 관심을 갖고 있는지를 한눈에 알 수 있습니다.

_{StackOverflow 연말 서베이}

_{State of JS 2022 자바스크립트 프레임워크/라이브러리 순위}

이런 것들을 배워요 ✒️

스벨트 도서 저자 직강!

이 강의는 ‘스벨트로 시작하는 웹 프런트엔드’ 도서의 일부 챕터를 영상으로 만든 강의입니다.
(선수 지식: HTML/CSS 및 JavaScript 기초)

컴포넌트 단위로 개발되는 프런트엔드의 기본을 Svelte를 이용해서 배우게 됩니다. 컴포넌트의 핵심 기능인 통신 방법, 이벤트 조작, 화면 효과 등을 통해서 화면에 보여지는 결과물들이 어떻게 Reactive하게 만들어지고 조작되는지를 익힐 수 있습니다. (HTML, JavaScript & Svelte)

✅ Svelte 기초 문법
✅ 컴포넌트간 통신방법
✅ 화면 전환 애니메이션
✅ 이벤트 조작 방법
✅ 반응형 코드를 통한 Reactive한 프로그램 기법

스벨트로 쉽게 만드는 FE 결과물 👀

Svelte가 가진 특징은 많지만 가장 큰 특징은 쉽다는 점입니다. 자바스크립트 기초 지식만 있다면 정말 쉽게 배우고 곧바로 어떤 결과물을 만들어 볼 수 있습니다.

프런트엔드 개발이 처음인 개발자 분들도 강의를 통해 대략적으로 프런트엔드 개발이 어떤 식으로 진행되는지 알 수 있도록 강의에서는 이 Svelte 프레임워크를 사용하는데 필요한 필수적인 내용만을 선별해서 진행됩니다.

이런 분들께 추천합니다 🙆‍♀️

_{프론트엔드 개발에 관심이 있는 누구나}

_{좀 더 빠르게 무언가를 만들고 싶은 분}

_{Svelte에 대해 한번쯤 들어보신 분}

_{프론트엔드에 도전하고 싶은 디자이너, 퍼블리셔}

Q&A 💬

Q. 강의 난이도가 어떻게 되나요?

HTML, Javascript에 대한 기초적인 지식이 있는 분이라면 누구나 학습 가능합니다. Svelte에 관한 내용중에서 복잡하고 덜 중요한 부분들은 제외하고 필수로 알아야 하는 부분들만 간추려서 만든 Svelte 기초 강의입니다.

Q. 개발 환경은 어떻게 되나요?

macOS, Windows, Linux 등 Node.js를 설치할 수 있는 어떤 PC에서라도 개발환경에 필요한 프로그램을 설치하고 진행할 수 있습니다.

이런 분들께
추천드려요!

학습 대상은
누구일까요?

프런트엔드 개발에 관심이 있는 누구나
좀 더 빠르게 무언가를 만들고 싶은 분
Svelte에 대해 한 번쯤 들어보신 분
디자이너 또는 퍼블리셔에서 프런트엔드에 도전하고 싶은 분

선수 지식,
필요할까요?

HTML 및 CSS 기초
JavaScript 기초

안녕하세요
Indie Coder입니다.

2,357

명

수강생

개

수강평

개

답변

4.9

점

강의 평점

개

강의

2000년도 중반부터 본격적으로 웹개발을 시작하여 현재까지 프리랜서 개발자로 활동하고 있습니다. 약5년간 Amplix BI 솔루션 실무자 교육을 진행하고 개발을 지원하며 새로운 기술을 효율적으로 전달하는 것에 대한 많은 경험과 고민을 했습니다.

현재는 개발 업무와 함께 개발자들에게 도움이 될만한 웹관련 분야의 새로운 기술을 찾고 강좌와 책을 통해 공유하고 있습니다.

현) 프리랜서

전) (주) 비즈플러그 전략솔루션 사업부 팀장

전) (주) 퍼니몽키스 위니스토리 서비스 개발 팀장

youtube: https://www.youtube.com/channel/UC3cJspjF4TRTyD_RS0azeaw

email: freeseamew@gmail.com

blog1: https://medium.com/freeseamew

blog2: https://dev.to/freeseamew

강좌 목록

출간도서

yes24, 교보문고, 알라딘

커리큘럼

전체

5개 ∙ (1시간 6분)

섹션 1. svelte로 시작하는 웹프런트엔드

5개 ∙ (1시간 6분)

1. Svelte 기본 문법
27:14
2. Svelte의 store를 활용한 전역 상태 관리
09:20
3. slot을 이용한 효율적인 컴포넌트 재사용
09:42
4. 컴포넌트간 화면전환(transition)
15:03
5. Svelte 개발환경 설치
04:49

강의 게시일: 2023. 04. 03.

마지막 업데이트일: 2023. 04. 04.

수강평

전체

21개

4.9

21개의 수강평

qkralswgud13246879
수강평 2
∙
평균 평점 5.0
2025. 03. 11.
5
100% 수강 후 작성
vincentmattari8178
수강평 2
∙
평균 평점 5.0
2025. 01. 22.
5
100% 수강 후 작성
It seems to be very helpful for those who are new to Svelt.
jackyu0721
수강평 3
∙
평균 평점 5.0
2025. 05. 28.
수정됨
5
100% 수강 후 작성
A good lecture where you can get a light introduction to what Svelte is! The downside is that some chapter materials require going to YouTube to check? This part can actually be resolved by typing it out yourself : ) Thank you for the good lecture ~
ppipa20102977
수강평 4
∙
평균 평점 5.0
2025. 01. 30.
5
100% 수강 후 작성
dorushi1067
수강평 2
∙
평균 평점 5.0
2025. 01. 05.
5
100% 수강 후 작성
The explanation is very easy to understand.

Indie Coder님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

Next-Generation Node.js Backend Server Development (with Fastify & Prisma & Typescript)

holocoding

A course to learn the latest Node.js backend REST API using fastify, a Node.js framework boasting high speed, ORM Prisma, and Typescript.

초급

Node.js, TypeScript, Prisma

Svelte REST-API project

holocoding

This lecture is a video lecture on the latter part of the book, ‘Web Frontend with Svelte’, which I wrote, about creating a SLOG project. I prepared this lecture in the hope that it would supplement the parts that were a bit lacking in the book and make more people interested in the frontend framework called Svelte.

초급

Svelte, REST API

Complete Mastery of GraphQL (Full-stack Course Learning by Building a Kiosk) - [2024 Partial Renewal]

holocoding

You will learn the basics and advanced usage of GraphQL, the next-generation API control technology, and gain real-world project experience through a virtual kiosk service created with GraphQL. The course has been partially updated to the latest version, apollo-server v4, as of February 2024.

초급

GraphQL, Svelte, MongoDB

Learn Svelte by Building

holocoding

This course will teach you the latest front-end framework, Svelte. After learning the basics of Svelte, you will learn how to use Svelte in real projects by creating a Todo app.

초급

Svelte

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

Svelte Introductory Course - A to Z

beomy

This is an introductory lecture on Svelte, which threatens the position of the three front-end giants React, Vue, and Angular. Based on the official Svelte documentation, it covers all of Svelte grammar from A to Z.

초급

Svelte

Learn Svelte (SvelteKit + Supabase) easily with projects

csslick

Systematic step-by-step project practice and deployment, built-in store utilization, full-stack application with SvelteKit and Supabase, all in one go!

초급

Svelte, sveltekit, supabase

Svelte REST-API project

holocoding

초급

Svelte, REST API

Svelte Practical Tutorial - Creating Sudoku

beomy

You can create a web game using Svelte, Express, JWT, and MongoDB. Those who want to cover both the FrontEnd and BackEnd are welcome!

중급이상

Svelte, Express, MongoDB

Complete Mastery of GraphQL (Full-stack Course Learning by Building a Kiosk) - [2024 Partial Renewal]

holocoding

초급

GraphQL, Svelte, MongoDB

연관 로드맵

강의가 포함된 로드맵으로 학습해 보세요!

자바스크립트 웹개발의 모든 것

Indie Coder

Svelte로 시작하는 웹 프런트엔드

초급자를 위해 준비한 [프론트엔드, 웹 개발] 강의입니다.

이런 걸 배울 수 있어요

Svelte라고 들어보셨나요?

이런 것들을 배워요 ✒️

스벨트 도서 저자 직강!

스벨트로 쉽게 만드는 FE 결과물 👀

이런 분들께 추천합니다 🙆‍♀️

Q&A 💬

이런 분들께 추천드려요!

안녕하세요 Indie Coder입니다.

강좌 목록

출간도서

커리큘럼

수강평

Indie Coder님의 다른 강의

비슷한 강의

연관 로드맵

초급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.

이런 분들께
추천드려요!

안녕하세요
Indie Coder입니다.