리뷰] 가장 빨리 만나는 스벨트

가장 빨리 만나는 스벨트 - 프런트엔드를 위한 더 쉽고 빠른 기술!
박승현 지음 / 길벗 / 2021년 12월

간결하고 금방 배울 수 있는 코드가 있는데요. 그게 바로 스벨트입니다. 스벨트는 2016년에 출시한 오프소스 프런트엔드 프레임워크입니다. 현재 3대 프런트엔드 프레임 워크로 불리는 리액트(React), 뷰(Vue.js), 앵귤러(Angular) 못지않게 사랑받고 있는 프레임 워크 스벨트입니다. 가장 매력적인 점은 적은 양의 코드로 작성하고 가상 돔을 사용하지 않으며 진짜 반응성을 제공한다는 점입니다.

진짜 반응성을 경험하고 쉽고 빠르게 스벨트를 배우고 싶은 분들에게 가장 빨리 만나는 스벨트를 소개합니다. 스벨트는 새로운 프레임워크인데요. 직관적이고  짧은 문법으로 양방향 바인딩과 리액티비티 코드를 작성 할 수 있어 빠르고 쉽게 앱을 만들 수 있는 장점이 있습니다.

이번 저서를 통해 스벨트 기본 정의부터 마지막 프로젝트 두뇌 게임 만들기를 통해 직접 경험하고 만들어보면서 빠르게 스벨트를 배울 수 있는 과정들을 담고 있습니다.

스벨트는 작성해야 하는 코드의 양을 줄이는 것 중요시하고 있습니다. 가장 빨리 만나는 스벨트는 코드의 간결할 수 있다는 걸 직접 보여줍니다. 다른 프레임워크와 비교하면 한 번에 느낄 수 있을 정도로 간결한데요. 리액티비티에 필요한 코드는 단 한 줄로 나타냅니다. 코드가 간결하기 때문에 프런트엔드 초보자들도 빠르게 개발을 배울 수 있습니다.

동시에 컴파일러인데요. 스벨트를 사용하기 위해 코드에 <script src=’svelte.js’>형태로 js를 삽입하거나 import나 require를 이용해 모듈 형태로 포함시키지 않습니다. 스벨트 컴파일러가 우리가 작성한 코드를 순수한 자바스크립트로 변환해 줍니다.

또한 가상 돔 같은 추상화 계층을 만들어 내지 않고 일반적인 프레임워크가 런타임에 할 일을 빌드 시에 해결하면서 사용자의 브라우저 부하를 최소화합니다.

저서를 읽다 보면 특별히 이해해야 할 자바스크립트 함수나 문법 없이도 스벨트를 배울 수 있습니다. a, b, 변수를 선언하고 input 엘리먼트 안에서 bind:value = {변수명} 형태로 선언하기 때문입니다. 빌드 시에 스벨트가 알아서 작동합니다.

스벨트의 장점을 가지고 쉽고 중간마다 있는 그림으로 정확하게 이해하면서 개념을 배울 수 있습니다. 이뿐만 아니라 참고 부분을 통해 꼭 알아야 하는 정보까지 담고 있습니다.

스벨트하면 반응성을 생각나죠. 반응성이란 관심 있는 무언가에 반응해 동작하는 것을 말합니다. 브라우저 안에서도 쉽게  찾을 수 있는데요. 인터넷 브라우저의 크기에 반응해 그에 맞는 페이지 형태로 보여주는 것을 리액티브 웹이라고 합니다. 이렇게 무언가에 반응해 동작하는 것을 리액티브하다, 반응형이라고 박승현 저자님이 설명해줍니다.

간단하면서 자세한 설명을 통해 진도를 나가다 보면 어느새 20장 두뇌 개발 게임 만들기를 접할 수 있는데요.  두뇌 개발 게임 만들기에서는 앱 개발부터 서비스까지의 전체 과정인 아키텍처, 설계, 개발, 빌드, 배포, 서버 구성 및 구동을 차곡차곡 실습해 볼 수 있게 구성했습니다. 한 땀 한 땀 따라 하다 보면 어느덧 내가 만든 앱이 인터넷에서 동작하는 것을 볼 수 있습니다.

가장 빨리 만나는 스벨트는 이름처럼 빨리 배울 수 있게 학습을 위해 기본 템플릿 문법, 반응성, props, 이벤트, 스토어, 모션, 액션 등의 기능을 주제별로 분류해서 정리되어 있습니다. 또한, 매번 프로젝트를 생성하지 않고 REPL을 활용해서 바로바로 실습 결과를 확인하면서 익힐 수 있는데요. 간결한 스벨트를 경험해 보고 싶은 독자분들에게 추천합니다.

길벗 예제 소스 https://github.com/gilbutITbook/080278