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

웹 애플리케이션 개발을 위한 「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 화면전환 효과 적용
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 배열조작 메소드