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

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

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

이 예는 음식 주문 폼에 대한 샘플이다. 사이즈는 여러 개 중에서 하나만 선택할 수 있으므로 라디오 버튼을 사용한다. bind:group을 사용해 세 개의 〈input〉 요소를 하나의 size 변수에 바인딩하므로 라디오 버튼 중 하나를 선택하면 해당 value 속성에 지정된 사이즈가 size 변수에 대입된다. / 토핑은 복수 선택이 가능하므로 체크박스를 사용하며, bind:group으로 여러 요소를 하나의 options 변수에 바인딩한다. 다중 선택이 가능하므로 options 변수는 배열을 사용하며, 해당 시점에 선택된 체크박스의 value 속성의 값을 요소로 갖는 배열이 대입된다. / HTML과 다르게 value 속성에 지정하는 값은 문자열 이외의 다른 값을 사용할 수도 있다. 이때 바인딩된 변수에는 value에 지정한 값(문자열로 인식되는 것이 아님)이 그대로 대입된다(코드 3.1.16). (89쪽)

그런데 지금 게임을 실행하면 문제가 하나 있다. 모든 노드가 일시 정지되고, Main도 거기 포함된다는 것이다. 즉, 더 이상 _input()을 처리하지 않으므로, 입력을 다시 감지해 일시 정지를 해제할 수 없다. 이 문제를 해결하려면 Main 노드의 Process/Mode를 Always로 설정하자.

일시 정지 기능은 알아두면 매우 유용하다. 어떤 게임에서든 이 기법을 사용할 수 있으므로, 이 기능을 다시 검토하며 작동 방식을 이해했는지 확인하자. (91쪽)

타입스크립트를 사용하면 writable과 readable에 전달하는 초깃값에 따라 스토어에 저장되는 값의 형태를 추론한다. 또한 derived는 두 번째 인수에 전달되는 함수의 반환값에 따라 타입을 추론한다(코드 3.2.22). 따라서 타입스크립트를 사용할 때는 파일의 확장자를 .js 대신 .ts로 사용한다. / 만약 추론 타입과 다른 타입을 사용하고 싶거나 타입을 명시하고 싶을 때는 writable, readable, derived 호출 시 타입 인수를 전달하거나 svelte/store에서 가져오는 Writable, Readable 타입을 사용한다. 예를 들어 문자열 또는 %00;을 저장하는 writable 스토어는 코드 3.2.23과 같이 타입을 지정할 수 있다. (113쪽)

스벨트편에서는 상품 페이지에 표시하는 상품 데이터를 프런트엔드에서 직접 작성했다. 프런트엔드에 직접 작성하면 로딩과 표시가 압도적으로 빠르다는 장점이 있지만, 상품의 데이터를 변경하려면 소스 코드를 변경하고 사이트 전체를 다시 빌드해야 한다는 단점이 있다. 대부분의 온라인 쇼핑 사이트에서 상품 데이터는 개발자가 아닌 상품 관리자가 편집하므로 프런트엔드 코드로 상품 데이터를 직접 편집하는 것은 활용성이 매우 낮다. / 따라서 애플리케이션 코드를 변경하지 않고 업데이트가 가능하도록 상품 데이터를 데이터베이스 등에 저장하고 상품 관리자는 대시보드 등을 통해 상품 데이터를 편집할 수 있다. (172~173쪽)

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

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

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

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

스벨트는 리액트나 뷰와 비교하면 적은 사전 지식만으로도 개발을 시작할 수 있도록 만들어졌다.

이 책을 통해 쉽고 빠르면서도 깊이 있게 스벨트를 이해할 수 있게 되기를 바란다.

주요 내용

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