실전 스벨트 & 스벨트킷 입문 - 쇼핑몰 사이트 웹 애플리케이션을 만들면서 배우는 Svelte & SvelteKit

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