Svelte.js [Core API] 완벽 가이드
Svelte.js [Core API] 완벽 가이드
수강정보 44명의 수강생
53,900원
지식공유자 : HEROPY
114회 수업 · 총 20시간 58분 수업
기간 : 평생 무제한 시청
수료증 : 발급 강의
수강 난이도 : 초급
지식공유자의 다른 강의 연관 로드맵
아직 다른 강의가 없어요
연관 로드맵이 없어요

이 강의는

최고의 Svelte.js 강의를 목표로 최선을 다해 만들었습니다!

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

시작하면서!

입문자를 위한 좀 더 쉬운 예제와 자세한 설명,
중급자 이상을 위한 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


참고하세요!

미리 보기 영상을 통해 저의 강의 스타일을 확인해 주세요!

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

수강 중 누락, 버그 등 기타 의견이 있으시면 언제든지 편하게 연락주세요.
더 좋은 품질의 강의를 제공하기 위해서 노력하겠습니다!


질문이 있으면?

수강 중 질문이 생기면 질문 & 답변 페이지를 사용해 주세요.
최대한 빠르게 답변을 드리겠습니다.
만약 답변만으로 해결되지 않는 경우, 원격 제어를 사용합니다.
사전에 원격제어가 가능한 날짜/시간 등을 공유하고
보통 10~40분 가량 해당 문제를 파악하고 도움을 드리고 있습니다.

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


Svelte 문서.

'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)
- 17-1. Snowpack이란?
- 17-2. Snowpack 기반의 Svelte 템플릿 설치 및 구성 이해
- 18-1. 주요 디렉토리 복사 및 HMR 적용
- 18-2. 핵심 모듈 설치 및 구성
- 18-3. SCSS 및 Svelte Preprocess 구성
- 18-4. 제품 모드의 로그 제거 구성
- 18-5. 코드 최적화(최소화) 및 경로 별칭 구성
- 18-6. GitHub 저장소 생성과 프로젝트 Push
- 18-7. Netlify를 통한 지속적인 배포

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

이런 걸 배워요

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

도움 되는 분들

  • 새로운 최신 웹 프론트엔드 프레임워크를 경험하실 분!
  • 프론트엔드 개발 경험이 부족하신 분!
  • Svelte.js 공식 문서로는 학습이 어렵거나 일부 이해가 안되시는 분!
  • 설명이 많아도 괜찮으신 분!

선수 지식

  • HTML
  • CSS
  • JavaScript

공개 일자

2020년 10월 22일 (마지막 업데이트 일자 : 2020년 10월 22일)

지식공유자 소개

   

안녕하세요~ 반갑습니다!
저는 현재 작은 스타트업에서 기업 관리 솔루션을 개발하고 있는 프론트엔드 개발자 박영웅입니다.

HEROPY 기술 블로그를 운영하고 있고,
그 외 기업 출강이나 온/오프라인 강의 활동도 하고 있습니다.

Blog: https://heropy.blog
Youtube: https://www.youtube.com/channel/UCcjhMpoaNvyy0StN9KgtF6w

Email: thesecon@gmail.com

    

아직 평가를 충분히 받지 못한 강의 입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!😄️️

교육과정

모두 펼치기 114 강의 20시간 58분
섹션 3. 보간법
2 강의 16 : 16
1. 내용/속성/표현식 보간
06 : 15
2. 원시 HTML, 데이터 디버깅
10 : 01
섹션 4. 반응성
5 강의 56 : 01
1. 데이터의 불변성과 가변성
12 : 26
2. 할당(Assignment)
15 : 21
3. 자바스크립트 Label 구문의 이해
08 : 37
4. 반응성 구문의 이해
12 : 31
5. 반응성 구문 패턴 정리
07 : 06
섹션 5. 클래스와 스타일
4 강의 25 : 05
1. 클래스와 스타일 속성 바인딩
07 : 12
2. 클래스 바인딩 패턴 정리(class 지시어)
05 : 24
3. 스타일 유효범위(Hash)와 전역화(Global)
07 : 39
4. @keyframes 전역화
04 : 50
섹션 6. 요소 바인딩
3 강의 25 : 19
1. 일반 요소 바인딩(this)
04 : 50
2. 입력 요소 바인딩(Properties, group) 패턴 정리
13 : 42
3. 편집 가능 요소 바인딩(contenteditable)
06 : 47
섹션 7. 조건과 반복과 키
4 강의 27 : 36
1. 조건 블록 패턴 정리
06 : 02
2. 반복 블록의 Key 사용
08 : 27
3. 반복 블록 패턴 정리
09 : 16
4. 키 블록
03 : 51
섹션 8. 비동기
5 강의 91 : 40
1. 자바스크립트 비동기 처리의 이해와 사용 패턴 정리 - 1부
18 : 39
2. 자바스크립트 비동기 처리의 이해와 사용 패턴 정리 - 2부
18 : 05
3. 영화 검색 API 예제 만들기
26 : 05
4. Await 블록
16 : 59
5. Await 블록으로 영화 검색 API 예제 리팩토링
11 : 52
섹션 9. 사용자 입력 핸들링
3 강의 21 : 37
1. 인라인 이벤트 핸들러
07 : 27
2. 다중 이벤트 핸들러
02 : 27
3. 이벤트 수식어
11 : 43
섹션 10. 컴포넌트
9 강의 84 : 36
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. 슬롯
4 강의 36 : 15
1. 단일 슬롯과 Fallback content
08 : 19
2. 이름을 가지는 슬롯
06 : 28
3. 범위를 가지는 슬롯(Props)
12 : 19
4. 슬롯 포워딩(Forwarding)
09 : 09
섹션 12. 스토어
5 강의 69 : 47
1. 쓰기 가능 스토어(writable) & 수동 구독과 자동 구독
20 : 21
2. 읽기 전용 스토어(readable)
09 : 54
3. 계산된 스토어(derived)
19 : 26
4. 스토어 값 얻기(get)
04 : 08
5. 커스텀 스토어 개념과 예제
15 : 58
섹션 13. 액션
2 강의 20 : 58
1. 사용 패턴 정리
13 : 55
2. 요소 Zoom In-Out 예제
07 : 03
섹션 14. 특별한 요소
6 강의 55 : 44
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. Trello 클론 앱 만들기 - 예제 이해하기
5 강의 79 : 40
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
섹션 16. Trello 클론 앱 만들기 - 예제 실습
30 강의 391 : 33
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
섹션 17. Snowpack
2 강의 21 : 52
1. Snowpack이란?
05 : 59
2. Snowpack 기반의 Svelte 템플릿 설치 및 구성 이해
15 : 53
섹션 18. Trello 클론 앱을 Snowpack 프로젝트로 이관하기
7 강의 44 : 59
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
섹션 19. 마치며..
1 강의 02 : 02
Svelte 강의를 마치며
02 : 02
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스