만들면서 배우는 Svelte
만들면서 배우는 Svelte
수강정보
(0개의 수강평)
12명의 수강생
스킬태그 #Front-End, #웹 개발, #Svelte
26% 할인, D-1
24,200원
33,000원
지식공유자 : Hollo Coding(홀로코딩)
39회 수업 · 총 5시간 7분 수업
기간 : 평생 무제한 시청
수료증 : 발급 강의
수강 난이도 : 초급
지식공유자의 다른 강의 연관 로드맵
아직 다른 강의가 없어요
연관 로드맵이 없어요

이 강의는

최신 프론트엔드 프레임워크 Svelte(스벨트)를 배워보는 강좌입니다. Svelte 기본 사용법을 익힌 후 Todo 앱을 함께 만들면서 실제 프로젝트에서 어떻게 Svelte를 사용할 수 있는지 익혀보는 강좌입니다.

이런 걸 배워요

  • Svelte 기본 사용법
  • Svelte를 이용해 Todo 앱을 만들면서 실제 사용법 학습
  • 개발한 Todo 앱을 Store를 통해 실프로젝트에 가깝게 리팩토링
  • Routify를 이용한 Router 기능
  • Fetch, Axios를 이용한 Ajax 통신방법
  • ES6 배열 메소드 사용방법

JS 프론트엔드 프레임워크의 뉴페이스, Svelte를 만나보세요.

주제 소개 📝

2019년 들어 가장 핫하게 관심이 높아진 프론트엔드 프레임워크 Svelte(스벨트)를 배워보는 강좌입니다.

왜 배워야 하는지 ✒️

▲ Svelte 로고

현재는 React, Vue.js 등 다양한 프론트엔드 프레임워크가 있습니다. 각각의 프레임워크들은 서로 다른 철학과 방법론을 가지고 있습니다.
Svelte는 보다 적은 코드완벽한 리액티비티 구현을 대표적인 특징으로 내세우는 프레임워크입니다.

다음 코드는 State를 각기 다른 프레임워크로 구현해 본 예시입니다. 보시면 코드량의 확연한 차이를 알 수 있습니다.

▲ 타 프레임워크에 비해 코드량이 단연 적은 Svelte

사실 각기 프레임워크들은 다르긴 하지만 모두 비슷한 개념을 갖고 있기도 합니다. 만약 프론트엔드가 처음이라면 현재 나온 프레임워크 중에서 가장 배우기 쉽기 때문에 Svelte를 먼저 익히고 나면 다른 프레임워크를 익히는 데에도 많은 도움이 되어줄 것으로 생각됩니다.

그리고 기존에 다른 프레임워크를 이미 사용하고 계신 분이라면 Svelte를 배우는 게 그리 어렵지 않을 것이고, 계속해서 변하고 있는 프론트엔드가 어떤 방향으로 갈 것인지에 대한 거시적인 시야를 넓히는 데에 좋은 경험이 되지 않을까 하는 생각을 해봅니다.

섹션마다 간단한 소개 📖

  • 0~4강: Svelte 기초
  • 5강: Svelte를 이용한 To-do 서비스 개발
  • 6강: To-do 서비스를 Store를 이용해 리팩토링
  • 7강: Router 적용
  • 8강: Ajax 처리
  • 10강: 강의에 필요한 간단한 Javascript 기타 문법

강의 결과물 🧰

저희가 최종적으로 만들게 되는 앱의 모습입니다. 단순한 Todo앱이지만, 여기서 배운 패턴들을 확장하시면, 실제 프로젝트에서도 사용이 가능할 것입니다.

▲ Svelte로 만든 To-Do 앱

수업 소스 & 교재 💡

도움 되는 분들

  • 프론트엔드 개발에 관심이 있으신 분
  • 기존 프론트엔드 개발자분
  • 디자이너 또는 퍼블리셔에서 프론트엔드에 도전해보고 싶으신 분
  • 보다 쉬운 프론트엔드 프레임워크를 찾고 계신 분

선수 지식

  • HTML 기초
  • Javascript 기초
  • CSS 기초

지식공유자 소개

웹개발을 주로 하는 프리랜서 개발자 입니다. asp.net, codeigniter, meteor, vue 등 을 사용했었고, 지금은 주로 프론트엔드 쪽 개발에 관심을 가지고 있습니다. 현재는 기존에 다니던 회사를 떠나 새로운 일들을 준비하고 있는 홀로 개발자 입니다. 

email: freeseamew@gmail.com

blog: https://medium.com/freeseamew

교육과정

모두 펼치기 39 강의 5시간 7분
섹션 0. svelte 소개
1 강의 03 : 00
섹션 2. 컴포넌트 기본
8 강의 54 : 39
svelte 앱 기본 구조
04 : 47
컴포넌트 기본 - 레이아웃
07 : 50
state
05 : 45
reactivity
11 : 29
컴포넌트 통신방법 1 - props
07 : 00
컴포넌트 통신방법 2 - dispatch
06 : 40
컴포넌트 통신방법 3 - context API
05 : 52
컴포넌트 통신방법 4 - store
05 : 16
섹션 3. 컴포넌트 - 템플릿 제어
6 강의 46 : 08
논리블록 - {#if ...}
06 : 54
반복 블록 - {#each ...}
05 : 32
bind
13 : 19
event
09 : 49
slot
06 : 24
lifecycle - 컴포넌트 생명주기
04 : 10
섹션 4. 스타일 및 효과
2 강의 12 : 29
동적 css 적용방법
02 : 26
transition - 화면전화효과
10 : 03
섹션 5. 실습 1 - todo 만들기
8 강의 72 : 04
todo 서비스 설명
03 : 06
todo 리스트 출력
12 : 23
check todo
05 : 29
todo 입력
11 : 34
수정 삭제
13 : 19
count
05 : 50
todo 보기 모드
13 : 53
화면 전환 효과
06 : 30
섹션 6. 실습2 - store를 통한 todo 서비스 리팩토링
4 강의 56 : 01
todo store 적용 1 - storeForm
12 : 12
todo store 적용 2 - storeTodos
15 : 10
todo store 적용 3 - fetchTodos, countTodo
08 : 35
todo store 적용 4 - 컴포넌트에 store 연동
20 : 04
섹션 7. 라우터 - routify
2 강의 26 : 10
routify 소개&설치
03 : 42
routify 적용
22 : 28
섹션 8. 실습3 - ajax 통신 연동
2 강의 19 : 38
fetch
15 : 18
axios
04 : 20
섹션 9. 마무리
1 강의 00 : 38
수업 마무리
00 : 38
섹션 10. 기타
2 강의 09 : 56
화살표 함수
02 : 26
배열조작 메소드(map, filter 등)
07 : 30

공개 일자

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

수강 후기

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

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