가장 빨리 만나는 스벨트
쉽고 간결한 코드로 빠르게 배우는 프런트엔드!
간결한 코드와 낮은 학습 곡선! 스벨트의 코드는 간결하다. 다른 프레임워크와 비교해도 매우 간결하다. 리액티비티를 위해 필요한 코드는 단 한 줄이다. 코드가 간결하기 때문에 프런트엔드 초보자도 빠르게 배울 수 있고, 경험자도 빠르게 배울 수 있다. 즉, 학습 곡선이 낮다.
빠른 실행 속도와 작은 크기! 스벨트는 가상 돔을 사용하지 않으니 변경된 부분을 처리하는 부하가 필요하지 않다. 그래서 빠르다. 스벨트는 프레임워크가 아니라 컴파일러로 동작한다. 프레임워크를 배포하는 것이 아니라 모든 코드를 컴파일한 자바스크립트 번들로 제공하기 때문에 생성되는 코드의 크기가 작다.
빠른 학습을 위한 주제별 분류! 프레임워크의 다양한 기능을 주제별로 분류해서 빠르게 접근한다. 기본 템플릿 문법, 반응성, props, 이벤트, 스토어, 모션, 액션 등의 기능을 주제별로 분류해서 정리했다. 또한, 매번 프로젝트를 생성하지 않고 REPL을 활용해서 바로바로 실습 결과를 확인할 수 있게 했다.
두뇌 개발 게임 만들기로 실습하기! 두뇌 개발 게임을 만들어보면서 아키텍처 구성, 화면 구성, 라우팅 구성, DB 사용법까지 종합적으로 사용해본다. 깃허브에 소스 코드를 배포하고, 깃허브의 소스 코드를 아마존 웹 서비스에서 자동으로 빌드하여 서비스하는 과정까지 소개했다. 내가 만든 프로젝트를 웹에서 실제로 배포하고 서비스하는 것까지 경험해보자.
«가장 빨리 만나는 스벨트»는 1~5장을 공개합니다.
목차
- 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}로 디버깅, 리액티브하게 디버깅하기
- 4.11.1 debugSample 프로젝트를 생성하기
- 4.11.2 {@debug}로 브라우저에서 디버깅하기
- 4.11.3 리액티브하게 디버깅하기
- 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.4.1 라디오 그룹
- 6.4.2 체크박스 그룹
- 6.4.3 그룹 선택 내용 보여주기
- 6.5 textarea 바인딩하기
- 6.6 단일 select, 다중 select 바인딩하기
- 6.7 contenteditable 바인딩
- 6.8 {#each ...} 블록에서 속성값 바인딩하기
- 6.9 media의 속성값 바인딩하기
- 6.10 크기 값 바인딩
- 6.11 this 바인딩
- 6.12 하위 컴포넌트 데이터 바인딩
- 6.12.1 하위 컴포넌트 List 만들기
- 6.12.2 상위 컴포넌트에서 하위 컴포넌트 import
- 6.12.3 HTML 블록에 List 컴포넌트 추가하고 데이터 바인딩
- 7장 하위 컴포넌트 사용
- 7.1 예제 프로젝트 생성하기
- 7.1.1 프로젝트 생성
- 7.1.2 폴더로 이동/관련 패키지 설치
- 7.1.3 개발자 모드로 실행하기
- 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.4.1 하위 컴포넌트 생성하기
- 9.4.2 커스텀 이벤트를 전파하고 데이터도 넘겨주기
- 9.4.3 하위 컴포넌트를 추가하기
- 9.4.4 커스텀 이벤트와 처리 함수를 연결하기
- 9.4.5 하위 컴포넌트 데이터 꺼내 쓰기
- 9.5 이벤트 포워딩하기
- 9.6 돔 이벤트 포워딩하기
- 10장 라이프사이클
- 10.1 onMount
- 10.2 onDestroy
- 10.3 beforeUpdate와 afterUpdate
- 10.3.1 인스턴스 생성 시 호출 순서
- 10.3.2 변화 발생 시 호출 순서
- 10.4 tick
- 11장 스토어 사용하기
- 11.1 writable 스토어로 시작하기
- 11.1.1 구독 사용하기
- 11.1.2 구독(subscribe) 종료하기
- 11.1.3 set을 이용하여 값 변경하기
- 11.1.4 자동 구독 사용하기
- 11.1.5 update를 이용하여 값 변경하기
- 11.1.6 스토어 바인딩
- 11.1.7 구현 확인하기
- 11.2 readable 스토어 사용하기
- 11.2.1 readable 스토어 생성하기
- 11.2.2 readable 스토어 사용하기
- 11.2.3 구독 시작/종료 동작 확인하기
- 11.3 derived 스토어 사용하기
- 11.4 사용자 정의 스토어 만들기
- 11.5 get 함수 사용하기
- 12장 모션
- 12.1 트윈
- 12.1.1 duration 옵션
- 12.1.2 easing 옵션
- 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장 특수 엘리먼트
- 19.1
- 19.2
- 19.3
- 19.4
- 19.5
- 19.6
- 19.6.1 immutable 옵션
- 19.6.2 accessors 옵션
- 19.7
- 20장 두뇌 개발 게임 만들기
- 20.1 게임 화면 미리 보기
- 20.2 애플리케이션 아키텍처
- 20.3 배포 아키텍처
- 20.4 스벨트킷으로 프로젝트 생성
- 20.4.1 프로젝트 생성하기
- 20.4.2 프로젝트 폴더로 이동하기
- 20.4.3 의존성 있는 패키지들을 설치하기
- 20.4.4 애플리케이션 실행하기
- 20.5 코드 작성 준비하기
- 20.6 라우터로 페이지 구성하기
- 20.7 레이아웃으로 메뉴 구성하기
- 20.8 스토어 구성하기
- 20.9 홈(이번 주의 점수) 구현
- 20.10 게임 구현
- 20.10.1 데이터 모델링
- 20.10.2 게임 설명 모드 구현
- 20.10.3 문제 풀기 모드 구현
- 20.11 점수 저장 구현
- 20.12 몽고디비 연결하기
- 20.12.1 구글 계정으로 가입/로그인
- 20.12.2 Organization 생성하기
- 20.12.3 Project 생성하기
- 20.12.4 데이터베이스 서버 생성하기
- 20.12.5 몽고디비 연결 설정 및 사용자 생성
- 20.12.6 개발 도구 MongoDB Compass 설치하기
- 20.12.7 데이터베이스 및 컬렉션(Collection) 생성하기
- 20.13 REST API 구현
- 20.13.1 초기 데이터 넣기
- 20.13.2 점수 조회 API 만들기
- 20.13.3 점수 저장 API 만들기
- 20.14 이번 주의 점수를 REST로 구현
- 20.15 점수 저장을 REST로 구현
- 20.16 깃허브 클라이언트 설치하기
- 20.16.1 git client for Windows 설치
- 20.16.2 git client for macOS 설치
- 20.17 SSH로 깃허브에 연결하기
- 20.18 깃허브로 소스 배포하기
- 20.18.1 민감한 파일을 숨기기
- 20.18.2 깃허브에 원격 저장소 생성
- 20.18.3 깃 초기화하기
- 20.18.4 원격 저장소 연결 및 푸시(git push)
- 20.18.5 소스 수정해서 푸시하기
- 20.19 AWS 서버 만들기
- 20.19.1 가입 및 지역 선택
- 20.19.2 EC2 무료 서버 설치하기
- 20.19.3 탄력적 IP로 서버에 고정 IP 주기
- 20.19.4 SSH 접속 설정하기
- 20.20 터미널에서 접속하기
- 20.21 AWS 앱 서버로 설정하기
- 20.22 로컬 개발 환경에서 빌드
- 20.22.1 로컬 개발 환경에서 빌드
- 20.22.2 어댑터 패키지 설치
- 20.22.3 svelte.config.js 파일 수정
- 20.22. 4 .gitignore 파일 수정
- 20.22.5 npm run build 명령으로 빌드
- 20.22.6 node로 실행
- 20.22.7 깃허브에 푸시하기
- 20.23 운영(AWS) 환경에서 빌드 및 실행