Thumbnail
개발 · 프로그래밍 프론트엔드
만들면서 배우는 Svelte
(5.0)
4개의 수강평 ∙ 36명의 수강생

33,000원

지식공유자 : Hollo Coding(홀로코딩)
총 39개 수업˙총 5시간 7분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
폴더에 추가 152 공유
초급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.

최신 프론트엔드 프레임워크 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 기초

안녕하세요
Hollo Coding(홀로코딩) 입니다.
Hollo Coding(홀로코딩)의 썸네일

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

email: freeseamew@gmail.com

blog: https://medium.com/freeseamew

커리큘럼 총 39 개 ˙ 5시간 7분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. svelte 소개
섹션 2. 컴포넌트 기본
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. 컴포넌트 - 템플릿 제어
논리블록 - {#if ...} 06:54
반복 블록 - {#each ...} 05:32
bind 13:19
event 09:49
slot 06:24
lifecycle - 컴포넌트 생명주기 04:10
섹션 4. 스타일 및 효과
동적 css 적용방법 02:26
transition - 화면전화효과 10:03
섹션 5. 실습 1 - todo 만들기
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 서비스 리팩토링
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
routify 소개&설치 03:42
routify 적용 22:28
섹션 8. 실습3 - ajax 통신 연동
fetch 15:18
axios 04:20
섹션 9. 마무리
수업 마무리 00:38
섹션 10. 기타
화살표 함수 02:26
배열조작 메소드(map, filter 등) 07:30
강의 게시일 : 2020년 09월 10일 (마지막 업데이트일 : 2020년 09월 10일)
수강평 총 4개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
5.0
4개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
최광성 thumbnail
강사님이 이 강의를 만든 이유는 확실합니다. svelte가 너무나 강력하고 좋기 때문입니다. svelte를 실제 프로젝트에 사용해보겠습니다.
2020-09-29
지식공유자Hollo Coding(홀로코딩)
앗 첫 수강평 감사합니다. 그리고 svelte에 대해서도 좋은 느낌이셨다니 다행이네요 ㅎ 앞으로도 좋은 코딩 하시길 바래요. ^^
2020-09-29
프레드 thumbnail
입문할때, 필요한 핵심 내용들을 잘 알려주셔서 감사합니다. 아직은 배우는 단계이지만, 강의 들을때 궁금했던 것들을 자세히 알려주셔서 도움이 됐습니다. 다음 강의 기대 하겠습니다. ^^
2020-10-03
지식공유자Hollo Coding(홀로코딩)
강의가 만족스러웠다니 다행입니다. 앞으로도 계속 좋은 강의 준비해 보겠습니다. ^^
2020-10-03
임권일 thumbnail
드디어 완성했습니다 중간에 오류가많아서 혼자서 해결했네요 잘안되서 파이썬 다시 설치하니깐 잘되네요 다른 강좌봐도 안되고 문제는 파이썬 다시 설치하니깐 잘되네요 앞으로 더 좋은 강좌 부탁드립니다
2020-10-13
matforkman thumbnail
잘 배웠습니다.
2021-05-19

33,000원

폴더에 추가 152 공유
지식공유자 : Hollo Coding(홀로코딩)
총 39개 수업˙총 5시간 7분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
수강 전 궁금한 점이 있나요?
문의하기
문의
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스