Thumbnail
개발 · 프로그래밍 프론트엔드

Svelte 입문 강의 - A부터 Z까지 대시보드

(4.5)
11개의 수강평 ∙  176명의 수강생

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+

안녕하세요
이효범(Beomy) 입니다.
이효범(Beomy)의 썸네일
커리큘럼 총 74 개 ˙ 5시간 24분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 1. 기초 문법
데이터 정의 02:45
속성 정의 05:02
스타일 정의 01:57
컴포넌트 정의 02:59
HTML 문자열 표현 01:58
섹션 2. 반응형을 위한 문법
이벤트 리스너 03:33
$ 문법 05:06
주의해야할 것들 05:37
섹션 3. Props
정의 방법 02:39
기본값 설정 03:21
Spread 문법 사용하기 04:07
섹션 4. 논리 블록
조건문 블록 03:21
반복문 블록 02:50
반복문 블록에 Key 지정하기 06:14
await 블록 04:52
섹션 5. 이벤트 다루기
DOM 이벤트 05:21
인라인 핸들러 02:54
이벤트 수식어 03:37
컴포넌트 이벤트 05:03
컴포넌트 이벤트 발생시 주의사항 04:36
섹션 6. 데이터 바인딩 기초
input 태그 08:13
textarea 태그 01:55
select 태그 03:50
contenteditable 기능 02:30
Each 블록 바인딩 05:22
섹션 7. 데이터 바인딩 고급
Media 태그 04:00
Dimension 바인딩 04:32
this 바인딩 03:35
컴포넌트 Props 바인딩 03:54
섹션 8. 라이프 사이클
라이프 사이클이란 02:07
onMount 06:44
onDestroy 06:10
라이프 사이클 모듈화 04:22
beforeUpdate와 afterUpdate 05:14
tick 09:10
섹션 9. Store
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
Motion이란 01:15
Tweened 04:47
Spring 07:09
섹션 11. 트랜지션
트랜지션 사용하기 03:01
트랜지션 종류 05:06
트랜지션 In/Out 03:00
커스텀 트랜지션 06:08
트렌지션 이벤트 04:19
트렌지션 수식어 04:11
섹션 12. 애니메이션
애니메이션 사용하기 04:28
커스텀 애니메이션 03:03
애니메이션 사용시 주의사항 03:04
섹션 13. 액션
액션 만들기 08:54
섹션 14. Slot
Slot 사용하기 02:12
Default Slot 01:29
Named Slot 03:10
Slot props 05:17
섹션 15. Context API
Context 사용하기 05:02
Context와 Store 10:31
섹션 16. Svelte 요소
<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
코드 공유 03:14
코드 내보내기 01:57
강의 게시일 : 2020년 08월 04일 (마지막 업데이트일 : 2020년 09월 09일)
수강평 총 11개
수강생분들이 직접 작성하신 수강평입니다.
4.5
11개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
초보 thumbnail
5
강의 잘 들었습니다. ^^ 공식 문서의 튜토리얼을 보고 따라하다가 여러 힘든 부분이 있어서 강의를 듣게 되었고요. 튜토리얼 코드를 많이 활용하셨지만 복잡하고 어려운 부분은 쉽게 풀어 주셔서 좋았습니다. 다만.. 아주 살짝 아쉬운 부분이.. 튜토리얼에서 자세히 설명하지 않은 내용은 마찬가지로 자세히 설명해주지 않으셔서 어떤 경우에 사용할 수 있는지, 왜 사용하는지에 대한 이해를 하기가 쉽지 않다는 것이었습니다. 어쨌든 좋은 강의 감사합니다~
2020-10-02
지식공유자 이효범(Beomy)
초보 님 감사합니다 :) 아쉬운 점이 있었는데, 좋은 평가 주셔서 감사합니다. 첫 강의라 부족한 부분이 있는 것 같습니다. 혹시 강의를 들으시고 이해가 안가는 부분이 있다면 언제든 질문 남겨주시면 답변을 성실히 드리도록 하겠습니다. 답변에 담기 힘든 내용이라면 강의를 추가로 업데이트 하도록 하겠습니다. 좋은 평가 감사합니다 :)
2020-10-02
wally-wally thumbnail
5
평소에 svelte를 배우고 싶었는데 차근차근 체계적으로 상세하게 배울 수 있어서 좋았습니다!
2020-11-24
지식공유자 이효범(Beomy)
wally-wally님 좋은 평가 주신 것 감사합니다. :) 모두 수강 완료 해주셨군요! 혹시 강의 내용 중에 이해하기 여려웠던 부분이 있으시다면, 질문에 남겨주시면 성심껏 답변 드리겠습니다. 감사합니다. :)
2020-11-24
terecal thumbnail
5
89퍼센트 contextApi 까지 듣고 강의평을 남겨여 이 강의는 강사님이 예제 중심으로 실습과 함께 기본 개념을 알기 쉽게 설명해주셨는데 초보자 입장에서 이해하고 학습하기 좋은 방식인것 같아여 챕터가 좀 많긴 했지만 꼼꼼하게 강의해주시고 실습 결과까지 바로 확인하기 때문에 진도를 나가는게 어렵지 않고 재미 있었던것 같습니다 만약 이 강의를 들으실 분들이 자바 스크립트 기초가 부족하다면 가끔 헤멜수도 있지만 w3chools.com 같은데 기초 문법 예제는 많으니까 참고하시면 될거 같아여 아직 대세가 될지 확신할수 없는 유망주 프레임 워크이긴 하지만 사이드 프로젝트에서 활용되기에는 뷰나 리액트 보다 오히려 좋은점이 많은것 같아여 제 실력으로는 이 강의만 들어서 바로 백엔드 프론트 엔드 다 구현할수 있는 실력이 없지만 이후 강의도 만들어주실 계획이라고 하셔서 기대하는 중이에여~! 뷰나 리액트 이후에 두번째로 새로운 프론트 엔드 프레임 워크 강의를 듣고자하시는분들은 부담 없이 지르셔도 된다고 생각합니다 인프런에서 이런 훌륭한 강사님은 전속 강사로 채용해주시면 안될까여 ㅋㅋ; 감사합니다
2020-09-03
지식공유자 이효범(Beomy)
terecal님 감사합니다. :) 훌륭한 강사님이라니... 정말 과분한 칭찬을 주신 것 같아서 너무 감사드립니다. 제가 공부해 볼 때 예제로 살펴보는 것이 이해가 쉬운 것 같아 예제 중심으로 강의를 준비했는데, 이렇게 좋은 평가 주시니 감격스럽습니다. 강의 중에 부족한 부분이 있다면 언제든 알려주시면 보강하도록 하겠습니다. 엄청난 칭찬을 받았으니! 다음 강의는 더 열심히 만들어 보겠습니다! 감사합니다 :)
2020-09-03
인프런 빠삐코 thumbnail
5
아직 중반쯤 듣고 있지만, 단순히 공식 홈페이지를 보고 공부하는 것 보다 정리가 잘되고, 제가 이해했던 부분을 지식공유자님께서 어떤 방식으로 해석하고 계신지 알 수 있어서 좋은 것 같습니다. React, Vue 를 사용해보신 분중에 새로운 기술에 관심이 있으신 분들은 Svelte와 다른 프레임워크나 라이브러리를 비교하면서 공부하는 것도 재미있을 것 같습니다! 강의 다 듣고 다시 한번 남기도록 하겠습니다. 좋은 지식 공유 감사합니다!
2020-08-05
지식공유자 이효범(Beomy)
첫 수강평 느낀점 자세히 써주셔서 감사해요~~
2020-08-13
keh7264 thumbnail
4
좋아요 ^^
2020-08-12
지식공유자 이효범(Beomy)
감사합니다 :)
2020-08-13