프레듀 원격평생교육원

과목정보

[HD]Svelte(스벨트) 프로그래밍 제대로 배우기 (입문) Part.1 개념 및 기본문법

강사명 차시 학습시간 샘플
김동준 28 11 시간
모두보기
과정소개
학습대상
학습목표
학습내용

과정소개

본 과정은 프런트엔드 최신 기술인 스벨트 프로그래밍 입문과 활용 과정에 대해서 학습합니다.

학습대상

프런트엔드 기술들중 하나인 Svelte 기반으로 프런트엔드 구현을 학습해보고자 하는 학습자

학습목표

프런트엔드 컴파일러를 표방하는 새로운 프런트엔드 최신 기술인 스벨트 프로그래밍 전반에 필요한 제반 사항을 학습합니다.

학습목표

1. 강의개요
2. 스벨트 초보자 학습가이드
3. 스벨트 공식홈의 메인을 보면 장점을 알 수 있다
4. 스벨트 개념과 장점 이해 - DOM 객체
5. 스벨트 개념과 장점 이해 - DOM의 또다른 표현들
6. 스벨트 개념과 장점 이해 - jQuery가 지고 Virtual DOM 기반의 프레임워크가 뜬 이유
7. 브라우저 렌더링 방식(중요)
8. 가상 돔(Virtual DOM) - 일상에서의 버추얼 시스템 예
9. 가상 돔(Virtual DOM)이란 무엇인가 - JS 객체 vs Batch Update vs 복제본
10. 가상 돔(Virtual DOM)을 통해 실제 DOM에 반영하는 원리 - Diffing
11. 스벨트는 어떻게 가상돔을 쓰지않고도 빠르게 돔 조작을 한다는 것인가1
12. 스벨트는 어떻게 가상돔을 쓰지않고도 빠르게 돔 조작을 한다는 것인가2
13. 스벨트의 주요 특징인 컴파일 개념을 일상의 예로 비유해본다면
14. 더 적은 코드와 진정한 반응성
15. 스벨트 기본 구성
16. 스벨트 템플릿 문법 - 제어문과 반복문 형식과 실습하기
17. 스벨트 템플릿 문법 - 배열내 객체 each 반복문으로 컨트롤하기
18. 초보자가 약간 헷갈려하는 Key 블록 개념이해 및 실습1
19. 초보자가 약간 헷갈려하는 Key 블록 개념이해 및 실습2 vs HTML 태그 인식시키려면
20. 초보자가 상당히 헷갈려하는 클래스 속성 값 표현
21. 클래스 속성 값 표현 - 실습
22. 반응성(Reactivity) 이론 및 실습
23. 10까지만 숫자 증가시키고 버튼 비활성화 상태로 만들기
24. 배열의 변화 감지하기1 (중요)
25. 배열의 변화 감지하기2 - 입력과 삭제 시 동시 반응성 구현
26. JSON 객체의 복사와 상태값 변화에 따른 동시 반응성 구현 - 사전지식
27. 깊은 복사 vs 얕은 복사 - Object.assign
28. JSON 객체의 복사와 상태값 변화에 따른 동시 반응성 구현 - 실습