IT 분야에서 많은 좋은 서적을 출간하는 길벗출판사의 개발자 리뷰어에 선정되어 최신 웹 프론트엔드의 새로운 기술인 스벨트를 정말 빨리 만나게 되어서 리뷰를 작성하게 되었습니다.
1. 도서 소개 페이지
https://www.gilbut.co.kr/book/view?bookcode=BN003290
2. 예제소스
https://www.gilbut.co.kr/book/view?bookcode=BN003290
3. 목차
1장 스벨트 소개
__1.1 적은 코드
__1.2 순수한 리액티비티(반응성)
2장 개발 환경 구성하기
__2.1 REPL로 시작해보기
__2.2 로컬에서 프로젝트 만들어 코드 작성하기
__2.3 폴더 및 파일 구성
3장 Hello, Svelte~!
__3.1 script
__3.2 HTML 마크업
__3.3 style
__3.4 {} 표현식
__3.5 스벨트 컴포넌트를 document에 포함시키기
4장 템플릿 기본 표현식
__4.1 {#if ...} 블록
__4.2 {:else if ...} 블록
__4.3 {#each ...}를 사용해 배열 표시하기
__4.4 {#each} 루프 안에서 인덱스 사용하기
__4.5 {#each}로 JSON 객체 다루기, 다차원 배열 표시하기
__4.6 Promise와 {#await ...} 블록 사용하기
__4.7 fetch 결과를 {#await ...} 블록으로 표시하기
__4.8 {#key 표현식} HTML {/key}
__4.9 {#key 표현식} 하위 컴포넌트 {/key}
__4.10 {@html}로 돔에 HTML 엘리먼트 생성하기
__4.11 {@debug}로 디버깅, 리액티브하게 디버깅하기
5장 반응성
__5.1 스벨트의 반응성이란?
__5.2 반응형 데이터 만들기
__5.3 센서 생성과 동작 정의
__5.4 할당을 통한 트리거 만들기
__5.5 센서의 사용하는 네 가지 패턴
__5.6 배열의 변화 감지하기
__5.7 JSON 객체의 변화 감지하기
6장 HTML 엘리먼트에 데이터 바인딩하기
__6.1 텍스트 / 텍스트 입력값 바인딩하기
__6.2 input에 숫자 값 바인딩하기
__6.3 체크박스 바인딩하기
__6.4 다중 객체(radio, check)에 그룹 바인딩하기
__6.5 textarea 바인딩하기
__6.6 단일 select, 다중 select 바인딩하기
__6.7 contenteditable 바인딩
__6.8 {#each ...} 블록에서 속성값 바인딩하기
__6.9 media의 속성값 바인딩하기
__6.10 크기 값 바인딩
__6.11 this 바인딩
__6.12 하위 컴포넌트 데이터 바인딩
7장 하위 컴포넌트 사용
__7.1 예제 프로젝트 생성하기
__7.2 하위 컴포넌트 작성하기
__7.3 하위 컴포넌트 불러오기
__7.4 HTML에서 사용하기
8장 props
__8.1 props 선언하기
__8.2 props 사용하기
__8.3 spread 활용하기
9장 이벤트
__9.1 돔 이벤트 처리하기
__9.2 인라인으로 이벤트 처리하기
__9.3 이벤트 제한자 사용하기
__9.4 하위 컴포넌트의 커스텀 이벤트 처리하기
__9.5 이벤트 포워딩하기
__9.6 돔 이벤트 포워딩하기
10장 라이프사이클
__10.1 onMount
__10.2 onDestroy
__10.3 beforeUpdate와 afterUpdate
__10.4 tick
11장 스토어 사용하기
__11.1 writable 스토어로 시작하기
__11.2 readable 스토어 사용하기
__11.3 derived 스토어 사용하기
__11.4 사용자 정의 스토어 만들기
__11.5 get 함수 사용하기
12장 모션
__12.1 트윈
__12.2 스프링
13장 트랜지션
__13.1 트랜지션 지시자
__13.2 파라미터 이용하기
__13.3 in/out 사용하기
__13.4 트랜지션 이벤트 정의하기
__13.5 로컬 트랜지션
14장 애니메이션
15장 액션
__15.1 use 지시자 사용하기
__15.2 파라미터 사용하기
16장 클래스
__16.1 class 속성을 확장하여 사용하기
__16.2 class 지시자 사용하기
17장 slot 사용하기
__17.1 slot이란?
__17.2 slot 기본값 사용하기
__17.3 named slot 사용하기
__17.4 $$slots을 이용한 콘텐츠 체크
__17.5 slot의 props 사용하기
18장 컨텍스트 API
__18.1 setContext와 getContext
__18.2 hasContext
__18.3 컨텍스트와 스토어 차이점 비교
19장 특수 엘리먼트
20장 두뇌 개발 게임만들기
__20.1 게임 화면 미리 보기
__20.2 애플리케이션 아키텍처
__20.3 배포 아키텍처
__20.4 스벨트킷으로 프로젝트 생성
__20.5 코드 작성 준비하기
__20.6 라우터로 페이지 구성하기
__20.7 레이아웃으로 메뉴 구성하기
__20.8 스토어 구성하기
__20.9 홈(이번 주의 점수) 구현
__20.10 게임 구현
__20.11 점수 저장 구현
__20.12 몽고디비 연결하기
__20.13 REST API 구현
__20.14 이번 주의 점수를 REST로 구현
__20.15 점수 저장을 REST로 구현
__20.16 깃허브 클라이언트 설치하기
__20.17 SSH로 깃허브에 연결하기
__20.18 깃허브로 소스 배포하기
__20.19 AWS 서버 만들기
__20.20 터미널에서 접속하기
__20.21 AWS 앱 서버로 설정하기
__20.22 로컬 개발 환경에서 빌드
__20.23 운영(AWS) 환경에서 빌드 및 실행
4. 지은이 소개
ㆍ지은이 박승현
제민이, 지수, 그리고 지윤이 아빠입니다. 어렸을 때부터 프로그래밍을 직업으로 가지고 싶었고, 매일 매일 그 꿈을 이루고 사는 생계형 개발자입니다. 자바스크립트를 좋아하고 관련 기술에 대한 잡담을 좋아합니다.
5. 책을 읽은 후 리뷰
- 요즘 많이 사용되는 React, vue등의 프론트엔드 프레임워크 기술과 비슷한 새로운 프레임워크인 스벨트가 나왔다고 하여 그동안 많은 관심을 갖고 있었는데 관련 서적이 많이 나오지 않아서 이번에 가장 빨리 만나는 스벨트는 정말 스벨트를 빨리 만나게 해주는 책이였습니다.현재 웹개발자로 현업에서 vue를 사용하여 프론트엔드를 개발하고 있는데, 전반적으로 비슷한 템플릿 기본표현식이나 반응성, HTML 엘리먼트 데이터 바인딩, 컴포넌트 사용, props, 스토어 사용등 다른 프레임워크가 갖고 있는 기술들은 다 갖추고 있으나 스벨트의 장점은 간결하고 사용하기 편하다는 것이였습니다. 책에서는 전반적인 기능과 고급기술들을 다 잘 설명해주고 있어서 따라가면서 읽어도 아주 흥미롭게 읽을 수 있었고, 실습도 같이 하면 더 자기것으로 만들 수 있을거라는 생각이 들었습니다. 현업에서 적용한다면 React 나 vue 보다 개발생산성도 더 잘 나올 수 있을거 같은 생각이 들었습니다. 아직 인지도가 다른 프레임워크 보다 높지 않아서 현업에서 많이 사용하고 있지는 않으나 앞으로 프론트엔드 개발에서 많이 사용되리라 기대 되므로 미리 기술을 알아가는데 아주 유용한 참고서가 되리라고 확신합니다.
길벗출판사 개발자 리뷰어 선정되어 작성한 리뷰입니다.