홈앤서비스 SK BROADBAND

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

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

옮긴이 머리말 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