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

오시내

저자:오시내
강의를사랑하는프런트엔드개발자.컴퓨터공학을전공하진않았지만,디자인부터시작해서프런트엔드와백엔드까지아우르며웹개발에진심인1n년차개발자이자강사다.고양이와여행을좋아하며,가장큰즐거움은강의를통해지식을나누는것이다.현재유튜브‘오쌤의니가스터디’채널을운영하면서미래의프런트엔드개발자들과활발히소통하고있다.

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

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

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

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

PART4스벨트스타일과DOM제어
CHAPTER15스벨트CSS제어
15.1스벨트CSS기본사용법192/15.2class:지시문194/15.3rollup을통한Sass플러그인설치198/돌아보기&쪽지시험201
CHAPTER16스벨트트랜지션
16.1transition:지시문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
CHAPTER17애니메이션과모션
17.1animate:지시문과flip효과236/17.2커스텀애니메이션만들기239/17.3모션의tweened효과241/17.4모션의spring효과243/돌아보기&쪽지시험246
CHAPTER18스벨트액션
18.1액션의기본사용방법248/18.2액션에매개변수전달251/18.3update와destory253/18.4외부라이브러리를이용한액션256/돌아보기&쪽지시험258
CHAPTER19스벨트특별요소
19.1요소260/19.2요소262/19.3요소264/19.4요소266/19.5요소269/19.6요소271/19.7요소273/19.8요소274/19.9요소278/돌아보기&쪽지시험281

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

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

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

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

찾아보기490

개발자가사랑하는프레임워크스벨트,왜지금스벨트를배워야할까요?
현재웹개발에서퍼포먼스와사용자경험은핵심요소로자리잡았습니다.스벨트는이두가지를완벽히충족시키면서전세계개발자들의주목을받고있습니다.리액트,Vue.js와같은기존프레임워크와달리컴파일러중심의구조를채택하여가볍고빠른애플리케이션을만들어냅니다.이를통해최적의성능과간결한코드작성이라는두마리토끼를잡을수있죠.

이책만의특별한점
스벨트는강력하지만초보자들에게는다소낯설게느껴질수있습니다.이책은스벨트를처음접하는사람부터중급자를위한최고의가이드입니다.독학으로학습하는개발자부터팀프로젝트에스벨트를도입하려는실무자까지,다양한독자층을고려하여구성했습니다.

1.입문자를위한스벨트의기초
기초문법부터시작하여각개념을단계적으로배웁니다.복잡한개념은풍부한예제와시각자료로설명해,처음배우는분들도막힘없이따라할수있습니다.

2.실무중심의프로젝트예제
이론학습만으로실무에적용하는기술을배우기는어렵습니다.이책은실제프로젝트에서활용할수있는다양한예제를포함합니다.간단한컴포넌트부터상태관리,애니메이션,데이터통신까지실무에서바로적용가능한기술을배울수있습니다.MyBucketList,BestTour,무빙사이트제작프로젝트를통해실무에서스벨트를어떻게사용하는지익혀보세요.

3.저자가제공하는무료동영상강의
책만으로부족하다고느낄초보자들을위해저자가직접제작한동영상강의를무료로제공합니다.책의흐름에맞춰진행되는강의는핵심이론과실습프로젝트를알기쉽게설명하며,실전에서유용한팁까지담았습니다.QR코드로바로접근할수있어,스벨트를처음배우는독자도쉽고빠르게따라할수있습니다.

이책은누가읽으면좋을까요?
최신프레임워크로웹개발의첫걸음을시작하고싶은분
프로젝트에스벨트를도입해최적화를이루고싶은개발자
새로운프레임워크를익히고싶은프런트엔드개발자

먼저읽은독자들의한줄평
기능구현을위해불필요하게복잡한코드를작성하고있다는생각을해본적이있다면,이책을통해학습할가치가충분하다고생각합니다._김진영님
트렌드에맞춘스벨트킷을포함해여러실전예제까지다루며,이한권의책으로스벨트의기초부터실전까지모두익힐수있습니다._김효진님
실전프로젝트를통해실제개발환경에서스벨트를어떻게활용하는지생생하게보여줘매우유용했습니다._이석곤님
프런트엔드입문자부터스벨트를처음접하는프런트엔드개발자까지모두에게폭넓게도움이될만한내용을잘정리해두었습니다._이용진님
백엔드개발자의관점에서스벨트를접했는데,주변에서들은것처럼리액트나Vue.js보다확실히쉽게느껴졌습니다._이정훈님
이책은스벨트의핵심개념을직관적으로설명해,스벨트와리액트사이에서고민하는개발자나프런트엔드개발에익숙하지않은엔지니어에게도큰도움이됩니다._이한섭님

웹개발의미래,스벨트를지금시작하세요
군더더기없는코드,뛰어난퍼포먼스,그리고개발의즐거움을모두누리고싶다면이책과함께하세요.스벨트는선택이아닌필수가되고있습니다.이책은여러분을스벨트전문가로이끄는최고의길잡이가될것입니다.