(책후기) 실전 스벨트, 스벨트킷 입문-2024
2024년 4월 26일 출판
자바스크립트의 UI 라이브러리 스벨트를 배울 수 있는 책.
MZ 개발자가 사랑하는 오픈 소스 프레임워크인 스벨트로 나의 기술력을 +100 시키자.
실용적인 자바스크립트 웹 프레임워크로 웹 애플리케이션을 개발하는 법을 배울 수 있다.
초보자도 따라 할 수 있어 너무 좋다.
스벨트 장점
스벨트는 런타임에 코드를 실행하지 않고 빌드 과정에서 코드를 컴파일하여 자바스크립트로 변환한다.
이 방식은 런타임시 코드를 해석할 필요가 없으므로 용량의 감소와 성능의 향상이라는 두 가지 장점을 제공한다.
스벨트의 유의어는 날씬한, 유연한, 우아한 이다.
책 난이도는 초급자용이다.
웹 개발 / 자바스크립트 초급자용이다.
Mac, 리눅스, windows에서 모두 실습가능하다.
Jpub 출판사에서 책을 제공받아 작성된 서평입니다.
이 책에서 배우는 것
<1> 유저 인터페이스를 만들기 위한 자바스크립트 프레임 워크를 배울 수 있다.
<2> 스벨트 기초를 배운다.
<3> 스벨트의 리액티비티를 배운다.
<4> 스벨트의 고급기능과 몽고디비, 인증을 배운다.
<5> 개인 정리
<1> 유저 인터페이스를 만들기 위한 자바스크립트 프레임 워크를 배울 수 있다.
1
스벨트는 2020년에서 2022년까지 3년간 가장 사랑받는 웹 프레임워크, 개발자 만족도 가장 높은 프레임 워크에 상위 랭크 됨.
2
장점?
몇 줄 안 되는 코드로 개발할 수 있다.
기본 HTML과 기본 자바스크립트를 사용하는 방법과 크게 차이가 없다.
3
온라인 쇼핑 페이지를 만들어보자~
4
프로젝트 준비?
CLI 환경
VScode 추천
Node.js
npm
HTML/CSS를 사용한 화면 구성 요소 생성.
변수와 이벤트 핸들러를 사용한 장바구니 담기 버튼 기능 추가.
배열 구문을 통한 관련 상품 표시.
<2> 스벨트 기초를 배운다.
1
웹 브라우저에서 작동하는 스벨트의 실행 환경 제공한다.
//대화형으로 기능을 시험해 볼 수 있는 환경을 제공한다.
2
웹프런트 개발도구 비트(vite)로 개발환경 구축하자.
3
스벨트는 컴포넌트 사용가능하다.
UI를 컴포넌트로 분리하여 개발할 수 있다.
. svelte 파일
컴포넌트로 분리하면 각각의 코드는 컴포넌트 내부의 관심사에만 집중할 수 있으며, 같은 컴포넌트는 다양한 곳에서 재활용하기 쉽다.
<3> 스벨트의 리액티비티를 배운다.
1
상태 변경에 따라 DOM을 업데이트하는 구조이다.
이러한 데이터(상태)의 변화에 따라 UI가 동기화되어 업데이트되는 특성을 리액티비티라고 한다.
2
예제)
클릭된 횟수를 표시하는 버튼 컴포넌트.
한 변의 길이를 사용해 면적과 부피를 표시하는 컴포넌트.
<4> 스벨트의 고급기능과 몽고디비, 인증을 배운다.
1
스벨트의 고급 기능?
템플릿에 사용할 수 있는 고급 문법
컴포넌트 인스턴스 간 상태를 공유할 수 있는 모듈 콘테스트
움직이는 UI를 구현하는 모듈, 트랜지션, 애니메이션
2
스벨트 킷으로 다중 페이지 애플리케이션 개발 하는 법.
3
MongoDB와 Vercel을 사용한 운영 환경 구축법 배운다.
4
Auth0를 통한 로그인 구현과 세션관리를 배운다.
5
부록에서 인증과 DB , 깃허브 계정생성과 연동법을 배울 수 있다.
단순 코딩이 아닌, 인증과 DB, 깃허브사용, 서버 사용법을 배움으로써 서비스 구성에 대해 배울 수 있다.
전체적인 서비스 요소를 알 수 있게 해주는 부록이다.
Auth0 등록법
MongoDB atlas 등록법
깃허브 등록, 리포지터리 생성, 액세스 토큰의 생성
Vercle 계정 등록법
<5> 개인 정리
MZ 개발자가 사랑하는 오픈 소스 프레임워크인 스벨트로 나의 기술력을 +100 시키자.
실용적인 자바스크립트 웹 프레임워크로 웹 애플리케이션을 개발하는 법을 배울 수 있다.
초보자도 따라 할 수 있어 너무 좋다.
웹 개발자를 초보에서 중급으로 가게 해주는 책이다.
다른책 보기
https://brunch.co.kr/magazine/it-book
감사합니다.
