스벨트로 시작하는 웹 프런트엔드 (Svelte 프레임워크를 이용한 웹 프런트엔드 기초부터 실전 SNS프로젝트까지)

김근영

2000년도중반부터본격적으로웹개발을시작하여현재까지프리랜서개발자로활동하고있다.약5년간AmplixBI솔루션실무자교육을진행하고개발을지원하며새로운기술을효율적으로전달하는경험을쌓았다.현재는개발업무와함께개발자들에게도움이될만한웹프런트엔드분야의새로운기술을찾고,강좌와책을통해이를공유하고있다.

현)프리랜서개발자
전)㈜비즈플러그전략솔루션사업부팀장
전)㈜퍼니몽키스위니스토리서비스개발팀장

-블로그:https://medium.com/freeseamew
-깃허브:https://github.com/freeseamew
-스벨트강좌:https://www.inflearn.com/course/만들면서-배우는-스벨트/

Chapter01Svelte소개
1-1웹프런트엔드의과거와현재
1-2Svelte의등장
1-3Svelte장점
____1-3-1Writelesscode:보다적은코드
____1-3-2NovirtualDOM:가상돔없이
____1-3-3Trulyreactive:진정한반응성

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

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

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

Chapter05컴포넌트통신고급
5-1contextAPI
____5-1-1contextAPI기본사용방법
____5-1-2contextAPI활용예제
5-2dispatch
5-3store
____5-3-1writablestore
____5-3-2derivedstore
____5-3-3readablestore

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

Chapter07Modal로배우는컴포넌트실습

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

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

Chapter10서버와의통신방법
10-1fetch를이용한통신
10-2axios를이용한통신
10-3{#await}블록을이용한통신제어

Chapter11실전프로젝트(2)-SNS서비스만들기
11-1SLOG프로젝트설명
____11-1-1SLOG서비스기능
11-2API설치및설명
____11-2-1SLOG백엔드설치
____11-2-2SLOGAPI설명
11-3프로젝트생성및컴포넌트배치
____11-3-1프로젝트생성
____11-3-2디자인요소배치
____11-3-3컴포넌트배치
11-4라우터설정
11-5axios를이용한서버통신설정
11-6스토어배치
11-7인증구현
____11-7-1인증토큰설명
____11-7-2authToken스토어작성
____11-7-3auth스토어작성
____11-7-4로그인상태체크
____11-7-5로그인페이지작성
____11-7-6회원가입페이지작성
____11-7-7작성된인증기능테스트
11-8글목록구현
____11-8-1currentArticlesPage스토어작성
____11-8-2articles스토어작성
____11-8-3무한스크롤기능구현
____11-8-4무한스크롤문제해결
11-9글작성구현
____11-9-1로그인상태에따른글작성폼변화
____11-9-2ArticleAddForm컴포넌트작성
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-2Aritcle컴포넌트에'좋아요'기능추가
11-13보기모드변경구현
____11-13-1보기모드변경원리
____11-13-2스토어작성
____11-13-3ArticleHeader컴포넌트에보기모드기능구현
11-14앱완성도높이기
____11-14-1폼검증(formvalidation)구현
____11-14-2날짜보기수정
____11-14-3로그아웃보완
11-15마무리

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

Chapter13특수요소
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〉

Chapter14유용한자바스크립트문법
14-1화살표함수
14-2배열조작메소드

프런트엔드웹개발트렌드를리딩하는강력한프레임워크,Svelte!
프런트엔드3대장React·Vue·Angular의자리를위협한다

스벨트는VirtualDOM(가상돔)과런타임에로드할프레임워크가없고,굉장히빠른퍼포먼스속도를자랑하는최신프레임워크다.StateofJS2020Survey에서개발자의86%가스벨트사용에만족했고,StackOverflow가2021년실시한설문조사에따르면스벨트가71.42%로리액트(69.28%)와뷰(64.41%)를제치고가장사랑받는프레임워크로선정되었다.이런추세라면스벨트는곧대중적인프레임워크로성장하여새로운분야를개척해나갈것이다.

누구보다빠르고효율적으로웹개발을하고싶은독자분께추천합니다!

프런트엔드3대장보다적은코드로강력한결과를내는스벨트가상승세를타고있는지금,스벨트를선택하지않을이유는없다.쉽고빠르게웹애플리케이션개발을하고싶은분,새로운웹개발트렌드에관심있는분이라면스벨트를시작해야할때이다.이책과함께스벨트를빠르게습득하여커리어영역을넓히고더욱경쟁력있는개발자가되길바란다.

이책의독자
-Svelte로최신웹애플리케이션을구축하려는프런트엔드또는풀스택개발자
-JavaScript까지학습한후어떤프런트엔드프레임워크를선택해야할지고민중인입문자
-React,Vue,Angular등다른프레임워크를사용해본경험이있는개발자

소스코드다운로드
https://github.com/bjpublic/Svelte