- 현재 위치
- home > 컴퓨터·ICT·어학 > 컴퓨터·IT 도서 > 웹프로그래밍 > 스벨트로 시작하는 웹 프런트엔드[비제이퍼블릭]
;)
스벨트의 장점과 기능, 기존 프런트엔드 프레임워크와의 차이점 그리고 스벨트가 실전 프로젝트에 어떻게 사용되는지 소개한다. 또한, 실제 백엔드 서버가 있는 환경에서 ‘Todo 서비스’와 ‘SNS 서비스’를 효과적으로 구현한다. 이 과정에서 단순히 하나의 프레임워크를 익히는 것을 넘어 컴포넌트, 상태값, 비동기통신 등 프런트엔드 개발자라면 알아야 하는 기본기를 익힐 수 있다.
이 책을 통해 스벨트 문법을 체계적으로 공부하고 간결한 코드로 웹 프런트엔드를 빠르게 개발해 나가며 스벨트의 매력을 제대로 느껴볼 수 있을 것이다.
이 책을 통해 얻을 수 있는 것
- Svelte 프레임워크 활용 및 응용 스킬
- 프런트엔드 개발 과정에 대한 전반적인 이해
- 화살표함수, map, filter 등 모던 자바스크립트 문법의 이해
- axios를 이용해 백엔드 서버와 효율적으로 통신하는 방법
- 토큰을 이용해 인증과정을 프런트엔드에 적용하는 방법
- SNS 서비스 제작을 통한 실전 개발 프로젝트 경험
- rollup.js 번들러의 이해
- 무한스크롤, 폼검증, 쉬운날짜보기 등 실무에 바로 적용 가능한 프런트엔드 스킬
이 책을 통해 스벨트 문법을 체계적으로 공부하고 간결한 코드로 웹 프런트엔드를 빠르게 개발해 나가며 스벨트의 매력을 제대로 느껴볼 수 있을 것이다.
이 책을 통해 얻을 수 있는 것
- 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
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
