스벨트로 시작하는 웹 프런트엔드

Svelte 프레임워크를 이용한 웹 프런트엔드 기초부터 실전 SNS프로젝트까지

김근영 지음

비제이퍼블릭 2022년 01월 20일 출간 종이책 : 2022년 01월 25일 출간

작품소개

책소개

웹 애플리케이션 개발을 위한 「Svelte 실전 가이드」
웹 프런트엔드 기초부터 실전 SNS 프로젝트까지

스벨트의 장점과 기능, 기존 프런트엔드 프레임워크와의 차이점 그리고 스벨트가 실전 프로젝트에 어떻게 사용되는지 소개한다. 또한, 실제 백엔드 서버가 있는 환경에서 ‘Todo 서비스’와 ‘SNS 서비스’를 효과적으로 구현한다. 이 과정에서 단순히 하나의 프레임워크를 익히는 것을 넘어 컴포넌트, 상태값, 비동기통신 등 프런트엔드 개발자라면 알아야 하는 기본기를 익힐 수 있다.

이 책을 통해 스벨트 문법을 체계적으로 공부하고 간결한 코드로 웹 프런트엔드를 빠르게 개발해 나가며 스벨트의 매력을 제대로 느껴볼 수 있을 것이다.

이 책을 통해 얻을 수 있는 것

- Svelte 프레임워크 활용 및 응용 스킬
- 프런트엔드 개발 과정에 대한 전반적인 이해
- 화살표함수, map, filter 등 모던 자바스크립트 문법의 이해
- axios를 이용해 백엔드 서버와 효율적으로 통신하는 방법
- 토큰을 이용해 인증과정을 프런트엔드에 적용하는 방법
- SNS 서비스 제작을 통한 실전 개발 프로젝트 경험
- rollup.js 번들러의 이해
- 무한스크롤, 폼검증, 쉬운날짜보기 등 실무에 바로 적용 가능한 프런트엔드 스킬

목차

Chapter 01 Svelte 소개
1-1 웹 프런트엔드의 과거와 현재
1-2 Svelte의 등장
1-3 Svelte 장점
____1-3-1 Write less code: 보다 적은 코드
____1-3-2 No virtual DOM: 가상돔 없이
____1-3-3 Truly reactive: 진정한 반응성

Chapter 02 학습 환경
2-1 REPL을 통한 예제 실행방법 소개
2-2 로컬 개발환경 구축
____2-2-1 Node.js 환경 설정
____2-2-2 비주얼 스튜디오 코드 설치
____2-2-3 Svelte 설치 및 실행
2-3 Svelte 설치 폴더 설명
____2-3-1 기본 구성요소 및 폴더 구조 설명
____2-3-2 Svelte 기본 구성요소
2-4 소스코드 실행방법

Chapter 03 컴포넌트(1) - 기본 사용방법
3-1 컴포넌트 기본
3-2 State(상태값)
3-3 Reactivity(반응성)
____3-3-1 마크업 영역에서의 반응성
____3-3-2 스크립트 영역에서의 반응성 - $:
____3-3-3 다른 프레임워크와 코드 비교
3-4 Event
____3-4-1 이벤트 기본 사용방법
____3-4-2 인라인(inline) 이벤트 사용방법
____3-4-3 이벤트 수식어(modifiers)
3-5 Props를 이용한 컴포넌트 통신방법
____3-5-1 Props 기본 사용방법
____3-5-2 Props 데이터 변경

Chapter 04 컴포넌트(2) - Template 제어
4-1 논리블록 {#if...}
____4-1-1 if 블록
____4-1-2 else 블록
____4-1-3 else-if 블록
4-2 반복블록 {#each...}
____4-2-1 Each 블록
4-3 Binding
____4-3-1 바인딩이란?
____4-3-2 레인지 바인딩
____4-3-3 셀렉트박스 바인딩
____4-3-4 체크박스 바인딩
____4-3-5 group input을 이용한 라디오 버튼 · 체크박스 바인딩
____4-3-6 contenteditable 바인딩
____4-3-7 컴포넌트 바인딩
4-4 슬롯(Slot)
____4-4-1 슬롯이란?
____4-4-2 슬롯 name 설정
____4-4-3 조건에 따른 표현
____4-4-4 슬롯에서의 Props 통신
4-5 라이프사이클

Chapter 05 컴포넌트 통신 고급
5-1 context API
____5-1-1 context API 기본 사용방법
____5-1-2 context API 활용 예제
5-2 dispatch
5-3 store
____5-3-1 writable store
____5-3-2 derived store
____5-3-3 readable store

Chapter 06 스타일 및 효과
6-1 CSS 제어
6-2 transition: 화면전환
____6-2-1 fade
____6-2-2 blur
____6-2-3 fly
____6-2-4 slide
____6-2-5 scale
____6-2-6 draw
____6-2-7 in · out
____6-2-8 crossfade
____6-2-9 flip을 이용한 애니메이션
6-3 motion
____6-3-1 tweened
____6-3-2 spring
6-4 actions
____6-4-1 액션 기본 사용방법
____6-4-2 액션에 인자 전달
____6-4-3 update · destroy
____6-4-4 액션을 통한 이벤트 제어
____6-4-5 액션을 이용한 외부 라이브러리 활용

Chapter 07 Modal로 배우는 컴포넌트 실습

Chapter 08 실전 프로젝트(1) - Todo 서비스 만들기
8-1 Todo 프로젝트 설명
____8-1-1 Todo 서비스 기능
____8-1-2 기본 환경설정
8-2 컴포넌트 배치
8-3 Todo 리스트 출력
8-4 Todo 입력
8-5 Todo 삭제
8-6 Todo 수정
8-7 count & Todo 보기모드
____8-7-1 count: 할 일 개수
____8-7-2 보기모드: 모두 보기 · 진행 · 완료
8-8 화

출판사 서평

프런트엔드 웹 개발 트렌드를 리딩하는 강력한 프레임워크, Svelte!
프런트엔드 3대장 React · Vue · Angular의 자리를 위협한다

스벨트는 Virtual DOM(가상 돔)과 런타임에 로드할 프레임워크가 없고, 굉장히 빠른 퍼포먼스 속도를 자랑하는 최신 프레임워크다. State of JS 2020 Survey에서 개발자의 86%가 스벨트 사용에 만족했고, Stack Overflow가 2021년 실시한 설문조사에 따르면 스벨트가 71.42%로 리액트(69.28%)와 뷰(64.41%)를 제치고 가장 사랑받는 프레임워크로 선정되었다. 이런 추세라면 스벨트는 곧 대중적인 프레임워크로 성장하여 새로운 분야를 개척해 나갈 것이다.

누구보다 빠르고 효율적으로 웹 개발을 하고 싶은 독자분께 추천합니다!

프런트엔드 3대장보다 적은 코드로 강력한 결과를 내는 스벨트가 상승세를 타고 있는 지금, 스벨트를 선택하지 않을 이유는 없다. 쉽고 빠르게 웹 애플리케이션 개발을 하고 싶은 분, 새로운 웹 개발 트렌드에 관심 있는 분이라면 스벨트를 시작해야 할 때이다. 이 책과 함께 스벨트를 빠르게 습득하여 커리어 영역을 넓히고 더욱 경쟁력 있는 개발자가 되길 바란다.

이 책의 독자
- Svelte로 최신 웹 애플리케이션을 구축하려는 프런트엔드 또는 풀 스택 개발자
- JavaScript까지 학습한 후 어떤 프런트엔드 프레임워크를 선택해야 할지 고민 중인 입문자
- React, Vue, Angular 등 다른 프레임워크를 사용해 본 경험이 있는 개발자

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

작가정보

저자(글) 김근영

저자 : 김근영
2000년도 중반부터 본격적으로 웹 개발을 시작하여 현재까지 프리랜서 개발자로 활동하고 있다. 약 5년간 Amplix BI 솔루션 실무자 교육을 진행하고 개발을 지원하며 새로운 기술을 효율적으로 전달하는 경험을 쌓았다. 현재는 개발 업무와 함께 개발자들에게 도움이 될 만한 웹 프런트엔드 분야의 새로운 기술을 찾고, 강좌와 책을 통해 이를 공유하고 있다.

현) 프리랜서 개발자
전) ㈜비즈플러그 전략솔루션 사업부 팀장
전) ㈜퍼니몽키스 위니스토리 서비스 개발 팀장

- 블로그: https://medium.com/freeseamew
- 깃허브: https://github.com/freeseamew
- 스벨트 강좌: https://www.inflearn.com/course/만들면서-배우는-스벨트/