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

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

(4.9) 수강평 21개

수강생 978명

Indie Coder

3시간 만에 완강할 수 있는 강의 ⏰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,369

명

수강생

개

수강평

개

답변

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개의 수강평

재영
수강평 3
∙
평균 평점 5.0
2025. 05. 28.
수정됨
5
100% 수강 후 작성
Svelte란 어떤것이다 ! 라는 것을 가볍에 들어볼 수 있는 좋은 강의 아쉬운 점이라면, 일부 챕터 자료가 youtube로 들어가서 확인해야 하는 것 정도 ? 이 부분도 사실 직접 치면 해결되는 부분이긴합니다 : ) 좋은 강의 감사합니다 ~
Heuido Kim (백년지계)
수강평 2
∙
평균 평점 5.0
2025. 01. 05.
5
100% 수강 후 작성
설명 쉽게 너무 잘해주십니다.
Park-min-hyoung
수강평 2
∙
평균 평점 5.0
2025. 03. 11.
5
100% 수강 후 작성
이현준
수강평 4
∙
평균 평점 5.0
2025. 01. 30.
5
100% 수강 후 작성
김경태
수강평 2
∙
평균 평점 5.0
2025. 01. 22.
5
100% 수강 후 작성
스벨트를 처음 접하는 분들에게 많은 도움이 될 듯합니다.

Indie Coder님의 다른 강의

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

차세대 Node.js 백엔드 서버 개발(Fastify & Prisma & Typescript와 함께하는)

Indie Coder

₩44,000

초급 / Node.js, TypeScript, Prisma, REST API, fastify

4.5

(2)

빠른 속도를 자랑하는 Node.js 프레임워크 fastify 와 orm Prisma 그리고 Typescirpt를 활용한 최신 Node.js 백엔드 REST API를 학습하는 코스

초급

Node.js, TypeScript, Prisma

Svelte REST-API 프로젝트

Indie Coder

무료

초급 / Svelte, REST API

5.0

(12)

900+

이 강의는 제가 집필한 ‘스벨트로 시작하는 웹 프런트엔드’ 라는 책의 후반부 SLOG 프로젝트 만들기 부분에 대한 영상 강의입니다. 책에서 조금 부족했던 부분들을 보완해, 좀 더 많은 분들이 Svelte라는 프런트엔드 프레임워크에 대해 관심을 갖길 바라는 마음에서 이 강의를 마련했습니다.

초급

Svelte, REST API

GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]

Indie Coder

₩55,000

초급 / GraphQL, Svelte, MongoDB, Apollo

4.5

(6)

200+

차세대 API 제어 기술인 GraphQL의 기본과 고급 사용법 그리고 GraphQL로 만들어 가는 가상의 키오스크 서비스를 통해서 실제 프로젝트 경험을 학습하게 됩니다. 강좌는 2024년 2월 기준 가장 최신 버전인 apollo-server v4로 강좌를 부분 업데이트 했습니다.

초급

GraphQL, Svelte, MongoDB