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

CHAPTER 01 - CHAPTER 04 ▶ 22.06.25 토 ✔️
CHAPTER 05 ▶ 22.06.27 월 ✔️

CHAPTER 01 Svelte 소개

• 웹 프론트엔드의 과거와 현재
• Svelte의 등장
• Svelte의 장점

CHAPTER 02 학습 환경

• REPL을 통한 예제 실행방법
• 로컬 개발환경 구축
• Svelte 설치 폴더 설명
• 소스코드 실행방법

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

• 컴포넌트 기본
• State(상태값)
• Reactivity(반응성)
• Event
• Props를 이용한 컴포넌트 통신방법

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

• 논리블록
• 반복블록
• Binding
• 슬롯(Slot)
• 라이프사이클

CHAPTER 05 컴포넌트 통신 고급

• context API
• dispatch
• store

CHAPTER 06 스타일 및 효과

• CSS 제어
• transition: 화면전환
• motion
• actions

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

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

🍫 simple todo with svelte

• Todo 프로젝트 설명
• 컴포넌트 배치
• Todo 리스트 출력
• Todo 입력
• Todo 삭제
• Todo 수정
• count & Todo 보기모드
• 화면전환 효과 적용
• 스토어를 통한 Todo 리팩토링

CHAPTER 09 라우터(Router)

🍫 router with tinro

• 라우터란?
• tinro 설치
• 라우팅 기능
• 중첩 라우팅
• 파라미터 전달 및 받기
• 프로그래밍 제어
• 화면전환
• 라우팅 가드

CHAPTER 10 서버와의 통신방법

• fetch를 이용한 통신
• axios를 이용한 통신
• {#await} 블록을 이용한 통신 제어

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

🍫 sns with svelte

• SLOG 프로젝트 설명
• API 설치 및 설명
• 프로젝트 생성 및 컴포넌트 배치
• 라우터 설정
• axios를 이용한 서버통신 설정
• 스토어 배치
• 인증 구현
• 글 목록 구현
• 글 작성 구현
• 글 수정 및 삭제 구현
• 코멘트 기능 구현
• '좋아요' 기능 구현
• 보기모드 변경 구현
• 앱 완성도 높이기
• 마무리

CHAPTER 12 rollup 소개 및 번들러 이해

• 번들러란?
• rollup 소개
• 기본 설정
• SCSS 설정

CHAPTER 13 특수 요소

• svelte:self
• svelte:component
• svelte:window
• svelte:body
• svelte:head
• svelte:options
• svelte:fragment

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

• 화살표함수
• 배열조작 메소드