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

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

CHAPTER 1 스벨트 시작하기 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.2 HTML/CSS를 사용한 화면 구성 요소 생성 7
__1.2.3 변수와 이벤트 핸들러를 사용한 장바구니 담기 버튼 기능 추가 11
__1.2.4 배열과 {#each} 구문을 통한 관련 상품 표시 14
__1.2.5 컴포넌트 분리 20

CHAPTER 2 스벨트 기초 27
2.1 환경 구축 27
__2.1.1 스벨트 공식 REPL 28
__2.1.2 Vite를 사용하는 개발 환경 구축 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

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

CHAPTER 4 스벨트의 고급 기능 114
4.1 고급 템플릿 문법 114
__4.1.1 키를 포함하는 {#each} 블록 115
__4.1.2 {#key} 블록 117
__4.1.3 {@...} 태그 118
__4.1.4 <svelte:...> 태그 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

CHAPTER 5 스벨트킷으로 다중 페이지 애플리케이션 개발하기 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

CHAPTER 6 스벨트킷 레퍼런스 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.svelte 192
__6.2.2 +page.js와 +page.server.js 194
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.2 handle 215
__6.7.3 handleFetch 216
__6.7.4 handleError 217
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/kit 221
__6.8.7 $env: 환경 변수에 접근할 수 있는 모듈 221
6.9 빌드와 배포 222
__6.9.1 설정이 불필요한 호스팅 서비스 - adapter-auto 222
__6.9.2 Node 서버로 빌드 - adapter-node 223
__6.9.3 정적 사이트 생성과 SPA 모드 - adapter-static 226

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

CHAPTER 8 Auth0를 통한 패스워드 없는 로그인 구현과 세션 관리 246
8.1 Auth0 준비 246
__8.1.1 패스워드 없는 인증이란? 246
__8.1.2 Auth0 계정 생성과 초기 설정 247
8.2 로그인 구현 247
__8.2.1 로그인 처리 247
__8.2.2 로그인 페이지 생성 251
__8.2.3 Auth0의 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.5 Vercel 배포 265
__8.5.1 Auth0 사용을 위한 준비 265
__8.5.2 환경 변수 설정 266

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

APPENDIX A 한국어판 부록 286
A.1 Auth0 286
__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.2 MongoDB Atlas 293
__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.4 Vercel 299
__A.4.1 계정 등록 299
__A.4.2 신규 프로젝트(깃허브 리포지터리 연동) 생성 방법 300
__A.4.3 MongoDB Atlas 인티그레이션 연동 방법 302
__A.4.4 환경 변수 설정 방법 305
__A.4.5 환경 변수 확인과 복사 306
__A.4.6 환경 변수의 추가 306

찾아보기 309

스벨트는 .svelte 파일(컴포넌트)을 HTML 방식으로 작성한다. 다른 점은 {count}와 같이 중괄호를 사용하는 방식으로, 변수와 제어 구조를 표현하는 것과 이벤트 핸들러를 선언하는 방법(위의 예에서는 on:click이 사용되는 것) 등이다. 하지만 이것들은 사용하지 않아도 되므로 대부분은 단순히 HTML의 조각을 스벨트 컴포넌트로 사용할 수 있다. / 특별히 주목해야 할 점은 컴포넌트에서 ‘상태(state)’를 관리하는 방법이다. 스벨트는 보통 자바스크립트로 변수를 정의해서 새로운 값을 대입하여 사용한다. 이에 따라 화면의 표시 내용의 변화에 따른 동적인 처리도 보통의 자바스크립트를 사용하는 것과 같은 방식으로 개발할 수 있다.

슬롯과 속성은 부모 컴포넌트에서 무엇인가를 지정할 수 있다는 점에서 비슷할 역할을 하는 기능이다. 둘을 어떻게 구분해서 사용해야 할까? / 한 가지 방법은 사용하는 측에서 어느 정도의 자유도를 갖는 컨텐츠를 허가할지에 대한 기준을 정하는 것이다. 예를 들어 버튼 컴포넌트 을 생각해보면 버튼의 내용을 자유롭게 지정할 수 있도록 할 때는 슬롯, 어느 정도 고정된 내용으로 통일하고 싶을 때는 속성을 사용할 수 있다.