LUVIT♥ 새로운 웹 개발의 시작 스벨트

머리말 xi
베타리더 후기 xii
이 책을 읽는 법 xiv
학습 가이드 xvi
로드맵 xviii

PART 1 스벨트 소개 및 개발 환경 구축
CHAPTER 1 스벨트 개요
1.1 스벨트의 현 위치와 웹 프레임워크 4 / 1.2 스벨트의 탄생과 철학 5 / 1.3 스벨트의 장점 8 / 돌아보기&쪽지시험 12
CHAPTER 2 스벨트 개발 환경 구축
2.1 사이트를 활용한 Playground 14 / 2.2 로컬 개발 환경 구축 16 / 2.3 스벨트 프로젝트 설치 19 / 2.4 스벨트 프로젝트 폴더 구조 24 / 돌아보기&쪽지시험 25

PART 2 스벨트 컴포넌트 사용법
CHAPTER 3 컴포넌트 기본 사용법
3.1 컴포넌트란? 30 / 3.2 컴포넌트 제작 32 / 돌아보기&쪽지시험 36
CHAPTER 4 상탯값 관리
4.1 상탯값이란? 38 / 4.2 클릭 이벤트를 이용한 상탯값 변경 41 / 4.3 객체 속성을 상탯값으로 활용 43 / 4.4 객체로 이루어진 배열을 이용하여 상탯값 표시 45 / 돌아보기&쪽지시험 47
CHAPTER 5 반응성
5.1 삼항 연산자를 통한 마크업에서의 반응성 51 / 5.2 스크립트 반응성 코드 52 / 돌아보기&쪽지시험 57
CHAPTER 6 스벨트 이벤트
6.1 이벤트 문법 60 / 6.2 이벤트 수식어 65 / 돌아보기&쪽지시험 67
CHAPTER 7 스벨트 props
7.1 props 기본 문법 70 / 7.2 props 기본값 설정 72 / 7.3 props 데이터 변경 74 / 7.4 스프레드 props 76 / 돌아보기&쪽지시험 78
CHAPTER 8 스벨트 로직
8.1 논리 로직: if 블록 82 / 8.2 반복 로직: each 블록 86 / 돌아보기&쪽지시험 91

PART 3 스벨트 바인딩과 데이터 관리
CHAPTER 9 폼 관련 요소 바인딩
9.1 바인딩이란? 96 / 9.2 입력 요소 관련 바인딩 97 / 9.3 선택 상자 관련 바인딩 102 / 돌아보기&쪽지시험 107
CHAPTER 10 기타 요소 바인딩
10.1 each 블록 바인딩 110 / 10.2 멀티미디어 요소 바인딩 116 / 10.3 공간 바인딩 119 / 10.4 bind:this 바인딩 121 / 10.5 컴포넌트 바인딩 126 / 돌아보기&쪽지시험 129
CHAPTER 11 스벨트 slot
11.1 slot 기본 사용법 131 / 11.2 fallback slot 133 / 11.3 slot 이름 설정 135 / 11.4 slot props 138 / 11.5 조건 관련 slot 141 / 돌아보기&쪽지시험 143
CHAPTER 12 라이프 사이클
12.1 onMount 함수 147 / 12.2 onDestroy 함수 150 / 12.3 beforeUpdate와 afterUpdate 함수 152 / 12.4 tick 함수 156 / 돌아보기&쪽지시험 161
CHAPTER 13 Context API
13.1 Context API란? 163 / 13.2 Context API 기본 사용법 166 / 13.3 dispatch 169 / 돌아보기&쪽지시험 172
CHAPTER 14 스토어
14.1 writable 스토어 174 / 14.2 readable 스토어 180 / 14.3 derived 스토어 182 / 14.4 커스텀 스토어 184 / 14.5 스토어 바인딩 186 / 돌아보기&쪽지시험 188

PART 4 스벨트 스타일과 DOM 제어
CHAPTER 15 스벨트 CSS 제어
15.1 스벨트 CSS 기본 사용법 192 / 15.2 class: 지시문 194 / 15.3 rollup을 통한 Sass 플러그인 설치 198 / 돌아보기&쪽지시험 201
CHAPTER 16 스벨트 트랜지션
16.1 transition: 지시문 203 / 16.2 페이드 효과 204 / 16.3 블러 효과 208 / 16.4 슬라이드 효과 211 / 16.5 스케일 효과 213 / 16.6 플라이 효과 215 / 16.7 그리기 효과 217 / 16.8 크로스페이드 효과 219 / 16.9 커스텀 트랜지션 만들기 225 / 16.10 트랜지션 이벤트 230 / 16.11 트랜지션 수식어 232 / 돌아보기&쪽지시험 234
CHAPTER 17 애니메이션과 모션
17.1 animate: 지시문과 flip 효과 236 / 17.2 커스텀 애니메이션 만들기 239 / 17.3 모션의 tweened 효과 241 / 17.4 모션의 spring 효과 243 / 돌아보기&쪽지시험 246
CHAPTER 18 스벨트 액션
18.1 액션의 기본 사용 방법 248 / 18.2 액션에 매개변수 전달 251 / 18.3 update와 destory 253 / 18.4 외부 라이브러리를 이용한 액션 256 / 돌아보기&쪽지시험 258
CHAPTER 19 스벨트 특별 요소
19.1 <svelte:self> 요소 260 / 19.2 <svelte:component> 요소 262 / 19.3 <svelte:element> 요소 264 / 19.4 <svelte:window> 요소 266 / 19.5 <svelte:document> 요소 269 / 19.6 <svelte:body> 요소 271 / 19.7 <svelte:head> 요소 273 / 19.8 <svelte:options> 요소 274 / 19.9 <svelte:fragment> 요소 278 / 돌아보기&쪽지시험 281

PART 5 심플 프로젝트
CHAPTER 20 심플 프로젝트 1: My Bucket List
20.1 프로젝트 생성 및 라이브러리 설치 286 / 20.2 컴포넌트 생성 288 / 20.3 CSS 설정 289 / 20.4 컴포넌트 구성 290 / 20.5 데이터 관리 294 / 20.6 BucketItem 이벤트 관리 299 / 20.7 데이터 추가 307 / 20.8 화면전환 효과 추가하기 310 / 20.9 스토어를 이용한 리팩터링 311 /
CHAPTER 21 심플 프로젝트 2: Best Tour
21.1 프로젝트 생성 및 라이브러리 설치 325 / 21.2 컴포넌트 생성 326 / 21.3 CSS 설정 328 / 21.4 데이터 관리 329 / 21.5 컴포넌트 구성 331 / 21.6 BestItem 이벤트 관리 335 / 21.7 데이터 추가 337

PART 6 라우터 및 서버 데이터 통신
CHAPTER 22 라우터
22.1 svelte-routing의 기본 사용법 346 / 22.2 svelte-routing의 파라미터 352 / 22.3 쿼리스트링을 이용한 주소 처리 356 / 22.4 Best Tour 여행상품 세부 페이지 제작 360 / 돌아보기&쪽지시험 366
CHAPTER 23 서버 데이터 통신
23.1 REST API 368 / 23.2 axios 라이브러리 369 / 23.3 await 블록을 이용한 통신 제어 372 / 돌아보기&쪽지시험 375

PART 7 실전 프로젝트
CHAPTER 24 TMDB API
24.1 TMDB 소개 및 회원가입 380 / 24.2 TMDB API 활용 383
CHAPTER 25 SwiperJS 라이브러리
25.1 SwiperJS 소개 및 스벨트 버전 389 / 25.2 SwiperJS 활용 예제 391
CHAPTER 26 OTT 웹 앱 서비스 제작: 무빙
26.1 프로젝트 구조 생성 및 라이브러리 설치 397 / 26.2 공통 컴포넌트 제작 및 서브페이지 생성 401 / 26.3 TMDB에서 가져온 데이터를 스토어에 담기 409 / 26.4 Swiper를 통한 메인 이미지 제작 414 / 26.5 현재상영작 - 서브페이지 리스트 컴포넌트 제작 428 / 26.6 현재상영작 - 리스트별 상세페이지 제작 435 / 26.7 인기영화 페이지 제작 440 / 26.8 개봉예정작 페이지 제작 446 / 26.9 높은평점 페이지 제작 451 / 26.10 깃허브 Pages에 배포 457

특별부록 스벨트킷
APPENDIX A 스벨트킷 프로젝트
A.1 스벨트킷 소개 472 / A.2 프로젝트 만들기 473 / A.3 프로젝트 구조 확인 476
APPENDIX B 핵심 개념: 라우팅
B.1 기본 라우팅 처리 479 / B.2 레이아웃 482 / B.3 동적 라우팅 484 / B.4 스토어 페이지 488

찾아보기 490

현재 자바스크립트 웹 개발에서 프레임워크는 빼놓을 수 없는 중요한 요소입니다. 그중에서도 리액트는 npm 트렌드 차트에서 독보적인 인기를 자랑하며 대세로 자리 잡고 있습니다. 그렇다면 왜 스벨트를 배워야 할까요? 그 이유는 바로 ‘Easy, Easy, Easy’하기 때문입니다. / 많은 프런트엔드 개발자들이 리액트를 배우는 데 어려움을 겪습니다. 웹 프런트엔드를 처음 배우거나 웹 퍼블리셔에서 프런트엔드 개발자로 전환할 때, 리액트는 복잡하고 어렵게 느껴질 수 있습니다. 이때 스벨트는 훨씬 더 쉬운 대안이 될 수 있습니다. 스벨트를 통해 프런트엔드 프레임워크의 기본을 익힌 후, 다른 프레임워크로 넘어가는 것도 좋은 방법입니다.

컴포넌트(compontent)는 재사용 가능한 UI를 말합니다. 재사용 가능한 원본 컴포넌트를 만들어 두고, 필요시 언제든지 복제본인 인스턴스(instance)를 생성해 사용할 수 있습니다. 원본 컴포넌트를 수정하면, 해당 컴포넌트를 기반으로 한 모든 인스턴스도 자동으로 변경되는 구조로 이루어져 있습니다. 현재 대부분의 프런트엔드 언어는 컴포넌트 기반으로 개발합니다. 그렇다면, 왜 재사용 가능한 UI를 사용하는지 살펴보겠습니다.