크레마클럽

옮긴이 머리말 ix베타리더 후기 xi추천 서문(야마시타 유이치로) xiii시작하며 xvCHAPTER 1 스벨트 시작하기 11.1 스벨트의 탄생과 특징 1__1.1.1 스벨트의 특징 1 __1.1.2 스벨트의 ‘컴파일’ 2 __1.1.3 가상 DOM의 미사용 31.2 스벨트 튜토리얼: 온라인 쇼핑 페이지 만들기 5__1.2.1 프로젝트 준비 6 __1.2.2 HTML/CSS를 사용한 화면 구성 요소 생성 7__1.2.3 변수와 이벤트 핸들러를 사용한 장바구니 담기 버튼 기능 추가 11__1.2.4 배열과 {#each} 구문을 통한 관련 상품 표시 14 __1.2.5 컴포넌트 분리 20CHAPTER 2 스벨트 기초 272.1 환경 구축 27__2.1.1 스벨트 공식 REPL 28 __2.1.2 Vite를 사용하는 개발 환경 구축 292.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 라이프 사이클 69CHAPTER 3 스벨트의 리액티비티 783.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 바인딩 953.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 스토어의 바인딩 111CHAPTER 4 스벨트의 고급 기능 1144.1 고급 템플릿 문법 114__4.1.1 키를 포함하는 {#each} 블록 115 __4.1.2 {#key} 블록 117__4.1.3 {@...} 태그 118 __4.1.4 〈svelte:...〉 태그 1204.2 모듈 콘텍스트 129__4.2.1 각 인스턴스 간 상태 공유 129 __4.2.2 컴포넌트 이외에 내보내기 1314.3 모션, 트랜지션, 애니메이션 134__4.3.1 모션 134 __4.3.2 트랜지션 140 __4.3.3 애니메이션 1484.4 콘텍스트 150__4.4.1 콘텍스트 API 사용 방법 150 __4.4.2 콘텍스트의 특징과 스토어 비교 1534.5 액션 154__4.5.1 액션의 기본적인 사용법 154 __4.5.2 액션의 예: DOM 요소의 리사이징 감지 155CHAPTER 5 스벨트킷으로 다중 페이지 애플리케이션 개발하기 1585.1 스벨트킷의 기본과 도입 158__5.1.1 스벨트킷이란· 158 __5.1.2 프로젝트 생성 159__5.1.3 스벨트킷 프로젝트의 파일 구조 1615.2 데모 애플리케이션의 구현과 해석 163__5.2.1 페이지를 나타내는 .svelte 파일 163__5.2.2 레이아웃 - 여러 페이지에 공통 요소 배치 166__5.2.3 폼액션 - 프로그레시브한 웹 애플리케이션을 구성하는 구조 1675.3 온라인 쇼핑 애플리케이션의 확장 170__5.3.1 ① 스벨트킷 프로젝트 생성 171 __5.3.2 ② 상품 페이지에 대응하는 라우트 생성 171__5.3.3 ③ 상품 데이터와 장바구니 데이터 가져오기 172__5.3.4 ④ 폼액션으로 장바구니 추가 180 / 5.3.5 ⑤ ‘추천 상품’ 표시 183CHAPTER 6 스벨트킷 레퍼런스 1896.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 스벨트킷의 실행 모델 1916.2 페이지 라우트 192__6.2.1 +page.svelte 192 __6.2.2 +page.js와 +page.server.js 1946.3 폼액션 195__6.3.1 폼액션 기초 195 __6.3.2 프로그레시브 인핸스먼트 1986.4 서버 라우트 203__6.4.1 서버 라우트란· 2036.5 라우팅 205__6.5.1 라우트 205 __6.5.2 라우트에 배치할 수 있는 파일 205 __6.5.3 고급 라우팅 2066.6 레이아웃 212__6.6.1 레이아웃 기초 212 __6.6.2 레이아웃 네스팅 213__6.6.3 레이아웃 네스팅 초기화 2136.7 훅 215__6.7.1 스벨트킷의 훅 215 __6.7.2 handle 215__6.7.3 handleFetch 216 __6.7.4 handleError 2176.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: 환경 변수에 접근할 수 있는 모듈 2216.9 빌드와 배포 222__6.9.1 설정이 불필요한 호스팅 서비스 - adapter-auto 222__6.9.2 Node 서버로 빌드 - adapter-node 223__6.9.3 정적 사이트 생성과 SPA 모드 - adapter-static 226CHAPTER 7 MongoDB와 Vercel을 사용한 운영 환경 구축 2297.1 스벨트킷 애플리케이션과 운영 환경 229__7.1.1 개발 환경/샘플 애플리케이션 229 __7.1.2 운영 환경/빌드/배포 2307.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로 구현 2387.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 작동 확인 245CHAPTER 8 Auth0를 통한 패스워드 없는 로그인 구현과 세션 관리 2468.1 Auth0 준비 246__8.1.1 패스워드 없는 인증이란· 246 __8.1.2 Auth0 계정 생성과 초기 설정 2478.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 로그인 작동 확인 2588.3 로그인 유저의 판단과 표시 258__8.3.1 로그인 유저 정보 가져오기 258 __8.3.2 로그인 중인 유저의 표시 260__8.3.3 로그아웃 기능 2618.4 유저별 장바구니 생성 262__8.4.1 유저 ID별 장바구니 생성 2628.5 Vercel 배포 265__8.5.1 Auth0 사용을 위한 준비 265 __8.5.2 환경 변수 설정 266CHAPTER 9 유저 경험 개선 · OGP 태그와 프리렌더링 2689.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에 배포하고 카드 확인 2729.2 프리렌더링 273__9.2.1 상품 페이지 프리렌더링 273 __9.2.2 장바구니 페이지 준비 276__9.2.3 클라이언트에서 장바구니 정보 가져오기 278__9.2.4 ‘장바구니 담기’ 버튼의 작동 개선 281 / 9.2.5 프리렌더링 작동 확인 282APPENDIX A 한국어판 부록 286A.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 패스워드 없는 로그인 에러 해결 290A.2 MongoDB Atlas 293__A.2.1 계정 등록 293 __A.2.2 서버 생성 293__A.2.3 보안 설정 295 __A.2.4 액세스 정보 확인하기 296A.3 깃허브 298__A.3.1 계정 등록 298 __A.3.2 리포지터리 생성 298 __A.3.3 액세스 토큰의 생성 299A.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

펼쳐보기접어보기

상세 이미지

저자 소개 (3명)

저 : 하마구치 교헤이 (Kyohei Hamaguchi)

관심작가 알림신청

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

저 : 고세키 야스히로 (小關泰裕)

관심작가 알림신청

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

역 : 이춘혁

관심작가 알림신청

코딩도 좋아하지만, 그보다 더 좋아하는 건 문제를 깔끔하게 해결하는 순간이다. 프로그래밍 언어와 영어, 중국어, 일본어 같은 자연어에도 관심이 많고, 배우는 걸 즐긴다. 현재는 일본의 자동차 회사에서 소프트웨어를 개발하고 있다. 코딩도 좋아하지만, 그보다 더 좋아하는 건 문제를 깔끔하게 해결하는 순간이다. 프로그래밍 언어와 영어, 중국어, 일본어 같은 자연어에도 관심이 많고, 배우는 걸 즐긴다. 현재는 일본의 자동차 회사에서 소프트웨어를 개발하고 있다.

크레마클럽에서 볼 수 있는 작가의 다른 책

출판사 리뷰

요즘 프레임워크 스벨트와 스벨트킷 입문부터 고급 기능, 쇼핑몰 사이트를 만드는 실전 예제까지스벨트는 단순하고, 강력하며, 우아하다. 아직 스벨트를 접해보지 못한 모든 웹 개발자에게 이 책으로 스벨트와 만나보기를 추천하고 싶다. 스벨트의 컴포넌트는 이해하기 쉽고, 코드는 간결하고, 파일은 가볍다. 코딩 프로세스는 원활해지고, 메모리 누수를 걱정할 필요가 없다. 이 책은 간단한 튜토리얼부터 시작해 스벨트와 스벨트킷(스벨트를 베이스로 하는 웹 애플리케이션 프레임워크)으로 쇼핑몰 사이트 웹 애플리케이션 프로젝트를 만들어본다. 1장에서는 스벨트의 특징을 소개하고 간단한 온라인 쇼핑몰 페이지를 만들며 스벨트 튜토리얼을 진행한다. 2장에서는 환경을 구축하고 컴포넌트에 대해 설명한다. 3장에서는 스벨트가 어떤 리액티브 구조를 제공하는지 설명하고, 4장에서는 UI를 더 고급스럽게 구현하는 데 도움 되는 고급 기능을 알아본다. 5장에서는 스벨트킷으로 다중 페이지 애플리케이션을 개발해보고, 6장에서는 스벨트킷의 주요 개념을 자세히 살펴본다. 7장에서는 MongoDB와 Vercel을 사용해 운영 환경을 구축하고 배포해본다. 8장에서는 Auth0를 통해 패스워드 없는 로그인을 구현하고 세션을 관리하는 방법을 알아본다. 9장에서는 스벨트킷이 제공하는 SSR, CSR, 프리렌더링의 개념을 살펴보면서 상품 페이지의 유저 경험을 개선한다. 한국어판에 특별 수록한 부록에서는 스벨트킷 프로젝트에서 활용하는 Auth0, MongoDB Atlas, GitHub, Vercel 사용법을 자세히 설명한다. 스벨트는 리액트나 뷰와 비교하면 적은 사전 지식만으로도 개발을 시작할 수 있도록 만들어졌다.이 책을 통해 쉽고 빠르면서도 깊이 있게 스벨트를 이해할 수 있게 되기를 바란다.주요 내용ㆍ스벨트의 리액티비티 알아보기ㆍ모듈 콘텍스트, 트랜지션, 액션 등 스벨트의 고급 기능ㆍ스벨트킷으로 다중 페이지 애플리케이션 개발하기ㆍ라우트, 폼액션 등 스벨트킷 레퍼런스ㆍMongoDB와 Vercel을 사용한 운영 환경 구축ㆍAuth0를 통한 패스워드 없는 로그인 구현과 세션 관리ㆍOGP 태그와 프리렌더링으로 유저 경험 개선

펼쳐보기접어보기