Svelte.js [Core API] 완벽 가이드
Svelte.js [Core API] 완벽 가이드
수강정보
(3개의 수강평)
46명의 수강생
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

    

5.0
3개의 수강평
default_profile.png
소라연 1달 전
샘플강의 듣고 반해서 수강합니다^^
HEROPY

HEROPY 1달 전
좋은 평가 감사합니다^^ 다른 파트도 마음에 드셨으면 좋겠습니다! 즐거운 하루 보내세요~

소라연

소라연 27일 전
다른 파트도 완전 마음에 들어요! 특히 Trello 예제는 너무 재미있어서 아껴듣는중입니다^^

HEROPY

HEROPY 24일 전
다른 파트도 마음에 드셔서 다행입니다 :D Trello 예제도 재미있으시다니 정말로 기쁘구요ㅜㅠ Svelte.js가 소라연님의 웹 개발에 많은 도움이 되길 진심으로 바랍니다! 상쾌하고 행복한 주말 보내세요~

소라연

소라연 24일 전
즐겁게 완강 했습니다. 감사합니다. 강의 정말 최고에요! 다음 강의도 기대하겠습니다. 강사님도 즐거운 주말 보내세요~

HEROPY

HEROPY 22일 전
강의 시간이 짧지만은 않은데 완강하셨다니 진심으로 축하드려요 :D 다음 강의도 빠르게 열심히 준비해서 공지하겠습니다! 소라연 님도 즐거운 한 주 보내세요^^

default_profile.png
SIMONS 1달 전
최근에 vue.js를 학습하는 과정에서 svelte 가 주목받고 있다는 정보를 들었습니다. 그래서 흥미를 가지게 되었고 구매를 하게 되었습니다. 아직 완강을 하진 못했지만 중간 소감을 적는다면 참 성의있게 강의를 준비하셨다는 느낌을 받습니다. 설계해주신 커리큘럼을 보니 이 강의에 대한 애착과 고민이 느껴집니다. 코멘트 적어주신 신규 기능에 대한 업데이트도 기다리고 있겠습니다
HEROPY

HEROPY 1달 전
강의를 만든 보람이 느껴지는 감동적인 평가 감사합니다 :) 이 강의가 SIMONS 님께 많은 도움이 되면 정말 좋겠습니다. 신규 기능도 빠르게 업데이트하고 공지하겠습니다. 기분 좋은 하루 보내세요~

default_profile.png
madstone dev 8일 전
하나의 개념을 설명하실때 부가적인 활용방법까지 엄청 꼼꼼하게 알려주시기 때문에 일반적으로 궁금할만한 사항들 대부분이 강의에 포함되어있다고 보시면됩니다. 또 es6의 장점을 최대한 활용해서 작성하시기 때문에 강의가 끝날 때쯤엔 깔끔하고 간결한코드의 습관도 기를 수 있습니다. 프레임워크 경험이없는분들이 듣기에도 아주 좋은 강의입니다. 다음 강의가 기대됩니다 ㅎㅎ
HEROPY

HEROPY 7일 전
좋은 평가 남겨주셔서 정말 감사합니다. :D 완강 축하드리고, 이 강의가 madstone dev님께 많은 도움이 되었길 진심으로 바랍니다! 다음 강의도 열심히 준비해서 업로드하고 공지하겠습니다. 즐거운 하루 보내세요~ 감사합니다^^

교육과정

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