실전 스벨트 & 스벨트킷 입문

하마구치교헤이,고세키야스히로

저자:하마구치교헤이
1990년미에현출생.쓰쿠바대학정보과학류에서컴퓨터과학을전공하고,이후15년간기업가이자소프트웨어엔지니어로활동했다.현재는미국및독일기업을대상으로엔지니어링컨설팅을하고있고,개인정보보호를추진하는비영리단체인ConsciousDigital에서등록정보보안전문가로서일본법률대응을지원하고있다.

저자:고세키야스히로
1990년야마가타현출생.쓰쿠바대학정보학군을졸업하고,현재는주로웹애플리케이션분야의소프트웨어엔지니어로활동하고있다.학부시절시스템프로그래밍수업에서직접만든HTTP서버가브라우저와통신하는것에감동한이후웹개발재미에푹빠져지내고있다.프런트엔드개발을하면서리액트,뷰를거쳐스벨트가좋다는소문을듣고사용하기시작했고,지금은프로젝트에서도스벨트를사용하고있다.최근에는전공한분산소프트웨어분야와웹분야의교차점에해당하는WebRTC기술에주목하여WebRTC를이용한영상채팅SDK를개발하고있다.

역자:이춘혁
프로그래밍언어와자연어모두관심이많은개발자다.고려대학교에서한문학을전공하며자연스레중국어와일본어를익히게되었다.중국,스페인,일본등에서생활하며다양한문화와외국어를접했고,공부에매진해영어/중국어/일본어/스페인어를이해하고구사할수있는수준이되었다.일본에서웹과ADAS개발업무를담당하였으며,현재는한국비건인증원에서웹시스템개발자로일하고있다.신기술과최적화에관심이많으며,‘젊음을값진모험과바꾸자’라는마음으로다양한경험을하고,개발에서는한우물을깊이그리고효율적으로파기위해노력중이다.

옮긴이머리말ix
베타리더후기xi
추천서문(야마시타유이치로)xiii
시작하며xv

CHAPTER1스벨트시작하기1
1.1스벨트의탄생과특징1
__1.1.1스벨트의특징1
__1.1.2스벨트의‘컴파일’2
__1.1.3가상DOM의미사용3
1.2스벨트튜토리얼:온라인쇼핑페이지만들기5
__1.2.1프로젝트준비6
__1.2.2HTML/CSS를사용한화면구성요소생성7
__1.2.3변수와이벤트핸들러를사용한장바구니담기버튼기능추가11
__1.2.4배열과{#each}구문을통한관련상품표시14
__1.2.5컴포넌트분리20

CHAPTER2스벨트기초27
2.1환경구축27
__2.1.1스벨트공식REPL28
__2.1.2Vite를사용하는개발환경구축29
2.2컴포넌트31
__2.2.1.svelte파일구조31
__2.2.2템플릿기초문법33
__2.2.3스타일36
__2.2.4블록39
__2.2.5컴포넌트사용43
__2.2.6속성46
__2.2.7슬롯52
__2.2.8이벤트62
__2.2.9라이프사이클69

CHAPTER3스벨트의리액티비티78
3.1컴포넌트의리액티비티78
__3.1.1변수대입78
__3.1.2$:prefix79
__3.1.3배열과객체의업데이트82
__3.1.4입력바인딩85
__3.1.5미디어요소의바인딩91
__3.1.6컴포넌트바인딩93
__3.1.7this바인딩95
3.2스토어97
__3.2.1writable스토어97
__3.2.2$를사용하는자동구독100
__3.2.3$를사용하는대입101
__3.2.4readable스토어102
__3.2.5derived스토어105
__3.2.6custom스토어107
__3.2.7스토어의바인딩111

CHAPTER4스벨트의고급기능114
4.1고급템플릿문법114
__4.1.1키를포함하는{#each}블록115
__4.1.2{#key}블록117
__4.1.3{@...}태그118
__4.1.4태그120
4.2모듈콘텍스트129
__4.2.1각인스턴스간상태공유129
__4.2.2컴포넌트이외에내보내기131
4.3모션,트랜지션,애니메이션134
__4.3.1모션134
__4.3.2트랜지션140
__4.3.3애니메이션148
4.4콘텍스트150
__4.4.1콘텍스트API사용방법150
__4.4.2콘텍스트의특징과스토어비교153
4.5액션154
__4.5.1액션의기본적인사용법154
__4.5.2액션의예:DOM요소의리사이징감지155

CHAPTER5스벨트킷으로다중페이지애플리케이션개발하기158
5.1스벨트킷의기본과도입158
__5.1.1스벨트킷이란?158
__5.1.2프로젝트생성159
__5.1.3스벨트킷프로젝트의파일구조161
5.2데모애플리케이션의구현과해석163
__5.2.1페이지를나타내는.svelte파일163
__5.2.2레이아웃-여러페이지에공통요소배치166
__5.2.3폼액션-프로그레시브한웹애플리케이션을구성하는구조167
5.3온라인쇼핑애플리케이션의확장170
__5.3.1①스벨트킷프로젝트생성171
__5.3.2②상품페이지에대응하는라우트생성171
__5.3.3③상품데이터와장바구니데이터가져오기172
__5.3.4④폼액션으로장바구니추가180/5.3.5⑤‘추천상품’표시183

CHAPTER6스벨트킷레퍼런스189
6.1스벨트킷의주요개념189
__6.1.1페이지라우트189
__6.1.2서버라우트190
__6.1.3폼액션190
__6.1.4라우팅191
__6.1.5레이아웃191
__6.1.6스벨트킷의실행모델191
6.2페이지라우트192
__6.2.1+page.svelte192
__6.2.2+page.js와+page.server.js194
6.3폼액션195
__6.3.1폼액션기초195
__6.3.2프로그레시브인핸스먼트198
6.4서버라우트203
__6.4.1서버라우트란?203
6.5라우팅205
__6.5.1라우트205
__6.5.2라우트에배치할수있는파일205
__6.5.3고급라우팅206
6.6레이아웃212
__6.6.1레이아웃기초212
__6.6.2레이아웃네스팅213
__6.6.3레이아웃네스팅초기화213
6.7훅215
__6.7.1스벨트킷의훅215
__6.7.2handle215
__6.7.3handleFetch216
__6.7.4handleError217
6.8헬퍼모듈218
__6.8.1$app/environment-실행환경관련정보218
__6.8.2$app/forms-폼액션관련헬퍼218
__6.8.3$app/navigation-페이지이동관련헬퍼218
__6.8.4$app/paths-경로관련헬퍼219
__6.8.5$app/stores-애플리케이션레벨스토어220
__6.8.6@sveltejs/kit221
__6.8.7$env:환경변수에접근할수있는모듈221
6.9빌드와배포222
__6.9.1설정이불필요한호스팅서비스-adapter-auto222
__6.9.2Node서버로빌드-adapter-node223
__6.9.3정적사이트생성과SPA모드-adapter-static226

CHAPTER7MongoDB와Vercel을사용한운영환경구축229
7.1스벨트킷애플리케이션과운영환경229
__7.1.1개발환경/샘플애플리케이션229
__7.1.2운영환경/빌드/배포230
7.2MongoDB의도입232
__7.2.1데이터베이스의역할232
__7.2.2MongoDBAtlas로데이터베이스생성233
__7.2.3mongodb패키지도입과접속정보관리234
__7.2.4장바구니를MongoDB로구현236
__7.2.5상품을MongoDB로구현238
7.3Vercel을통한배포242
__7.3.1깃허브설정242
__7.3.2Vercel설정243
__7.3.3MongoDBAtlas의Integration도입243
__7.3.4환경변수적용244
__7.3.5운영환경DB시드244
__7.3.6작동확인245

CHAPTER8Auth0를통한패스워드없는로그인구현과세션관리246
8.1Auth0준비246
__8.1.1패스워드없는인증이란?246
__8.1.2Auth0계정생성과초기설정247
8.2로그인구현247
__8.2.1로그인처리247
__8.2.2로그인페이지생성251
__8.2.3Auth0의API를호출하는함수253
__8.2.4콜백URL구현255
__8.2.5세션정보를데이터베이스에저장257
__8.2.6로그인작동확인258
8.3로그인유저의판단과표시258
__8.3.1로그인유저정보가져오기258
__8.3.2로그인중인유저의표시260
__8.3.3로그아웃기능261
8.4유저별장바구니생성262
__8.4.1유저ID별장바구니생성262
8.5Vercel배포265
__8.5.1Auth0사용을위한준비265
__8.5.2환경변수설정266

CHAPTER9유저경험개선―OGP태그와프리렌더링268
9.1OGP태그추가268
__9.1.1OGP태그와자바스크립트애플리케이션268
__9.1.2상품페이지에OGP태그추가269
__9.1.3SSR비활성화271
__9.1.4CSR비활성화271
__9.1.5Vercel에배포하고카드확인272
9.2프리렌더링273
__9.2.1상품페이지프리렌더링273
__9.2.2장바구니페이지준비276
__9.2.3클라이언트에서장바구니정보가져오기278
__9.2.4‘장바구니담기’버튼의작동개선281/9.2.5프리렌더링작동확인282

APPENDIXA한국어판부록286
A.1Auth0286
__A.1.1계정등록286
__A.1.2애플리케이션생성과설정287
__A.1.3패스워드없는로그인설정287
__A.1.4콜백URL추가288
__A.1.5인증정보가져오기290
__A.1.6패스워드없는로그인에러해결290
A.2MongoDBAtlas293
__A.2.1계정등록293
__A.2.2서버생성293
__A.2.3보안설정295
__A.2.4액세스정보확인하기296
A.3깃허브298
__A.3.1계정등록298
__A.3.2리포지터리생성298
__A.3.3액세스토큰의생성299
A.4Vercel299
__A.4.1계정등록299
__A.4.2신규프로젝트(깃허브리포지터리연동)생성방법300
__A.4.3MongoDBAtlas인티그레이션연동방법302
__A.4.4환경변수설정방법305
__A.4.5환경변수확인과복사306
__A.4.6환경변수의추가306

찾아보기309

MZ개발자가사랑하는스벨트와스벨트킷으로UI&웹앱개발시작하기

단순함을모티브로만들어진스벨트는실용적이면서도최소한의API를갖춘세련된프레임워크로프런트엔드개발자들에게사랑받고있다.이책은스벨트의기본개념부터프로젝트를설정하여개발을시작하는방법,복잡한UI구축에편리하게사용할수있는기능을소개한다.나아가스벨트킷프로젝트를만들고,서버를포함한쇼핑몰사이트웹애플리케이션을개발한다.한국어판부록에서는스벨트킷프로젝트에서활용하는Auth0,MongoDBAtlas,GitHub,Vercel사용법을설명한다.자바스크립트프레임워크에익숙한독자는기존UI프레임워크에비해스벨트가얼마나슬림하고유연한지알수있고,입문자는스벨트를통해쉽게개발에흥미를붙이고원하는애플리케이션을구현할수있다.간결하고직관적이며뛰어난성능의스벨트로다음세대를준비해보자.

요즘프레임워크스벨트와스벨트킷입문부터고급기능,쇼핑몰사이트를만드는실전예제까지

스벨트는단순하고,강력하며,우아하다.아직스벨트를접해보지못한모든웹개발자에게이책으로스벨트와만나보기를추천하고싶다.스벨트의컴포넌트는이해하기쉽고,코드는간결하고,파일은가볍다.코딩프로세스는원활해지고,메모리누수를걱정할필요가없다.

이책은간단한튜토리얼부터시작해스벨트와스벨트킷(스벨트를베이스로하는웹애플리케이션프레임워크)으로쇼핑몰사이트웹애플리케이션프로젝트를만들어본다.1장에서는스벨트의특징을소개하고간단한온라인쇼핑몰페이지를만들며스벨트튜토리얼을진행한다.2장에서는환경을구축하고컴포넌트에대해설명한다.3장에서는스벨트가어떤리액티브구조를제공하는지설명하고,4장에서는UI를더고급스럽게구현하는데도움되는고급기능을알아본다.

5장에서는스벨트킷으로다중페이지애플리케이션을개발해보고,6장에서는스벨트킷의주요개념을자세히살펴본다.7장에서는MongoDB와Vercel을사용해운영환경을구축하고배포해본다.8장에서는Auth0를통해패스워드없는로그인을구현하고세션을관리하는방법을알아본다.9장에서는스벨트킷이제공하는SSR,CSR,프리렌더링의개념을살펴보면서상품페이지의유저경험을개선한다.한국어판에특별수록한부록에서는스벨트킷프로젝트에서활용하는Auth0,MongoDBAtlas,GitHub,Vercel사용법을자세히설명한다.

스벨트는리액트나뷰와비교하면적은사전지식만으로도개발을시작할수있도록만들어졌다.
이책을통해쉽고빠르면서도깊이있게스벨트를이해할수있게되기를바란다.

주요내용
스벨트의리액티비티알아보기
모듈콘텍스트,트랜지션,액션등스벨트의고급기능
스벨트킷으로다중페이지애플리케이션개발하기
라우트,폼액션등스벨트킷레퍼런스
MongoDB와Vercel을사용한운영환경구축
Auth0를통한패스워드없는로그인구현과세션관리
OGP태그와프리렌더링으로유저경험개선