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

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

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

저자 김근영

출판사 비제이퍼블릭

출간/배본가능일 2021년 01월 25일

정가 29,000원 

페이지 472 쪽

판형 크라운판 (173 * 230)

ISBN 979-11-6592-113-2(93000)

 

책 소개 

웹 애플리케이션 개발을 위한 「Svelte 실전 가이드」

웹 프런트엔드 기초부터 실전 SNS 프로젝트까지

 

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

 

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

 

이 책을 통해 얻을 수 있는 것

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

저자 소개 

김근영

 

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

 

현) 프리랜서 개발자

전) ㈜비즈플러그 전략솔루션 사업부 팀장

전) ㈜퍼니몽키스 위니스토리 서비스 개발 팀장

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

 

목차

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 화면전환 효과 적용

8-9 스토어를 통한 Todo 리팩토링

____8-9-1 storeForm · storeTodo 작성

____8-9-2 fetchTodos · countTodo 작성

____8-9-3 컴포넌트에 스토어 적용

 

Chapter 09 라우터(Router)

9-1 라우터란?

9-2 tinro 설치

9-3 라우팅 기능

9-4 중첩 라우팅

9-5 파라미터 전달 및 받기

9-6 프로그래밍 제어

9-7 화면전환

9-8 라우팅 가드

 

Chapter 10 서버와의 통신방법

10-1 fetch를 이용한 통신

10-2 axios를 이용한 통신

10-3 {#await} 블록을 이용한 통신 제어

 

Chapter 11 실전 프로젝트(2) - SNS 서비스 만들기

11-1 SLOG 프로젝트 설명

____11-1-1 SLOG 서비스 기능

11-2 API 설치 및 설명

____11-2-1 SLOG 백엔드 설치

____11-2-2 SLOG API 설명

11-3 프로젝트 생성 및 컴포넌트 배치

____11-3-1 프로젝트 생성

____11-3-2 디자인 요소 배치

____11-3-3 컴포넌트 배치

11-4 라우터 설정

11-5 axios를 이용한 서버통신 설정

11-6 스토어 배치

11-7 인증 구현

____11-7-1 인증토큰 설명

____11-7-2 authToken 스토어 작성

____11-7-3 auth 스토어 작성

____11-7-4 로그인 상태 체크

____11-7-5 로그인 페이지 작성

____11-7-6 회원가입 페이지 작성

____11-7-7 작성된 인증기능 테스트

11-8 글 목록 구현

____11-8-1 currentArticlesPage 스토어 작성

____11-8-2 articles 스토어 작성

____11-8-3 무한스크롤 기능 구현

____11-8-4 무한스크롤 문제 해결

11-9 글 작성 구현

____11-9-1 로그인 상태에 따른 글 작성폼 변화

____11-9-2 ArticleAddForm 컴포넌트 작성

11-10 글 수정 및 삭제 구현

____11-10-1 글 팝업 메뉴 설정

____11-10-2 글 수정모드 만들기

____11-10-3 글 수정 삭제

11-11 코멘트 기능 구현

____11-11-1 코멘트 페이지 이동

____11-11-2 코멘트 페이지에서 선택된 글의 내용 보기 설정

____11-11-3 코멘트 추가 및 목록 보기

____11-11-4 글목록에서 코멘트 카운트 수정

11-12 '좋아요' 기능 구현

____11-12-1 '좋아요' 관련 스토어 추가

____11-12-2 Aritcle 컴포넌트에 '좋아요' 기능 추가

11-13 보기모드 변경 구현

____11-13-1 보기모드 변경 원리

____11-13-2 스토어 작성

____11-13-3 ArticleHeader 컴포넌트에 보기모드 기능 구현

11-14 앱 완성도 높이기

____11-14-1 폼 검증(form validation) 구현

____11-14-2 날짜 보기 수정

____11-14-3 로그아웃 보완

11-15 마무리

 

Chapter 12 rollup 소개 및 번들러 이해

12-1 번들러란?

12-2 rollup 소개

12-3 기본 설정

12-4 SCSS 설정

 

Chapter 13 특수 요소

13-1 <svelte:self>

13-2 <svelte:component>

13-3 <svelte:window>

13-4 <svelte:body>

13-5 <svelte:head>

13-6 <svelte:options>

13-7 <svelte:fragment>

 

Chapter 14 유용한 자바스크립트 문법

14-1 화살표함수

14-2 배열조작 메소드

출판사 리뷰 

프런트엔드 웹 개발 트렌드를 리딩하는 강력한 프레임워크, 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