도서상세
장바구니에 상품을 담았습니다.
바로가기
  1. 도서정가제
  2. 소득공제
일시재고부족
구체적 입고시기는 1:1 도서문의를 이용하여 주세요.
32,000원
28,800원
10%
최대 적립 포인트
1,900 원
  • 구매 적립
    적립금 안내
    • 상품 적립금
    • 상품 적립금은 고객님이 웬디북에서 상품을 구매하실 경우 이에 대한 마일리지 개념으로 구매금액의 일부를 적립해 드리는 제도이며 사용은 예치금과 같이 현금처럼 사용가능하십니다.
    • 멤버십 적립금
    • 멤버십 적립금은 고객님의 멤버십(고객)등급에 따라 도서 구매액의 1 ~ 4%에 해당하는 적립금이 추가로 적립되며 적립금은 다음 주문시 현금처럼 사용이 가능합니다.
    • 다만 적립금은 예치금과는 달리, 현금으로 환불하실 수 없고 적립금의 적립일로 부터 12개월 이내에 사용하시지 않으면 자동으로 소멸됩니다.
  • 상품 적립금
    1,600원
  • 리뷰 적립
  • 최대 리뷰 적립금
    300원
28,800원
· 쿠폰 및 적립금은 결제 시 적용해 주세요
바로구매
장바구니 담기
일시재고부족
이 책을 구입하신 분들이 산 책
상세 이미지 더보기
상세 이미지
목차 더보기
목차
머리말 xi
베타리더 후기 xii
이 책을 읽는 법 xiv
학습 가이드 xvi
로드맵 xviii

PART 1 스벨트 소개 및 개발 환경 구축
CHAPTER 1 스벨트 개요
1.1 스벨트의 현 위치와 웹 프레임워크 4 / 1.2 스벨트의 탄생과 철학 5 / 1.3 스벨트의 장점 8 / 돌아보기&쪽지시험 12
CHAPTER 2 스벨트 개발 환경 구축
2.1 사이트를 활용한 Playground 14 / 2.2 로컬 개발 환경 구축 16 / 2.3 스벨트 프로젝트 설치 19 / 2.4 스벨트 프로젝트 폴더 구조 24 / 돌아보기&쪽지시험 25

PART 2 스벨트 컴포넌트 사용법
CHAPTER 3 컴포넌트 기본 사용법
3.1 컴포넌트란? 30 / 3.2 컴포넌트 제작 32 / 돌아보기&쪽지시험 36
CHAPTER 4 상탯값 관리
4.1 상탯값이란? 38 / 4.2 클릭 이벤트를 이용한 상탯값 변경 41 / 4.3 객체 속성을 상탯값으로 활용 43 / 4.4 객체로 이루어진 배열을 이용하여 상탯값 표시 45 / 돌아보기&쪽지시험 47
CHAPTER 5 반응성
5.1 삼항 연산자를 통한 마크업에서의 반응성 51 / 5.2 스크립트 반응성 코드 52 / 돌아보기&쪽지시험 57
CHAPTER 6 스벨트 이벤트
6.1 이벤트 문법 60 / 6.2 이벤트 수식어 65 / 돌아보기&쪽지시험 67
CHAPTER 7 스벨트 props
7.1 props 기본 문법 70 / 7.2 props 기본값 설정 72 / 7.3 props 데이터 변경 74 / 7.4 스프레드 props 76 / 돌아보기&쪽지시험 78
CHAPTER 8 스벨트 로직
8.1 논리 로직: if 블록 82 / 8.2 반복 로직: each 블록 86 / 돌아보기&쪽지시험 91

PART 3 스벨트 바인딩과 데이터 관리
CHAPTER 9 폼 관련 요소 바인딩
9.1 바인딩이란? 96 / 9.2 입력 요소 관련 바인딩 97 / 9.3 선택 상자 관련 바인딩 102 / 돌아보기&쪽지시험 107
CHAPTER 10 기타 요소 바인딩
10.1 each 블록 바인딩 110 / 10.2 멀티미디어 요소 바인딩 116 / 10.3 공간 바인딩 119 / 10.4 bind:this 바인딩 121 / 10.5 컴포넌트 바인딩 126 / 돌아보기&쪽지시험 129
CHAPTER 11 스벨트 slot
11.1 slot 기본 사용법 131 / 11.2 fallback slot 133 / 11.3 slot 이름 설정 135 / 11.4 slot props 138 / 11.5 조건 관련 slot 141 / 돌아보기&쪽지시험 143
CHAPTER 12 라이프 사이클
12.1 onMount 함수 147 / 12.2 onDestroy 함수 150 / 12.3 beforeUpdate와 afterUpdate 함수 152 / 12.4 tick 함수 156 / 돌아보기&쪽지시험 161
CHAPTER 13 Context API
13.1 Context API란? 163 / 13.2 Context API 기본 사용법 166 / 13.3 dispatch 169 / 돌아보기&쪽지시험 172
CHAPTER 14 스토어
14.1 writable 스토어 174 / 14.2 readable 스토어 180 / 14.3 derived 스토어 182 / 14.4 커스텀 스토어 184 / 14.5 스토어 바인딩 186 / 돌아보기&쪽지시험 188

PART 4 스벨트 스타일과 DOM 제어
CHAPTER 15 스벨트 CSS 제어
15.1 스벨트 CSS 기본 사용법 192 / 15.2 class: 지시문 194 / 15.3 rollup을 통한 Sass 플러그인 설치 198 / 돌아보기&쪽지시험 201
CHAPTER 16 스벨트 트랜지션
16.1 transition: 지시문 203 / 16.2 페이드 효과 204 / 16.3 블러 효과 208 / 16.4 슬라이드 효과 211 / 16.5 스케일 효과 213 / 16.6 플라이 효과 215 / 16.7 그리기 효과 217 / 16.8 크로스페이드 효과 219 / 16.9 커스텀 트랜지션 만들기 225 / 16.10 트랜지션 이벤트 230 / 16.11 트랜지션 수식어 232 / 돌아보기&쪽지시험 234
CHAPTER 17 애니메이션과 모션
17.1 animate: 지시문과 flip 효과 236 / 17.2 커스텀 애니메이션 만들기 239 / 17.3 모션의 tweened 효과 241 / 17.4 모션의 spring 효과 243 / 돌아보기&쪽지시험 246
CHAPTER 18 스벨트 액션
18.1 액션의 기본 사용 방법 248 / 18.2 액션에 매개변수 전달 251 / 18.3 update와 destory 253 / 18.4 외부 라이브러리를 이용한 액션 256 / 돌아보기&쪽지시험 258
CHAPTER 19 스벨트 특별 요소
19.1 요소 260 / 19.2 요소 262 / 19.3 요소 264 / 19.4 요소 266 / 19.5 요소 269 / 19.6 요소 271 / 19.7 요소 273 / 19.8 요소 274 / 19.9 요소 278 / 돌아보기&쪽지시험 281

PART 5 심플 프로젝트
CHAPTER 20 심플 프로젝트 1: My Bucket List
20.1 프로젝트 생성 및 라이브러리 설치 286 / 20.2 컴포넌트 생성 288 / 20.3 CSS 설정 289 / 20.4 컴포넌트 구성 290 / 20.5 데이터 관리 294 / 20.6 BucketItem 이벤트 관리 299 / 20.7 데이터 추가 307 / 20.8 화면전환 효과 추가하기 310 / 20.9 스토어를 이용한 리팩터링 311 /
CHAPTER 21 심플 프로젝트 2: Best Tour
21.1 프로젝트 생성 및 라이브러리 설치 325 / 21.2 컴포넌트 생성 326 / 21.3 CSS 설정 328 / 21.4 데이터 관리 329 / 21.5 컴포넌트 구성 331 / 21.6 BestItem 이벤트 관리 335 / 21.7 데이터 추가 337

PART 6 라우터 및 서버 데이터 통신
CHAPTER 22 라우터
22.1 svelte-routing의 기본 사용법 346 / 22.2 svelte-routing의 파라미터 352 / 22.3 쿼리스트링을 이용한 주소 처리 356 / 22.4 Best Tour 여행상품 세부 페이지 제작 360 / 돌아보기&쪽지시험 366
CHAPTER 23 서버 데이터 통신
23.1 REST API 368 / 23.2 axios 라이브러리 369 / 23.3 await 블록을 이용한 통신 제어 372 / 돌아보기&쪽지시험 375

PART 7 실전 프로젝트
CHAPTER 24 TMDB API
24.1 TMDB 소개 및 회원가입 380 / 24.2 TMDB API 활용 383
CHAPTER 25 SwiperJS 라이브러리
25.1 SwiperJS 소개 및 스벨트 버전 389 / 25.2 SwiperJS 활용 예제 391
CHAPTER 26 OTT 웹 앱 서비스 제작: 무빙
26.1 프로젝트 구조 생성 및 라이브러리 설치 397 / 26.2 공통 컴포넌트 제작 및 서브페이지 생성 401 / 26.3 TMDB에서 가져온 데이터를 스토어에 담기 409 / 26.4 Swiper를 통한 메인 이미지 제작 414 / 26.5 현재상영작 - 서브페이지 리스트 컴포넌트 제작 428 / 26.6 현재상영작 - 리스트별 상세페이지 제작 435 / 26.7 인기영화 페이지 제작 440 / 26.8 개봉예정작 페이지 제작 446 / 26.9 높은평점 페이지 제작 451 / 26.10 깃허브 Pages에 배포 457

특별부록 스벨트킷
APPENDIX A 스벨트킷 프로젝트
A.1 스벨트킷 소개 472 / A.2 프로젝트 만들기 473 / A.3 프로젝트 구조 확인 476
APPENDIX B 핵심 개념: 라우팅
B.1 기본 라우팅 처리 479 / B.2 레이아웃 482 / B.3 동적 라우팅 484 / B.4 스토어 페이지 488

찾아보기 490
저자 소개
저자 : 오시내
강의를 사랑하는 프런트엔드 개발자. 컴퓨터 공학을 전공하진 않았지만, 디자인부터 시작해서 프런트엔드와 백엔드까지 아우르며 웹 개발에 진심인 1n년 차 개발자이자 강사다. 고양이와 여행을 좋아하며, 가장 큰 즐거움은 강의를 통해 지식을 나누는 것이다. 현재 유튜브 ‘오쌤의 니가스터디’ 채널을 운영하면서 미래의 프런트엔드 개발자들과 활발히 소통하고 있다.
저자 소개 더보기
출판사 서평 더보기
출판사 서평
개발자가 사랑하는 프레임워크 스벨트, 왜 지금 스벨트를 배워야 할까요?
현재 웹 개발에서 퍼포먼스와 사용자 경험은 핵심 요소로 자리 잡았습니다. 스벨트는 이 두 가지를 완벽히 충족시키면서 전 세계 개발자들의 주목을 받고 있습니다. 리액트, Vue.js와 같은 기존 프레임워크와 달리 컴파일러 중심의 구조를 채택하여 가볍고 빠른 애플리케이션을 만들어냅니다. 이를 통해 최적의 성능과 간결한 코드 작성이라는 두 마리 토끼를 잡을 수 있죠.

이 책만의 특별한 점
스벨트는 강력하지만 초보자들에게는 다소 낯설게 느껴질 수 있습니다. 이 책은 스벨트를 처음 접하는 사람부터 중급자를 위한 최고의 가이드입니다. 독학으로 학습하는 개발자부터 팀 프로젝트에 스벨트를 도입하려는 실무자까지, 다양한 독자층을 고려하여 구성했습니다.

1. 입문자를 위한 스벨트의 기초
기초 문법부터 시작하여 각 개념을 단계적으로 배웁니다. 복잡한 개념은 풍부한 예제와 시각 자료로 설명해, 처음 배우는 분들도 막힘없이 따라 할 수 있습니다.

2. 실무 중심의 프로젝트 예제
이론 학습만으로 실무에 적용하는 기술을 배우기는 어렵습니다. 이 책은 실제 프로젝트에서 활용할 수 있는 다양한 예제를 포함합니다. 간단한 컴포넌트부터 상태 관리, 애니메이션, 데이터 통신까지 실무에서 바로 적용 가능한 기술을 배울 수 있습니다. My Bucket List, Best Tour, 무빙 사이트 제작 프로젝트를 통해 실무에서 스벨트를 어떻게 사용하는지 익혀보세요.

3. 저자가 제공하는 무료 동영상 강의
책만으로 부족하다고 느낄 초보자들을 위해 저자가 직접 제작한 동영상 강의를 무료로 제공합니다. 책의 흐름에 맞춰 진행되는 강의는 핵심 이론과 실습 프로젝트를 알기 쉽게 설명하며, 실전에서 유용한 팁까지 담았습니다. QR 코드로 바로 접근할 수 있어, 스벨트를 처음 배우는 독자도 쉽고 빠르게 따라 할 수 있습니다.

이 책은 누가 읽으면 좋을까요?
최신 프레임워크로 웹 개발의 첫걸음을 시작하고 싶은 분
프로젝트에 스벨트를 도입해 최적화를 이루고 싶은 개발자
새로운 프레임워크를 익히고 싶은 프런트엔드 개발자

먼저 읽은 독자들의 한줄평
기능 구현을 위해 불필요하게 복잡한 코드를 작성하고 있다는 생각을 해본 적이 있다면, 이 책을 통해 학습할 가치가 충분하다고 생각합니다. _김진영 님
트렌드에 맞춘 스벨트킷을 포함해 여러 실전 예제까지 다루며, 이 한 권의 책으로 스벨트의 기초부터 실전까지 모두 익힐 수 있습니다. _김효진 님
실전 프로젝트를 통해 실제 개발 환경에서 스벨트를 어떻게 활용하는지 생생하게 보여줘 매우 유용했습니다. _이석곤 님
프런트엔드 입문자부터 스벨트를 처음 접하는 프런트엔드 개발자까지 모두에게 폭넓게 도움이 될 만한 내용을 잘 정리해 두었습니다. _이용진 님
백엔드 개발자의 관점에서 스벨트를 접했는데, 주변에서 들은 것처럼 리액트나 Vue.js보다 확실히 쉽게 느껴졌습니다. _이정훈 님
이 책은 스벨트의 핵심 개념을 직관적으로 설명해, 스벨트와 리액트 사이에서 고민하는 개발자나 프런트엔드 개발에 익숙하지 않은 엔지니어에게도 큰 도움이 됩니다. _이한섭 님

웹 개발의 미래, 스벨트를 지금 시작하세요
군더더기 없는 코드, 뛰어난 퍼포먼스, 그리고 개발의 즐거움을 모두 누리고 싶다면 이 책과 함께하세요. 스벨트는 선택이 아닌 필수가 되고 있습니다. 이 책은 여러분을 스벨트 전문가로 이끄는 최고의 길잡이가 될 것입니다.
리뷰(0)
0 / 5.0
리뷰 작성
•
리뷰를 작성하시면 소정의 적립금을 드립니다.
•
도서의 첫번째 리뷰부터 10번째 리뷰까지는 기본 적립금의 2배를 적립해 드리며, 이후 리뷰부터는 기본 적립금이 적립됩니다.
리뷰 혜택 및 유의사항
배송방법

배송은 CJ대한통운(전화 : 1588-1255)을 이용해서 보내드리고 있습니다.

3만원 이상 구매시 무료배송 가능하며, 3만원 미만의 경우 2500원의 배송비가 발생합니다.

배송기간

15시 이전에 입금확인된 주문까지는 당일날 발송하며, 일반적인 경우 다음날 책을 받아보실 수 있습니다.

주말 또는 공휴일이 있거나 시기적으로 배송이 많은 기간인 경우는 지역에 따라 1~2일이 더 소요될 수 있습니다.

주문 후, 5일이 경과해도 책이 도착하지 않는 경우에는 웬디북 고객센터(전화 : 1800-9785)로 전화를 주시거나 고객센터 > 1:1 문의를 통해 문의글을 남겨주시면 확인 후 신속히 조치하도록 하겠습니다.

묶음배송

묶음배송 원하시는 모든 주문서의 상태가 "입금대기" 또는 "결제완료" 상태일 경우에만 처리가 가능하며, 고객센터 > 1:1 문의에서 신청 할 수 있습니다.

반품안내

변심반품의 경우 도서주문일로부터 15일이내에 반품접수가 가능하며, 반품 배송비는 고객님 부담입니다.

부분 반품의 경우, 3만원 이상 주문으로 무료배송 받았으나 일부 상품 반품으로 주문금액이 3만원이 안될 경우, 이전 주문의 배송비를 포함한 왕복 배송비를 부담하셔야 합니다.

반품절차는 고객센터의 반품교환신청 페이지에서 신청을 해주시면 웬디북 고객센터에서 지정택배사에 회수요청을 하고, 방문한 택배기사님을 통해 반품도서를 보내주시면 됩니다.

운송 중 책이 손상되지 않도록 포장을 해주신 후, 포장 겉면에 “반품도서”라고 기재해주시기 바랍니다. 회수된 상품은 요청해주신 환불방법에 따라 적립 또는 환불 진행해드립니다.

(특히 팝업북 등은 조그만 충격에도 책이 손상될 수 있으므로 주의해 주시기 바랍니다.)

• 반품이 불가한 경우
  • 1. 고객에게 책임 있는 사유로 상품(띠지 또는 더스트커버 포함)이 멸실 또는 훼손된 경우
  • 2. CD 나 소프트웨어 포함, 포장이 되어 있는 모든 상품의 포장 개봉
  • 3. 만화책 및 단시간 내에 완독이 가능한 잡지
  • 4. 상품과 함께 발송된 추가사은품이 분실되거나 훼손된 경우
  • 5. 고객의 사용 또는 일부 소비에 의하여 상품의 가치가 현저히 감소한 경우
  • 6. 명시된 반품가능 기한이 지난 경우
  • 7. 세트상품중 일부 반품
교환안내

파본도서 혹은 오배송으로인한 교환은 도서주문일로부터 15일 이내에 신청하셔야 하며 이 경우 배송비는 웬디북에서 부담합니다.

(단, 팝업북과 CD가 세트인 책은 책의 특성상 7일 이내에 해주셔야 합니다.)

교환절차는 고객센터의 반품교환신청 페이지에서 신청을 해주시면 웬디북에서 새 책을 보내드리고 새 책을 받으실 때 교환도서와 맞교환 하시면 됩니다.

교환은 동일도서에 한하며, 다른 도서로 교환은 불가합니다.

운송도중 책이 손상되지 않도록 포장을 해주신 후, 포장 겉면에 “반품도서”라고 기재해주시기 바랍니다.

(특히 팝업북 등은 조그만 충격에도 책이 손상될 수 있으므로 주의해 주시기 바랍니다.)

• 교환이 불가한 경우
  • 1. 고객에게 책임 있는 사유로 상품이 멸실 또는 훼손된 경우
  • 2. 포장 상품의 포장을 해체한 경우
  • 3. 고객의 사용 또는 일부 소비에 의하여 상품의 가치가 현저히 감소한 경우
  • 4. 물품 수령 후, 15일이 경과한 경우
  • 5. 동일상품으로 교환하신 후, 다시 교환하시고자 할 경우 (이 경우에는 환불처리 해드립니다.)
신고하기
신고사유 선택
도서 입고 알림 신청
입고알림 신청하셨습니다.
입고시 {{tel}}로 문자 발송됩니다

바로 확인 하시겠습니까?
예

휴대폰 번호, 이메일 주소는

마이 페이지 > 회원정보수정에서 확인해 주세요.

관심 시리즈 신간 알림 신청
시리즈명:{{ series_name }}
관심 시리즈 신간 입고 알림 신청하셨습니다.
입고시 {{ tel }}로 문자 발송 또는
앱푸시, 이메일 등으로 알려드리겠습니다.

바로 확인 하시겠습니까?
예

휴대폰 번호, 이메일 주소는

마이 페이지 > 회원정보수정에서 확인해 주세요.

입고 알림 수신 방법 변경은

마이 페이지 > 알림 > 알림 설정에서 확인해 주세요.

푸시 알림이 오지 않을 시,

스마트폰 설정 > 알림 > 웬디북 앱 설정을 확인해 주세요

관심 작가 신간 알림 신청
작가명:{{ series_name }}
관심 작가 신간 입고 알림 신청하셨습니다.
입고시 {{ tel }}로 문자 발송 또는
앱푸시, 이메일 등으로 알려드리겠습니다.

바로 확인 하시겠습니까?
예

휴대폰 번호, 이메일 주소는

마이 페이지 > 회원정보수정에서 확인해 주세요.

입고 알림 수신 방법 변경은

마이 페이지 > 알림 > 알림 설정에서 확인해 주세요.

푸시 알림이 오지 않을 시,

스마트폰 설정 > 알림 > 웬디북 앱 설정을 확인해 주세요

{{title}}
{{content}}
{{title}}
{{content}}