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

Svelte.js [Core API] 완벽 가이드

(4.9) 38개의 수강평 ∙  497명의 수강생
HEROPY
Svelte Rollup Sortable

53,900원

지식공유자: HEROPY
총 116개 수업 (21시간 18분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유
강의소개 커리큘럼 수강평38 수강전 문의 커뮤니티 새소식

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

21시간이 넘는 분량의 최고의 Svelte.js 강의!

✍️
이런 걸
배워요!
최신 Svelte.js의 Core API를 기초부터 탄탄하게 학습해요!
자바스크립트 데이터의 불변성(Immutable)과 가변성(Mutable)에 대해서 이해할 수 있어요!
자바스크립트의 비동기에 대해서 이해하고 여러 비동기 패턴을 학습해요!
Rollup.js의 기본 구성을 이해하고 추가 구성으로 실제 프로젝트를 만들어요!
Sortable.js를 핵심 모듈로 '트렐로(Trello) 클론 앱'을 만들고, Netlify 서비스에 가입하고 프로젝트를 지속적으로 배포(CD)할 수 있어요!

따끈따끈한 최신 자바스크립트 FE 프레임워크,
스벨트(Svelte.js)의 매력에 푹 빠져보세요!

시작하면서!

입문자를 위한 좀 더 쉬운 예제와 자세한 설명,
중급자 이상을 위한 Svelte API의 다양한 패턴과 새로운 문법 등,
Svelte를 학습하는 누구에게나 도움이 될만한 내용으로 구성했습니다!

홈페이지 예제보다 더 쉽게 이해할 수 있도록,
대부분의 파트 예제를 머리를 쥐어짜며 직접 준비했습니다!

강의를 곧바로 수강하지 않아도,
미리 보기를 통해서 Svelte의 기본 개념을 맛볼 수 있어요!
미리 보기 마지막에는 간단한 Todo 예제도 만들어 봅니다.
React, Vue 보다 더 쉽고 편리한 프론트엔드 프레임워크라는 것을 알게 되실 거예요~
그리고 전체 커리큘럼도 꼭 보세요!

작년(2019), 지금의 Svelte를 있게 한 3버전이 처음으로 공식 릴리즈되었어요.
이제 겨우 1년이 지난 아주 따끈하며 흥미롭고 매력적인 프레임워크에요~
필수 학습!

주요 예제!

Svelte Core API 학습이 끝나면, 트렐로(Trello) 서비스의 클론 앱을 만들어요! 
Rollup 번들러를 기반으로 프로젝트를 구성하고 여러 많은 기술을 도입합니다.(SCSS도 학습합니다)
최신 Snowpack 빌드 도구로 이관한 버전도 새롭게 추가했습니다!
Netlify 서비스를 사용해 GitHub 저장소를 기준으로 지속적인 배포(Continuous Deployment)도 진행해요~
더 자세한 내용은 커리큘럼을 참고하세요.

GitHub Repo: https://github.com/HeropCode/Svelte-Trello-app
Snowpack GitHub Repo: https://github.com/HeropCode/Svelte-Trello-app-Snowpack
Demo: https://boring-agnesi-165a0d.netlify.app

참고하세요!

초반 몇 개 강의가 지나가면 음질이 좋아집니다.
좀 더 비싸고 좋은 마이크로 바꿨어요~

질문이 있으면?

수강 중 질문이 생기면 질문 & 답변 페이지를 사용해 주세요.
최대한 빠르게 답변을 드리겠습니다.

수강이 고민되거나 기타 수강 전 궁금한 부분이 있다면,
수강 전 문의 페이지를 사용해 주세요.

Svelte 문서.

Svelte API에 대한 한글 문서가 필요하시면,
'Svelte.js 완벽 가이드(Renew)' 포스트를 확인하세요.
https://heropy.blog/2019/09/29/svelte

공지사항!

2020.10.22
강의 오픈 준비를 마친 상태에서 최신 Svelte 버전의 기술들이 몇 가지 추가되었어요.
곧 업데이트하겠습니다!

2020.11.03
'Svelte.js 완벽 가이드(Renew)'로 포스트를 업데이트했습니다.
영상 강의와 함께 보세요.

2020.11.08
이 강의에 다음 파트들을 추가했습니다!
- 7-4. 키 블록
- 11-4. 슬롯 포워딩(Forwarding)
- 18-1. Snowpack이란?
- 18-2. Snowpack 기반의 Svelte 템플릿 설치 및 구성 이해
- 19-1. 주요 디렉토리 복사 및 HMR 적용
- 19-2. 핵심 모듈 설치 및 구성
- 19-3. SCSS 및 Svelte Preprocess 구성
- 19-4. 제품 모드의 로그 제거 구성
- 19-5. 코드 최적화(최소화) 및 경로 별칭 구성
- 19-6. GitHub 저장소 생성과 프로젝트 Push
- 19-7. Netlify를 통한 지속적인 배포

2020.12.24
이 강의에 다음 파트를 추가했습니다!
'Trello 클론 앱 만들기' 강의 예제를 시작하기 전에 꼭 보세요!
- 15-1. 강의 예제 모듈 버전 일치시키기

2020.12.30
이 강의에 다음 파트를 추가했습니다!
- 11-5. $$slots

Svelte.js, Frontend, Framework, Core API, Sortable,js Rollup.js, React, Vue.js, Angular, 리액트, 뷰, 앵귤러

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
새로운 최신 웹 프론트엔드 프레임워크를 경험하실 분!
프론트엔드 개발 경험이 부족하신 분!
Svelte.js 공식 문서로는 학습이 어렵거나 일부 이해가 안되시는 분!
설명이 많아도 괜찮으신 분!
📚
선수 지식,
필요할까요?
HTML
CSS
JS
안녕하세요
HEROPY 입니다.
HEROPY의 썸네일

   

안녕하세요~ 반갑습니다!
저는 현재 작은 스타트업에서 기업 관리 솔루션을 개발하고 있는 프론트엔드 개발자 박영웅입니다.
HEROPY 기술 블로그를 운영하고 있고,
그 외 기업 출강이나 온/오프라인 강의 활동도 하고 있습니다.

Blog: https://heropy.blog
Youtube: https://www.youtube.com/channel/UCcjhMpoaNvyy0StN9KgtF6w
Email: thesecon@gmail.com

    

커리큘럼 총 116 개 ˙ 21시간 18분의 수업
이 강의는 영상이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 개요 5 강 ∙ 45분
1. 강사 소개 및 Svelte 통계 미리보기 05:55 2. Svelte 특징 분석 미리보기 16:52 3. REPL 사용법 미리보기 09:26 4. VS Code에서 Svelte 프로젝트 시작하기 미리보기 10:34 5. NPX 설치 확인 미리보기 02:54
섹션 1. 시작하기 6 강 ∙ 1시간 31분
1. 선언적 렌더링 미리보기 10:37 2. 조건문과 반복문 미리보기 09:28 3. 이벤트 핸들링 미리보기 09:15 4. 컴포넌트 미리보기 18:29 5. 스토어 미리보기 17:19 6. Todo 예제 만들기 미리보기 25:56
섹션 2. 라이프사이클 6 강 ∙ 50분
1. 기본 개념 미리보기 05:34 2. 잠깐! VS Code로 Svelte 프로젝트 시작하기 복습 및 'code' 명령어 사용 미리보기 05:15 3. onMount, onDestroy 미리보기 10:26 4. beforeUpdate, afterUpdate 미리보기 07:37
5. 라이프사이클 모듈화 15:41
6. tick 06:19
섹션 3. 보간법 2 강 ∙ 16분
1. 내용/속성/표현식 보간 06:15
2. 원시 HTML, 데이터 디버깅 10:01
섹션 4. 반응성 5 강 ∙ 56분
1. 데이터의 불변성과 가변성 12:26
2. 할당(Assignment) 15:21
3. 자바스크립트 Label 구문의 이해 08:37
4. 반응성 구문의 이해 12:31
5. 반응성 구문 패턴 정리 07:06
섹션 5. 클래스와 스타일 4 강 ∙ 25분
1. 클래스와 스타일 속성 바인딩 07:12
2. 클래스 바인딩 패턴 정리(class 지시어) 05:24
3. 스타일 유효범위(Hash)와 전역화(Global) 07:39
4. @keyframes 전역화 04:50
섹션 6. 요소 바인딩 3 강 ∙ 25분
1. 일반 요소 바인딩(this) 04:50
2. 입력 요소 바인딩(Properties, group) 패턴 정리 13:42
3. 편집 가능 요소 바인딩(contenteditable) 06:47
섹션 7. 조건과 반복과 키 4 강 ∙ 27분
1. 조건 블록 패턴 정리 06:02
2. 반복 블록의 Key 사용 08:27
3. 반복 블록 패턴 정리 09:16
4. 키 블록 03:51
섹션 8. 비동기 5 강 ∙ 1시간 31분
1. 자바스크립트 비동기 처리의 이해와 사용 패턴 정리 - 1부 18:39
2. 자바스크립트 비동기 처리의 이해와 사용 패턴 정리 - 2부 18:05
3. 영화 검색 API 예제 만들기 26:05
4. Await 블록 16:59
5. Await 블록으로 영화 검색 API 예제 리팩토링 11:52
섹션 9. 사용자 입력 핸들링 3 강 ∙ 21분
1. 인라인 이벤트 핸들러 07:27
2. 다중 이벤트 핸들러 02:27
3. 이벤트 수식어 11:43
섹션 10. 컴포넌트 9 강 ∙ 1시간 24분
1. 컴포넌트 개요(with 컴포넌트 바인딩) 08:59
2. 부모에서 자식으로(Props) 03:59
3. Props 양방향 바인딩 06:53
4. 자식에서 부모로(Event Dispatcher) 10:56
5. 기본/커스텀 이벤트 포워딩(Forwarding) 10:28
6. ContextAPI(getContext, setContext) 11:44
7. 모듈 상황(Module context)에서 데이터 정의 11:02
8. 오디오플레이어 예제 09:07
9. $$props와 $$restProps 11:28
섹션 11. 슬롯 5 강 ∙ 50분
1. 단일 슬롯과 Fallback content 08:19
2. 이름을 가지는 슬롯 06:28
3. 범위를 가지는 슬롯(Props) 12:19
4. 슬롯 포워딩(Forwarding) 09:09
5. $$slots 13:46
섹션 12. 스토어 5 강 ∙ 1시간 9분
1. 쓰기 가능 스토어(writable) & 수동 구독과 자동 구독 20:21
2. 읽기 전용 스토어(readable) 09:54
3. 계산된 스토어(derived) 19:26
4. 스토어 값 얻기(get) 04:08
5. 커스텀 스토어 개념과 예제 15:58
섹션 13. 액션 2 강 ∙ 20분
1. 사용 패턴 정리 13:55
2. 요소 Zoom In-Out 예제 07:03
섹션 14. 특별한 요소 6 강 ∙ 55분
1. 컴포넌트 재귀 호출(self) 08:32
2. 동적 컴포넌트 랜더링(component) 11:13
3. window 08:27
4. head, body 07:50
5. options - 불변성 선언(immutable) 13:30
6. options - 접근 허용(accessors) 06:12
섹션 15. 예제를 시작하기 전에!! 1 강 ∙ 6분
강의 예제 모듈 버전 일치시키기 미리보기 06:01
섹션 16. Trello 클론 앱 만들기 - 예제 이해하기 5 강 ∙ 1시간 19분
1. Trello Clone App 개요 미리보기 08:19
2. Rollup 구성(Config)의 이해 - 1부 22:25
3. Rollup 구성(Config)의 이해 - 2부 20:23
4. App, Header, ListContainer 컴포넌트 11:50
5. 프로젝트 설치 및 핵심 레이아웃의 이해 16:43
섹션 17. Trello 클론 앱 만들기 - 예제 실습 30 강 ∙ 6시간 31분
1. 프로젝트 기본 모듈 업데이트 미리보기 02:27
2. Header 컴포넌트 작성 05:41
3. Reset.css와 Google Fonts 08:08
4. SCSS(svelte-preprocess, node-sass) 13:01
5. 공급업체 접두사 후처리(autoprefixer(PostCSS)) 11:00
6. 경로 별칭(@rollup/plugin-alias) 09:08
7. ListContainer, List, CreateList 컴포넌트 작성 15:28
8. Lists 커스텀 스토어와 Storage API 17:28
9. 랜덤 고유 문자열 생성(crypto-random-string)과 Rollup 구성 20:08
10 List 생성을 위한 수정 모드(Edit mode) 16:53
11. 전역 스타일(main.scss) 생성 및 구성 19:53
12. 자동으로 수정 모드 종료(autoFocusout.js, Actions) 17:18
13. List 컴포넌트 레이아웃의 이해 14:16
14. List 컴포넌트 작성 08:39
15. ListTitle 컴포넌트 작성 27:26
16. List 데이터의 수정(edit)과 삭제(remove) 10:44
17. List 정렬을 위한 모듈(sortablejs) 21:14
18. List 데이터의 재정렬(reorder) 07:47
19. 정렬 상태 클래스 - ghost, chosen, drag, fallback 14:38
20. CreateCard 컴포넌트 작성 11:59
21. Card 생성(add) 08:40
22. Card 컴포넌트 작성 12:13
23. Card 데이터의 수정(edit)과 삭제(remove) 08:54
24. Card 정렬(sortablejs)과 dataset 15:25
25. Card 데이터 재정렬(reorder) 09:32
26. Card 정렬 상태(ghost, chosen)에 대한 스타일 추가 03:54
27. 수정 모드일 때 정렬 기능 끄기 19:47
28. GitHub 저장소 생성과 프로젝트 Push 11:33
29. Netlify를 통한 지속적인 배포(Continuous Deployment, CD) 16:47
30. word-break 적용과 제품 모드의 로그 제거(@rollup/plugin-strip) 11:32
섹션 18. Snowpack 2 강 ∙ 21분
1. Snowpack이란? 05:59
2. Snowpack 기반의 Svelte 템플릿 설치 및 구성 이해 15:53
섹션 19. Trello 클론 앱을 Snowpack 프로젝트로 이관하기 7 강 ∙ 44분
1. 주요 디렉토리 복사 및 HMR 적용 06:31
2. 핵심 모듈 설치 및 구성 08:38
3. SCSS 및 Svelte Preprocess 구성 06:31
4. 제품 모드의 로그 제거 구성 08:47
5. 코드 최적화(최소화) 및 경로 별칭 구성 05:33
6. GitHub 저장소 생성과 프로젝트 Push 05:27
7. Netlify를 통한 지속적인 배포 03:32
섹션 20. 마치며.. 1 강 ∙ 2분
Svelte 강의를 마치며 02:02
강의 게시일 : 2020년 10월 22일 (마지막 업데이트일 : 2020년 10월 22일)
수강평 총 38개
수강생분들이 직접 작성하신 수강평입니다.
4.9
38개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
Truestar thumbnail
5
제가 리뷰는 잘 안하는 편인데 일단 강의 리딩 실력이 너무 출중하셔서 어떤 강의를 하셔도 주저없이 들을 것 같습니다. 강의 배속을 1.5 로 맞춰 재생하는데 그럼에도 발음이 좋은신 탓인지 내용이 쏙쏙 들어옵니다 중반정도 듣고있는데, 리뷰 남겨요! 0. 질의 응답을 괭장히 세세하게 설명해주십니다 1. 목차와 항목 구분이 강의내용과 확실히 매칭됩니다 2. 정보전달방식에 프레임이 있어, 매 강의 특정시점 마다 대략적으로 이런내용을 다루는구나 라고 짐작이 가능합니다. 3. 자주쓰이는 패턴 예시를 두어 응용하기가 좋습니다(유틸함수 쓰는 느낌) 4. 무엇보다 좋다고 생각이 드는부분은, 매 영상초반에 전달하는 전,후 맥락에 대한 설명을 가볍게 설명해주시는데 이 때문에 흐름을 파악하기 매우좋습니다 (때에 따라서 다소 지루한 감이 있을 순 있지만, 배속 기능이 있기에 상관없다 생각합니다. 저의 경우는 오히려 전체를 파악하기 좋았던 것 같습니다) 5. 골이 깊은 개념을 누구나 알기 쉽게 풀어서 설명합니다. 6. 각 주제를 단계적이고, 디테일 하고, 많은 예시를 두어 깊게 다룹니다. 몇 일간 장점을 정리해서 남길 정도로 추천합니다. 무엇보다.. 혜자스러운 강의 분량에 감탄을 했습니다.
2021-01-25
지식공유자 HEROPY
앗! Truestar 님 안녕하세요. '질문 & 답변'에서 글 정리하시는 데 많은 공이 들어간다고 답변해주신 거 같은데, 이렇게 장문의 멋지고 깔끔한 수강평을 남겨주시니 정말 감동적입니다ㅠㅜ 남은 중반 이후 강의가 Truestar 님께 실망을 안겨드리지 않았으면 좋겠고, 정말 도움이 많이 되시길 희망합니다!! 그럼 좋은 밤 되시고, 즐겁고 행복한 한 주 보내시길 바라요~👍 멋진 수강평 진심으로 감사드립니다~😭
2021-01-26
Truestar
아이고.. 제가 가 오해할만한 얘길 남긴건가요?^^; 전 그냥 제가 강의노트를 책쓰듯 하는 버릇이 있어서 공이 많이 들어간다는 소릴 짧게 남겨서 오해가 있으셨네요.. 강의 정말 좋아요.. `고퀄`이 어울리는 강의 입니다. 박리다매 가 떠오르는건 저만 그런건가요.. 업데이트도 계속 해주셔서 감사할 따름이지요.. 이 강의 만드시느라 든 노고가 느껴지는 강의입니다 기초 끝내고 응용편 에서도 잘 부탁드립니다!
2021-01-26
소라연 thumbnail
5
샘플강의 듣고 반해서 수강합니다^^
2020-10-26
지식공유자 HEROPY
좋은 평가 감사합니다^^ 다른 파트도 마음에 드셨으면 좋겠습니다! 즐거운 하루 보내세요~
2020-10-26
소라연
다른 파트도 완전 마음에 들어요! 특히 Trello 예제는 너무 재미있어서 아껴듣는중입니다^^
2020-11-04
지식공유자 HEROPY
다른 파트도 마음에 드셔서 다행입니다 :D Trello 예제도 재미있으시다니 정말로 기쁘구요ㅜㅠ Svelte.js가 소라연님의 웹 개발에 많은 도움이 되길 진심으로 바랍니다! 상쾌하고 행복한 주말 보내세요~
2020-11-07
소라연
즐겁게 완강 했습니다. 감사합니다. 강의 정말 최고에요! 다음 강의도 기대하겠습니다. 강사님도 즐거운 주말 보내세요~
2020-11-07
지식공유자 HEROPY
강의 시간이 짧지만은 않은데 완강하셨다니 진심으로 축하드려요 :D 다음 강의도 빠르게 열심히 준비해서 공지하겠습니다! 소라연 님도 즐거운 한 주 보내세요^^
2020-11-09
HAN_MG thumbnail
5
친절히 알려주셔서 재미있게 Svelte + @(용어, scss 등)을 배울 수 있었습니다.
2021-03-03
지식공유자 HEROPY
제 강의가 도움이 되셨길 진심으로 바라요~ 감사합니다.👍
2021-03-03
Taylor thumbnail
5
최근에 vue.js를 학습하는 과정에서 svelte 가 주목받고 있다는 정보를 들었습니다. 그래서 흥미를 가지게 되었고 구매를 하게 되었습니다. 아직 완강을 하진 못했지만 중간 소감을 적는다면 참 성의있게 강의를 준비하셨다는 느낌을 받습니다. 설계해주신 커리큘럼을 보니 이 강의에 대한 애착과 고민이 느껴집니다. 코멘트 적어주신 신규 기능에 대한 업데이트도 기다리고 있겠습니다
2020-11-02
지식공유자 HEROPY
강의를 만든 보람이 느껴지는 감동적인 평가 감사합니다 :) 이 강의가 SIMONS 님께 많은 도움이 되면 정말 좋겠습니다. 신규 기능도 빠르게 업데이트하고 공지하겠습니다. 기분 좋은 하루 보내세요~
2020-11-02
madstone dev thumbnail
5
하나의 개념을 설명하실때 부가적인 활용방법까지 엄청 꼼꼼하게 알려주시기 때문에 일반적으로 궁금할만한 사항들 대부분이 강의에 포함되어있다고 보시면됩니다. 또 es6의 장점을 최대한 활용해서 작성하시기 때문에 강의가 끝날 때쯤엔 깔끔하고 간결한코드의 습관도 기를 수 있습니다. 프레임워크 경험이없는분들이 듣기에도 아주 좋은 강의입니다. 다음 강의가 기대됩니다 ㅎㅎ
2020-11-24
지식공유자 HEROPY
좋은 평가 남겨주셔서 정말 감사합니다. :D 완강 축하드리고, 이 강의가 madstone dev님께 많은 도움이 되었길 진심으로 바랍니다! 다음 강의도 열심히 준비해서 업로드하고 공지하겠습니다. 즐거운 하루 보내세요~ 감사합니다^^
2020-11-24