Svelte로 맛보는 웹 애플리케이션 개발

실전 예제로 마스터하는 최신 프런트엔드 프레임워크

이효범 지음

비제이퍼블릭 2021년 09월 23일 출간 종이책 : 2021년 09월 30일 출간

작품소개

책소개

최신 트렌드의 프런트엔드 프레임워크를
이제 내 것으로 만든다!

The State of JavaScript Survey(https://stateofjs.com)에 따르면 Svelte는 3.0 버전이 발표된 이후로 2년 연속 관심도에서 1위를 차지한, 개발자들의 많은 관심을 받는 최신 프런트엔드 프레임워크입니다. Svelte 진영에서는 브라우저 자체 모듈 시스템을 사용하거나, 가상 돔을 사용하지 않는 등 지금도 여러 시도들이 이루어지고 있습니다.

Svelte는 앞으로도 프런트엔드의 새로운 분야를 앞장서서 개척해 나갈 것입니다. 이 책을 통해 다양한 예제로 새로운 웹 개발 트렌드를 만들어 가는 Svelte를 공부하고, 예제로 스도쿠 게임을 만들어보면서 공부한 문법을 복습할 수 있습니다. 이런저런 책들이나 블로그들을 찾아볼 필요 없이 여러분도 이제 이 책 한 권으로 Svelte를 이해하게 될 것입니다.

이 책의 특징
- 공식 문서의 모든 내용을 이 책에 담아 Svelte 문법을 설명합니다.
- 다양한 예제로 Svelte 문법을 보고 익힐 수 있습니다.
- 실전 예제를 통해 이론을 넘어 Svelte를 실무에 적용하는 방법을 배웁니다.

이 책이 필요한 독자
- 웹 프런트엔드 개발에 관심 있는 입문자
- 새로운 웹 애플리케이션 개발을 경험해보고 싶은 개발자
- 최신 웹 트렌드에 관심이 있는 IT 전문가

소스코드 다운로드
https://github.com/bjpublic/sveltetaste

목차

Part I. Svelte 문법 공부하기
Chapter 1 개발 환경 설정 및 프로젝트 생성
1-1 개발 환경 설정
1-2 프로젝트 생성
1-3 프로젝트 구조
1-4 Svelte 개발자 도구 사용

Chapter 2 Svelte 소개
2-1 Svelte 특징
2-2 Svelte 사용 시 유의사항

Chapter 3 기초 문법
3-1 데이터 정의
3-2 속성 정의
3-3 컴포넌트 정의
3-4 스타일 정의
3-5 HTML 문자열 표현

Chapter 4 반응형 문법
4-1 데이터 할당
4-2 데이터 할당 시 주의사항
4-3 $ 문법
4-4 $ 문법 사용 시 주의사항

Chapter 5 Props
5-1 Props란
5-2 Props 정의
5-3 기본값 설정
5-4 전개 연산자 사용
5-5 $$props와 $$restProps
5-6 --style-props

Chapter 6 논리 블록
6-1 조건문 블록
6-2 반복문 블록
6-3 비동기 블록
6-4 Key 블록

Chapter 7 이벤트 처리
7-1 이벤트 수식어
7-2 컴포넌트 이벤트
7-3 이벤트 포워딩

Chapter 8 데이터 바인딩
8-1 데이터 바인딩이란
8-2 Input 태그
8-3 Textarea 태그
8-4 Select 태그
8-5 contenteditable 속성
8-6 Each 블록 바인딩
8-7 Media 태그
8-8 Dimension 바인딩
8-9 This 바인딩
8-10 컴포넌트 Props 바인딩

Chapter 9 라이프 사이클
9-1 라이프 사이클(Lifecycle)이란
9-2 onMount
9-3 onDestroy
9-4 beforeUpdate
9-5 afterUpdate
9-6 라이프 사이클 모듈화
9-7 tick

Chapter 10 스토어
10-1 스토어란
10-2 Writable 스토어
10-3 Readable 스토어
10-4 Derived 스토어
10-5 Custom 스토어
10-6 get 함수

Chapter 11 모션
11-1 모션이란
11-2 Tweened
11-3 Spring

Chapter 12 트랜지션
12-1 트랜지션이란
12-2 트랜지션 종류
12-3 사용자 정의 트랜지션
12-4 트랜지션 이벤트
12-5 로컬 수식어

Chapter 13 애니메이션
13-1 애니메이션 디렉티브
13-2 사용자 정의 애니메이션
13-3 애니메이션 사용 시 주의사항

Chapter 14 액션
14-1 액션이란
14-2 액션 함수
14-3 액션으로 만든 플러그인

Chapter 15 슬롯
15-1 슬롯이란
15-2 슬롯의 기본값
15-3 이름 있는 슬롯
15-4 $$slots 객체
15-5 슬롯의 Props

Chapter 16 콘텍스트 API
16-1 콘텍스트란
16-2 콘텍스트 API
16-3 스토어 VS 콘텍스트

Chapter 17 Svelte 요소
17-1 〈svelte:self〉
17-2 〈svelte:component〉
17-3 〈svelte:window〉
17-4 〈svelte:body〉
17-5 〈svelte:head〉
17-6 〈svelte:options〉
17-7 〈svelte:fragment〉

Chapter 18 모듈 콘텍스트
18-1 코드 공유하기
18-2 코드 내보내기

Part II. 스도쿠 게임 만들어보기
Chapter 19 스도쿠 살펴보기
19-1 스도쿠란
19-2 스도쿠 용어 정리

Chapter 20 스도쿠 생성 방법
20-1 스도쿠 생성 방법
20-2 스도쿠 행렬식 표현
20-3 스도쿠 섞기

Chapter 21 스도쿠 프로젝트 생성
21-1 프로젝트 생성 및 패키지 설치
21-2 화면 구조 및 컴포넌트 구조
21-3 디렉터리 구조

Chapter 22 스도쿠 만들기
22-1 스도쿠 생성 코드
22-2 스도쿠 섞기

Chapter 23 스도쿠 퍼즐 만들기
23-1 스도쿠 풀이 방법
23-2 스도쿠 퍼즐 만들기

Chapter 24 스도쿠 컴포넌트 만들기
24-1 컴포넌트 구조
24-2 Difficulty 컴포넌트
24-3 Navigation 컴포넌트
24-4 Number 컴포넌트
24-5 Numb

출판사 서평

웹 서비스가 거대해질수록 성능에 대한 고민이 깊어지는데, Svelte는 빠른 성능을 가지고 있어 성능에 대한 고민을 줄일 수 있게 하는 프레임워크입니다. 또한 Svelte는 개발자들에게 코드를 조금만 작성해도 되도록 만들어줍니다. 코드량이 많으면 코드 전체의 구성이 장황해질 수 있는데, Svelte는 간결한 코드를 작성할 수 있게 해줍니다.

이 책에서는 Svelte를 배우고 익히기 위해 필요한 모든 가이드를 제공하기 위해 노력했습니다. 공식 문서에서 제공하는 모든 문법들과 API들을 다루고, 공부한 Svelte 문법으로 스도쿠 게임이라는 결과물을 만들어내어 Svelte를 완벽하게 익힐 수 있도록 도왔습니다. 독자 여러분도 이 책을 통해 이제부터 Svelte의 매력에 푹 빠져보시길 바랍니다.

작가정보

저자(글) 이효범

저자 : 이효범
최신 웹 프레임워크 트렌드에 관심이 많은 개발자로 광운대학교 컴퓨터공학과를 졸업하여, 현재 위메프에서 플랫폼 프런트엔드 개발을 맡고 있다.
계속 변화하고 있는 웹 트렌드에 뒤쳐지지 않고, 배움을 게을리하지 않는 개발자가 되기 위해 웹 개발 관련 기술을 포스팅하는 블로그(https://beomy.github.io)를 운영하고 있으며, 온라인 강의(https://www.inflearn.com/users/@beomy)도 진행하고 있다. 저서로는 〈ReactJS 이 정도는 알아야지〉가 있다.