스벨트로 시작하는 웹 프런트엔드

Chapter 01 Svelte 소개

1-1 웹 프런트엔드의 과거와 현재
1-2 Svelte의 등장
1-3 Svelte 장점
____1-3-1 Write less code: 보다 적은 코드
____1-3-2 No virtual DOM: 가상돔 없이
____1-3-3 Truly reactive: 진정한 반응성

Chapter 02 학습 환경

2-1 REPL을 통한 예제 실행방법 소개
2-2 로컬 개발환경 구축
____2-2-1 Node.js 환경 설정
____2-2-2 비주얼 스튜디오 코드 설치
____2-2-3 Svelte 설치 및 실행
2-3 Svelte 설치 폴더 설명
____2-3-1 기본 구성요소 및 폴더 구조 설명
____2-3-2 Svelte 기본 구성요소
2-4 소스코드 실행방법

Chapter 03 컴포넌트(1) - 기본 사용방법

3-1 컴포넌트 기본
3-2 State(상태값)
3-3 Reactivity(반응성)
____3-3-1 마크업 영역에서의 반응성
____3-3-2 스크립트 영역에서의 반응성 - $:
____3-3-3 다른 프레임워크와 코드 비교
3-4 Event
____3-4-1 이벤트 기본 사용방법
____3-4-2 인라인(inline) 이벤트 사용방법
____3-4-3 이벤트 수식어(modifiers)
3-5 Props를 이용한 컴포넌트 통신방법
____3-5-1 Props 기본 사용방법
____3-5-2 Props 데이터 변경

Chapter 04 컴포넌트(2) - Template 제어

4-1 논리블록 {#if...}
____4-1-1 if 블록
____4-1-2 else 블록
____4-1-3 else-if 블록
4-2 반복블록 {#each...}
____4-2-1 Each 블록
4-3 Binding
____4-3-1 바인딩이란?
____4-3-2 레인지 바인딩
____4-3-3 셀렉트박스 바인딩
____4-3-4 체크박스 바인딩
____4-3-5 group input을 이용한 라디오 버튼 · 체크박스 바인딩
____4-3-6 contenteditable 바인딩
____4-3-7 컴포넌트 바인딩
4-4 슬롯(Slot)
____4-4-1 슬롯이란?
____4-4-2 슬롯 name 설정
____4-4-3 조건에 따른 표현
____4-4-4 슬롯에서의 Props 통신
4-5 라이프사이클

Chapter 05 컴포넌트 통신 고급

5-1 context API
____5-1-1 context API 기본 사용방법
____5-1-2 context API 활용 예제
5-2 dispatch
5-3 store
____5-3-1 writable store
____5-3-2 derived store
____5-3-3 readable store

Chapter 06 스타일 및 효과

6-1 CSS 제어
6-2 transition: 화면전환
____6-2-1 fade
____6-2-2 blur
____6-2-3 fly
____6-2-4 slide
____6-2-5 scale
____6-2-6 draw
____6-2-7 in · out
____6-2-8 crossfade
____6-2-9 flip을 이용한 애니메이션
6-3 motion
____6-3-1 tweened
____6-3-2 spring
6-4 actions
____6-4-1 액션 기본 사용방법
____6-4-2 액션에 인자 전달
____6-4-3 update · destroy
____6-4-4 액션을 통한 이벤트 제어
____6-4-5 액션을 이용한 외부 라이브러리 활용

Chapter 07 Modal로 배우는 컴포넌트 실습

Chapter 08 실전 프로젝트(1) - Todo 서비스 만들기

8-1 Todo 프로젝트 설명
____8-1-1 Todo 서비스 기능
____8-1-2 기본 환경설정
8-2 컴포넌트 배치
8-3 Todo 리스트 출력
8-4 Todo 입력
8-5 Todo 삭제
8-6 Todo 수정
8-7 count & Todo 보기모드
____8-7-1 count: 할 일 개수
____8-7-2 보기모드: 모두 보기 · 진행 · 완료
8-8 화면전환 효과 적용
8-9 스토어를 통한 Todo 리팩토링
____8-9-1 storeForm · storeTodo 작성
____8-9-2 fetchTodos · countTodo 작성
____8-9-3 컴포넌트에 스토어 적용

Chapter 09 라우터(Router)

9-1 라우터란?
9-2 tinro 설치
9-3 라우팅 기능
9-4 중첩 라우팅
9-5 파라미터 전달 및 받기
9-6 프로그래밍 제어
9-7 화면전환
9-8 라우팅 가드

Chapter 10 서버와의 통신방법

10-1 fetch를 이용한 통신
10-2 axios를 이용한 통신
10-3 {#await} 블록을 이용한 통신 제어

Chapter 11 실전 프로젝트(2) - SNS 서비스 만들기

11-1 SLOG 프로젝트 설명
____11-1-1 SLOG 서비스 기능
11-2 API 설치 및 설명
____11-2-1 SLOG 백엔드 설치
____11-2-2 SLOG API 설명
11-3 프로젝트 생성 및 컴포넌트 배치
____11-3-1 프로젝트 생성
____11-3-2 디자인 요소 배치
____11-3-3 컴포넌트 배치
11-4 라우터 설정
11-5 axios를 이용한 서버통신 설정
11-6 스토어 배치
11-7 인증 구현
____11-7-1 인증토큰 설명
____11-7-2 authToken 스토어 작성
____11-7-3 auth 스토어 작성
____11-7-4 로그인 상태 체크
____11-7-5 로그인 페이지 작성
____11-7-6 회원가입 페이지 작성
____11-7-7 작성된 인증기능 테스트
11-8 글 목록 구현
____11-8-1 currentArticlesPage 스토어 작성
____11-8-2 articles 스토어 작성
____11-8-3 무한스크롤 기능 구현
____11-8-4 무한스크롤 문제 해결
11-9 글 작성 구현
____11-9-1 로그인 상태에 따른 글 작성폼 변화
____11-9-2 ArticleAddForm 컴포넌트 작성
11-10 글 수정 및 삭제 구현
____11-10-1 글 팝업 메뉴 설정
____11-10-2 글 수정모드 만들기
____11-10-3 글 수정 삭제
11-11 코멘트 기능 구현
____11-11-1 코멘트 페이지 이동
____11-11-2 코멘트 페이지에서 선택된 글의 내용 보기 설정
____11-11-3 코멘트 추가 및 목록 보기
____11-11-4 글목록에서 코멘트 카운트 수정
11-12 '좋아요' 기능 구현
____11-12-1 '좋아요' 관련 스토어 추가
____11-12-2 Aritcle 컴포넌트에 '좋아요' 기능 추가
11-13 보기모드 변경 구현
____11-13-1 보기모드 변경 원리
____11-13-2 스토어 작성
____11-13-3 ArticleHeader 컴포넌트에 보기모드 기능 구현
11-14 앱 완성도 높이기
____11-14-1 폼 검증(form validation) 구현
____11-14-2 날짜 보기 수정
____11-14-3 로그아웃 보완
11-15 마무리

Chapter 12 rollup 소개 및 번들러 이해

12-1 번들러란?
12-2 rollup 소개
12-3 기본 설정
12-4 SCSS 설정

Chapter 13 특수 요소

13-1 〈svelte:self〉
13-2 〈svelte:component〉
13-3 〈svelte:window〉
13-4 〈svelte:body〉
13-5 〈svelte:head〉
13-6 〈svelte:options〉
13-7 〈svelte:fragment〉

Chapter 14 유용한 자바스크립트 문법

14-1 화살표함수
14-2 배열조작 메소드