Svelte.js [Core API] 완벽 가이드 - 인프런

1. 강사 소개 및 Svelte 통계

강의명 : Svelte.js [Core API] 완벽 가이드

수강 기한 : 무제한

진도율 : 0강/116강 (0%) | 시간 : 0분/1278분

나가기

미수강

처음

다음수업

Svelte.js [Core API] 완벽 가이드

수강 기한 : 무제한

진도율 : 0강/116강 (0%) | 시간 : 0분/1278분

개요

1. 강사 소개 및 Svelte 통계

5분

2. Svelte 특징 분석

16분

3. REPL 사용법

9분

4. VS Code에서 Svelte 프로젝트 시작하기

10분

5. NPX 설치 확인

2분

시작하기

1. 선언적 렌더링

10분

2. 조건문과 반복문

9분

3. 이벤트 핸들링

9분

4. 컴포넌트

18분

5. 스토어

17분

6. Todo 예제 만들기

25분

라이프사이클

1. 기본 개념

5분

2. 잠깐! VS Code로 Svelte 프로젝트 시작하기 복습 및 'code' 명령어 사용

5분

3. onMount, onDestroy

10분

4. beforeUpdate, afterUpdate

7분

5. 라이프사이클 모듈화

15분

6. tick

6분

보간법

1. 내용/속성/표현식 보간

6분

2. 원시 HTML, 데이터 디버깅

10분

반응성

1. 데이터의 불변성과 가변성

12분

2. 할당(Assignment)

15분

3. 자바스크립트 Label 구문의 이해

8분

4. 반응성 구문의 이해

12분

5. 반응성 구문 패턴 정리

7분

클래스와 스타일

1. 클래스와 스타일 속성 바인딩

7분

2. 클래스 바인딩 패턴 정리(class 지시어)

5분

3. 스타일 유효범위(Hash)와 전역화(Global)

7분

4. @keyframes 전역화

4분

요소 바인딩

1. 일반 요소 바인딩(this)

4분

2. 입력 요소 바인딩(Properties, group) 패턴 정리

13분

3. 편집 가능 요소 바인딩(contenteditable)

6분

조건과 반복과 키

1. 조건 블록 패턴 정리

6분

2. 반복 블록의 Key 사용

8분

3. 반복 블록 패턴 정리

9분

4. 키 블록

3분

비동기

1. 자바스크립트 비동기 처리의 이해와 사용 패턴 정리 - 1부

18분

2. 자바스크립트 비동기 처리의 이해와 사용 패턴 정리 - 2부

18분

3. 영화 검색 API 예제 만들기

26분

4. Await 블록

16분

5. Await 블록으로 영화 검색 API 예제 리팩토링

11분

사용자 입력 핸들링

1. 인라인 이벤트 핸들러

7분

2. 다중 이벤트 핸들러

2분

3. 이벤트 수식어

11분

컴포넌트

1. 컴포넌트 개요(with 컴포넌트 바인딩)

8분

2. 부모에서 자식으로(Props)

3분

3. Props 양방향 바인딩

6분

4. 자식에서 부모로(Event Dispatcher)

10분

5. 기본/커스텀 이벤트 포워딩(Forwarding)

10분

6. ContextAPI(getContext, setContext)

11분

7. 모듈 상황(Module context)에서 데이터 정의

11분

8. 오디오플레이어 예제

9분

9. $$props와 $$restProps

11분

슬롯

1. 단일 슬롯과 Fallback content

8분

2. 이름을 가지는 슬롯

6분

3. 범위를 가지는 슬롯(Props)

12분

4. 슬롯 포워딩(Forwarding)

9분

5. $$slots

13분

스토어

1. 쓰기 가능 스토어(writable) & 수동 구독과 자동 구독

20분

2. 읽기 전용 스토어(readable)

9분

3. 계산된 스토어(derived)

19분

4. 스토어 값 얻기(get)

4분

5. 커스텀 스토어 개념과 예제

15분

액션

1. 사용 패턴 정리

13분

2. 요소 Zoom In-Out 예제

7분

특별한 요소

1. 컴포넌트 재귀 호출(self)

8분

2. 동적 컴포넌트 랜더링(component)

11분

3. window

8분

4. head, body

7분

5. options - 불변성 선언(immutable)

13분

6. options - 접근 허용(accessors)

6분

예제를 시작하기 전에!!

강의 예제 모듈 버전 일치시키기

6분

Trello 클론 앱 만들기 - 예제 이해하기

1. Trello Clone App 개요

8분

2. Rollup 구성(Config)의 이해 - 1부

22분

3. Rollup 구성(Config)의 이해 - 2부

20분

4. App, Header, ListContainer 컴포넌트

11분

5. 프로젝트 설치 및 핵심 레이아웃의 이해

16분

Trello 클론 앱 만들기 - 예제 실습

1. 프로젝트 기본 모듈 업데이트

2분

2. Header 컴포넌트 작성

5분

3. Reset.css와 Google Fonts

8분

4. SCSS(svelte-preprocess, node-sass)

13분

5. 공급업체 접두사 후처리(autoprefixer(PostCSS))

11분

6. 경로 별칭(@rollup/plugin-alias)

9분

7. ListContainer, List, CreateList 컴포넌트 작성

15분

8. Lists 커스텀 스토어와 Storage API

17분

9. 랜덤 고유 문자열 생성(crypto-random-string)과 Rollup 구성

20분

10 List 생성을 위한 수정 모드(Edit mode)

16분

11. 전역 스타일(main.scss) 생성 및 구성

19분

12. 자동으로 수정 모드 종료(autoFocusout.js, Actions)

17분

13. List 컴포넌트 레이아웃의 이해

14분

14. List 컴포넌트 작성

8분

15. ListTitle 컴포넌트 작성

27분

16. List 데이터의 수정(edit)과 삭제(remove)

10분

17. List 정렬을 위한 모듈(sortablejs)

21분

18. List 데이터의 재정렬(reorder)

7분

19. 정렬 상태 클래스 - ghost, chosen, drag, fallback

14분

20. CreateCard 컴포넌트 작성

11분

21. Card 생성(add)

8분

22. Card 컴포넌트 작성

12분

23. Card 데이터의 수정(edit)과 삭제(remove)

8분

24. Card 정렬(sortablejs)과 dataset

15분

25. Card 데이터 재정렬(reorder)

9분

26. Card 정렬 상태(ghost, chosen)에 대한 스타일 추가

3분

27. 수정 모드일 때 정렬 기능 끄기

19분

28. GitHub 저장소 생성과 프로젝트 Push

11분

29. Netlify를 통한 지속적인 배포(Continuous Deployment, CD)

16분

30. word-break 적용과 제품 모드의 로그 제거(@rollup/plugin-strip)

11분

Snowpack

1. Snowpack이란?

5분

2. Snowpack 기반의 Svelte 템플릿 설치 및 구성 이해

15분

Trello 클론 앱을 Snowpack 프로젝트로 이관하기

1. 주요 디렉토리 복사 및 HMR 적용

6분

2. 핵심 모듈 설치 및 구성

8분

3. SCSS 및 Svelte Preprocess 구성

6분

4. 제품 모드의 로그 제거 구성

8분

5. 코드 최적화(최소화) 및 경로 별칭 구성

5분

6. GitHub 저장소 생성과 프로젝트 Push

5분

7. Netlify를 통한 지속적인 배포

3분

마치며..

Svelte 강의를 마치며

2분

커뮤니티 게시판

전체
질문
자유주제

질문
점이 추가가 안되어요

안녕하세요, 라이프 사이클에서 소스 코드를 따라하던 중, 아무리 토글 버튼을 클릭해도 점이 추가가 안돼서 문의드립니다. 제가 어디서 잘못한 부분이 있는지 소스코드 첨부드립니다. ㅜㅜ 한번만 확인해주시면 감사하겠습니다. <script> import {onMount, onDestroy, beforeUpdate, afterUpdate} from 'svelte' let name='Something..' let h1 function moreDot(){ name +='.' } beforeUpdate(() =>{ console.log('beforeUpdate'); console.log(h1 && h1.innerText); }) afterUpdate(() =>{ console.log('afterUpdate'); console.log(h1.innerText); }) onMount(() =>{ console.log('onMount'); h1=document.querySelector('h1') }) onDestroy(()=>{ console.log('onDestroy') }) </script> <h1 on:click={moreDot}>{name}</h1>

먼지의하루

1

0

1

커뮤니티