Svelte 입문 강의 - A부터 Z까지
Svelte 입문 강의 - A부터 Z까지
수강정보
(3개의 수강평)
56명의 수강생
스킬태그 #Front-End, #웹 개발, #Svelte
25% 할인, D-5
24,750원
33,000원
지식공유자 : 이효범(Beomy)
74회 수업 · 총 5시간 24분 수업
기간 : 평생 무제한 시청
수료증 : 발급 강의
수강 난이도 : 초급
지식공유자의 다른 강의 연관 로드맵
아직 다른 강의가 없어요
연관 로드맵이 없어요

이 강의는

React와 Vue, Angular 프론트엔드 3대장의 자리를 위협하는 Svelte 입문 강의입니다. Svelte 공식 문서를 토대로 Svelte 문법을 A부터 Z까지 모두 다룹니다.

이런 걸 배워요

  • 프론트엔드 개발
  • 웹 개발
  • Svelte 사용방법

처음 만나는 스벨트, A부터 Z까지 새롭게 시작해보세요! 

강의 소개 📝

 

리액트, , 앵귤러
프론트엔드 3대장 자리를 위협하고 있는!!

Svelte(스벨트)입문 강의입니다.

 

Svelte 공식 문서Beomy 블로그를 토대로 Svelte 사용법을 A부터 Z까지 모두 이야기합니다. Svelte를 익히기 위해 이 강의 저 강의, 이 블로그 저 블로그 살펴볼 필요 없이 Svelte 입문 강의를 들으시면 한번에 해결하실 수 있습니다!

이 강의를 들으신 후에는 Svelte를 사용하여 웹페이지 개발을 하실 수 있도록 쉽게 설명해 드립니다. :)

왜 Svelte를 배워야 하나요? ✒️

Svelte는 2019년에 등장해 무럭무럭 자라나고 있는 새로운 프론트엔드 프레임워크입니다.

▲ Svelte 관심도 보기

2019년에 등장한 후속 주자이지만, 많은 분이 관심을 가지고 계신 프레임워크입니다. 많은 분이 관심을 가지는 이유가 당연히 있겠죠?

Svelte는 가상돔을 사용하지 않아서, React와 Vue와 다른 패러다임을 제시한 프레임워크입니다. 많은 분의 관심을 두게 만든 힘은 Svelte의 성능이 커 보입니다.

▲ Svelte 성능 보기

Svelte는 프론트엔드 3대장들보다 빠른 퍼포먼스로 충분히 매력있는 프레임워크입니다. 시간이 좀 더 지나면 React나 Vue만큼 많은 곳에 찾는 프레임워크로 자라날 가능성을 가진 루키입니다!

이 강의에서 배우는 것들 ✏️

Svelte의 공식 문서에 있는 내용을 A부터 Z까지 모두 이야기합니다. 이 강의 하나면 Svelte 시작은 거뜬히 하실 수 있습니다. 강의에서 진행하는 18개의 섹션을 6가지로 요약하면,

  • 화면을 반응형으로 업데이트하기 위한 문법
  • HTML 태그에 데이터 바인딩 방법
  • 컴포넌트 라이프 사이클
  • Svelte에서 Store 사용하기
  • Svelte에서 애니메이션 사용하기 (Motion, Transition, Animation)
  • Svelte 고급 문법 (Action, Slot, Context, 내장 요소)

이렇게 나뉠 수 있습니다. Svelte 고급 문법 또한 알아두시면 유용하게 사용될 수 있습니다.
이 강의에서 이야기하는 내용은 모두 Svelte의 핵심만 다루었습니다.

강의 특징 💡 

이론 강의만 있는 것이 아닙니다. Svelte의 문법들을 전부 코드로 실습하면서 알아보는 강의입니다. 직접 따라하면서, 코드와 실행 결과를 보면서 쉽게 Svelte를 이해할 수 있는 강의입니다.

예상 질문 Q&A 🙋🏻‍♂️ 

Q. 비전공자도 들을 수 있나요?
A. 비전공자분들도 들을 수 있는 어렵지 않은 강의입니다. 다만 HTML과 JavaScript, CSS 기초를 알고 있다 가정하고 강의를 진행하기 때문에 HTML, JS, CSS의 기본 지식이 있으시다면 더욱 쉽게 이해하실 수 있습니다.

Q. Svelte를 배우면 무엇이 좋은가요?
A. Svelte는 아직 신규 프레임워크이지만, 많은 분이 관심을 가지고 지켜보고 있습니다. React나 Vue처럼 유명해지는 것은 시간문제라고 저는 생각됩니다. 더 유명해지기 전에 미리 기술을 습득하고 선점해놓는 것은 어떨까요?

Q. 이 강의만의 특별한 장점이 있을까요?
A. 이 강의는 Svelte의 공식 문서를 토대로 진행하였습니다. 공식 문서에서 이야기하는 부분만 이야기하는 (검증된?) 강의입니다. Svelte 공식 문서를 처음부터 끝까지 훑어보는 강의이기 때문에 다른 강의를 들을 필요 없이 이 강의 하나면 Svelte 입문하실 수 있습니다. 이론으로만 끝나는 것이 아니라 Svelte 사용 방법을 강의마다 실습으로 진행하는 강의입니다.

도움 되는 분들

  • 프론트엔드 개발자로 입문하시는 분들
  • Svelte를 공부하고 싶으신 분들
  • 최신 프론트엔드 트랜드에 관심이 있으신 분들

선수 지식

  • ES6+

교육과정

모두 펼치기 74 강의 5시간 24분
섹션 1. 기초 문법
5 강의 14 : 41
데이터 정의
02 : 45
속성 정의
05 : 02
스타일 정의
01 : 57
컴포넌트 정의
02 : 59
HTML 문자열 표현
01 : 58
섹션 2. 반응형을 위한 문법
3 강의 14 : 16
이벤트 리스너
03 : 33
$ 문법
05 : 06
주의해야할 것들
05 : 37
섹션 3. Props
3 강의 10 : 07
정의 방법
02 : 39
기본값 설정
03 : 21
Spread 문법 사용하기
04 : 07
섹션 4. 논리 블록
4 강의 17 : 17
조건문 블록
03 : 21
반복문 블록
02 : 50
반복문 블록에 Key 지정하기
06 : 14
await 블록
04 : 52
섹션 5. 이벤트 다루기
5 강의 21 : 31
DOM 이벤트
05 : 21
인라인 핸들러
02 : 54
이벤트 수식어
03 : 37
컴포넌트 이벤트
05 : 03
컴포넌트 이벤트 발생시 주의사항
04 : 36
섹션 6. 데이터 바인딩 기초
5 강의 21 : 50
input 태그
08 : 13
textarea 태그
01 : 55
select 태그
03 : 50
contenteditable 기능
02 : 30
Each 블록 바인딩
05 : 22
섹션 7. 데이터 바인딩 고급
4 강의 16 : 01
Media 태그
04 : 00
Dimension 바인딩
04 : 32
this 바인딩
03 : 35
컴포넌트 Props 바인딩
03 : 54
섹션 8. 라이프 사이클
6 강의 33 : 47
라이프 사이클이란
02 : 07
onMount
06 : 44
onDestroy
06 : 10
라이프 사이클 모듈화
04 : 22
beforeUpdate와 afterUpdate
05 : 14
tick
09 : 10
섹션 9. Store
7 강의 30 : 17
Store를 사용하는 이유
01 : 51
Writable stores
09 : 18
Store 자동 구독
03 : 00
Readable stores
03 : 36
Derived stores
04 : 08
Custom stores
04 : 42
Store bindings
03 : 42
섹션 10. Motion
3 강의 13 : 11
Motion이란
01 : 15
Tweened
04 : 47
Spring
07 : 09
섹션 11. 트랜지션
6 강의 25 : 45
트랜지션 사용하기
03 : 01
트랜지션 종류
05 : 06
트랜지션 In/Out
03 : 00
커스텀 트랜지션
06 : 08
트렌지션 이벤트
04 : 19
트렌지션 수식어
04 : 11
섹션 12. 애니메이션
3 강의 10 : 35
애니메이션 사용하기
04 : 28
커스텀 애니메이션
03 : 03
애니메이션 사용시 주의사항
03 : 04
섹션 13. 액션
1 강의 08 : 54
액션 만들기
08 : 54
섹션 14. Slot
4 강의 12 : 08
Slot 사용하기
02 : 12
Default Slot
01 : 29
Named Slot
03 : 10
Slot props
05 : 17
섹션 15. Context API
2 강의 15 : 33
Context 사용하기
05 : 02
Context와 Store
10 : 31
섹션 16. Svelte 요소
7 강의 33 : 52
<svelte:self>
03 : 57
[실습] <svelte:self> - JSON parser 만들기
09 : 56
<svelte:component>
05 : 04
<svelte:window>
04 : 46
<svelte:body>
02 : 25
<svelte:head>
01 : 22
<svelte:options>
06 : 22
섹션 17. Module context
2 강의 05 : 11
코드 공유
03 : 14
코드 내보내기
01 : 57

공개 일자

2020년 8월 4일 (마지막 업데이트 일자 : 2020년 9월 9일)

수강 후기

4.7
3개의 수강평
default_profile.png
keh7264 1달 전
좋아요 ^^
이효범(Beomy)

이효범(Beomy) 1달 전
감사합니다 :)

image
개발자 PAPICO 1달 전
아직 중반쯤 듣고 있지만, 단순히 공식 홈페이지를 보고 공부하는 것 보다 정리가 잘되고, 제가 이해했던 부분을 지식공유자님께서 어떤 방식으로 해석하고 계신지 알 수 있어서 좋은 것 같습니다. React, Vue 를 사용해보신 분중에 새로운 기술에 관심이 있으신 분들은 Svelte와 다른 프레임워크나 라이브러리를 비교하면서 공부하는 것도 재미있을 것 같습니다! 강의 다 듣고 다시 한번 남기도록 하겠습니다. 좋은 지식 공유 감사합니다!
이효범(Beomy)

이효범(Beomy) 1달 전
첫 수강평 느낀점 자세히 써주셔서 감사해요~~

default_profile.png
terecal 22일 전
89퍼센트 contextApi 까지 듣고 강의평을 남겨여 이 강의는 강사님이 예제 중심으로 실습과 함께 기본 개념을 알기 쉽게 설명해주셨는데 초보자 입장에서 이해하고 학습하기 좋은 방식인것 같아여 챕터가 좀 많긴 했지만 꼼꼼하게 강의해주시고 실습 결과까지 바로 확인하기 때문에 진도를 나가는게 어렵지 않고 재미 있었던것 같습니다 만약 이 강의를 들으실 분들이 자바 스크립트 기초가 부족하다면 가끔 헤멜수도 있지만 w3chools.com 같은데 기초 문법 예제는 많으니까 참고하시면 될거 같아여 아직 대세가 될지 확신할수 없는 유망주 프레임 워크이긴 하지만 사이드 프로젝트에서 활용되기에는 뷰나 리액트 보다 오히려 좋은점이 많은것 같아여 제 실력으로는 이 강의만 들어서 바로 백엔드 프론트 엔드 다 구현할수 있는 실력이 없지만 이후 강의도 만들어주실 계획이라고 하셔서 기대하는 중이에여~! 뷰나 리액트 이후에 두번째로 새로운 프론트 엔드 프레임 워크 강의를 듣고자하시는분들은 부담 없이 지르셔도 된다고 생각합니다 인프런에서 이런 훌륭한 강사님은 전속 강사로 채용해주시면 안될까여 ㅋㅋ; 감사합니다
이효범(Beomy)

이효범(Beomy) 21일 전
terecal님 감사합니다. :) 훌륭한 강사님이라니... 정말 과분한 칭찬을 주신 것 같아서 너무 감사드립니다. 제가 공부해 볼 때 예제로 살펴보는 것이 이해가 쉬운 것 같아 예제 중심으로 강의를 준비했는데, 이렇게 좋은 평가 주시니 감격스럽습니다. 강의 중에 부족한 부분이 있다면 언제든 알려주시면 보강하도록 하겠습니다. 엄청난 칭찬을 받았으니! 다음 강의는 더 열심히 만들어 보겠습니다! 감사합니다 :)

지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스