한빛출판네트워크

스벨트는 2019년에 등장해 새로나온 프레임워크 이다.

등장하자마자. 관심도에서 vue보다도 많은 관심을 받고 있다고 한다.

그이유를 책에서 찾아보면

다른 프레임워크가 쓰는 가상dom 이없어도 그역활을 하는 기능이 스벨트는 존재하고, 기존 프레임워크가 가지고있는 용량에 비해 스벨트는 훨씬더 적은 용량을 차지하고 있다고 한다.

이책에서는 예제 소스를 제공하고 있어, 쉽게 따라하기가 가능했고 설치를 굳이 안하더라도,

https://svelte.dev 를 통해 사이트에서 바로 작성하고 테스트코드를 확인해볼수가 있다.

스벨트는 실행하다보면 이건 놀라움을 금치 못한다. 그이유는 정말 간단한 코드만으로 강력한 기능을 제공하기 때문인데 단 몇줄로 컬러를 변경하는 웹애플리케이션을 만들수가 있다

결국 스벨트의 구조는 바닐라 js처럼 제공해서 용량과 기능을 확대하는 듯하다.

아직 전체를 접해보지 못했지만 써보면서 이건 배워야 되겠다는 생각이 들게끔 하는 강력한 언어라는 생각과 앞으로의 미래 를 책임질 웹프레임워크라는 생각이 들었다.

​

​

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

현재 프론트엔드 개발로 전향한지 1년이 넘어가는 시점에서 프론트엔드 프레임워크 동향 그래프에서 

스벨트에 대한 얘기는 들어 보았으나 마침 책을 통해 어떤 프레임워크인지 접해볼 수 있었다. 

현재는 버전이 낮아서 서비스 단계에서는 사용하지 말라고 하는데 버전 업데이트가 된다면 

한번 스벨트를 회사에서 적용해 보고 싶기도 하다. 

 내가 메인으로 사용하고 있는 Vue.js랑 비슷한 것 같으면서도 특이한 점이 하나 있었는데 

리액티브 구문이라는 것이 있어서 마치 computed 의 기능을 하는 듯 하다. 

이 외에 비슷한 기능들이 많아서 프론트엔드 프레임워크를 하나만 잘 이해하면 

스벨트도 금방 익힐 수 있을 것 같다. 완전히 새로운 개념은 아니라서 다행인 것 같다. 

​

전체적인 총 평으로 스벨트의 핵심 기능은 타 프레임워크보다 더 적은 코드로 같은 기능을 

구현할 수 있으며, 파일의 크기도 작아서 브라우저가 페이지를 불러오는 시간도 매우 짧고 

컴포넌트 내부, 컴포넌트간 데이터 처리가 아주 간단하다. 

지금은 vue도 나름 만족하면서 개발하고 있지만 올해 회사 프로젝트가 끝나고 내년에는 

스벨트를 집중적으로 공부해봐야겠다.

웹 개발에 관심 있는 분들에게 책 한 권을 소개해 드리고자 합니다.

저서의 제목은 스벨트 앤 새퍼 인 액션입니다. 제목의 스벨트가 무엇인지 아시나요?

스벨트는 프랑스어로 늘씬하단 말인데요.

자바스크립트 웹 애플리케이션 개발 프레임워크입니다.

자바스크립트 프레임워크에는 리액트와 뷰, 앵귤러가 있습니다. 리액트는 2013년에 출시됐습니다. 뷰는 2014년, 앵귤러는 2016년에 출시되어 사람들이 웹개발할 때 이용합니다. 스벨트 프레임워크는 더 늦은 2019년에 등장했습니다.

새로운 기술들이 나오면서 없어지는 기술들도 있는데요.

스벨트에 대해 궁금하신 분들은 이 책을 읽어보시길 추천합니다.

스벨트의 장점은 다른 프레임워크에 비해 용량이 가볍습니다.

스벨트는 프랑스어인 늘씬하단 뜻처럼 소셜 블로깅앱을 프레임워크별 비교 결과 성능이 가장 우수합니다. 압축된 입 크기, 코드 라인 수, 네트워크 전송 속도, 메모리 사용량 면에서 좋은 성능 결과가 나왔습니다. 스벨트는 가상돔을 사용하지 않는데요, 그 이유는 화면이 변경될 때, 변경되는 부분을 정확히 알 수 있기 때문입니다.

속도도 빠르고 코드량도 적은부분이 스벨트의 장점입니다.

스벨트가 어떤 프레임워크인지 다양한 예제를 통해 확인 가능합니다. 로직, 마크업, 스타일링과 함께 스벨트 컴포넌트를 만드는 방법도 배우게 됩니다. 코드가 간결하지만, 코드가 어떻게 돌아가는지 모르면 코드를 이해하기 어렵습니다. 웹 개발은 해보신 적 있으시다면 조건 분기, 반복문, HTML 마크업 부분은 쉽게 이해할 수 있을 겁니다.

끝으로 스벨트 프레임워크로 개발하면 코드 양이 다른 프레임워크에 비해 양이 적습니다. 개발자에게 적은 코드 양으로 개발을 하는 것은 매력적인 일입니다. 코드를 이해하고 있다면 금상첨화인 기술입니다. 스벨트를 공부하고 싶으신 분들은 이 책이 도움 될 겁니다. 기초 개념부터 테스트, 배포, 네이티브까지 알려줍니다.

웹개발을 리액트, 뷰, 앵귤러, 스벨트 중에 고민이신 분들도 계실 텐데요.

스벨트는 장점이 많은 프레임워크이므로 한번 읽어보시길 추천합니다.

“한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다.”

저자는 이미 리액트, 뷰, 앵귤러를 잘 알고 있는 듯 보입니다.

웹 애플리케이션 프레임워크를 잘 이해하고 있다는 뜻이겠지요.

프레임워크에 도전하며 배운 내용을 정리하여 전달하는 방식과는 거리가 있습니다.

스벨트 한 가지를 꼭 집어서 알려주면서 관련된 내용도 빠뜨리지 않는 섬세함이 있습니다. 

Part 1. 스벨트를 소개하면서 다른 프레임워크와 차이점을 얘기합니다.

프레임워크를 이름만 들어봤을 뿐이라면 크게 와닿지 않을 수 있습니다.

특히 jQuery에 너무 묶여버린 나머지 자바스크립트 조차도 버거워한다면 프레임워크는 언감생심일 수 있습니다.

다만, 이 책을 보려는 분들은 앞에서 얘기한 안타까운 상황을 벗어났거나 벗어나려고 시도하고 있다고 생각합니다.

Part 2. 스벨트를 구성하고 있는 부분을 상세히 설명하고 있습니다.

특히 블록 구조, 컴포넌트 간 통신, DOM 상호작용은 스벨트의 뼈대를 이루고 있다고 생각합니다.

스벨트 기능 자체뿐 아니라 웹 애플리케이션을 만드는데 필요한 단계들도 다루고 있습니다.

프레임워크를 사용하는 이유는 웹 애플리케이션을 잘 만드는 것입니다.

굳이 스벨트를 사용하지 않더라도 웹 애플리케이션 제작에서 알아두어야 할 디버깅, 테스트, 배포도 얘기하고 있습니다.

스벨트를 설명하는 것처럼 꼼꼼하지는 않지만 따라해 볼 수 있는 예제를 제공하고 있어서 몇 번 반복하다 보면 금방 익숙해지리라 생각합니다.

실무에서 코드 못지않게 중요한 부분들이지만 실제 사례를 접하기 힘들거나 문서화 하기 애매한 내용들을 알려주고 있어서 많은 도움이 되리라 생각합니다.

Part 3. 스벨트 기반 프레임워크인 새퍼를 이야기합니다.

'스벨트도 프레임워크인데 프레임워크를 사용하는 프레임워크라니?' 라며 어리둥절할 수 있습니다.

그런데, 1장에서 스벨트가 컴파일러라는 설명을 떠올려보면, 스벨트는 컴포넌트를 만들어주는 컴파일러이고 이렇게 만들어진 컴파일러를 이용하여 웹 애플리케이션을 구성한다고 볼 수 있습니다.

문제는 웹 애플리케이션을 이루는 다양한 요소와 구조를 스벨트 만으로 갖춰 가기에는 손이 너무 많이 갑니다.

여기에 새퍼가 역학을 톡톡히 합니다.

컴포넌트들과 필요한 요소들을 엮어서 배치하고 연결하여 웹 애플리케이션을 구성합니다.

새퍼가 지원하는 강력한 기능들을 알게 되다면 사용하지 않을 수 없을 것 같습니다.

프레임워크를 사용하면서 아쉬웠던 부분을 새퍼가 보완해 주고 있습니다.

더하여 정적 사이트와 PWA 개발도 지원한다고 하니 기대가 되는 부분입니다.

Part 4. 자바스크립트와 CSS, HTML을 확장한 타입스크립트, Sass, 마크다운 같은 도구들이 많습니다.

스벨트에 이러한 도구들을 어떻게 적용할 수 있는지 알려줍니다. 익숙한 도구로도 얼마든지 스벨트를 이용할 수 있다고 얘기합니다.

스벨트 네이티브는 모바일 애플리케이션 개발도 가능함을 보여줍니다. 아마도 리액트 네이티브를 염두에 둔 것처럼 보입니다.

각장 마지막에 있는 '마치며' 섹션은 내용을 확인하느라 잃어버렸을 수 있는 방향을 잡아주며 정리해주는 역할을 합니다.

더 이상은 프레임워크 사용을 미룰 수 없다고 알려주는 듯 합니다.

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

- 스벨트에 대한 자세한 설명

: 스벨트는 현재 우리나라에서는 다소 생소한 프레임워크입니다. 그렇기 때문에 스벨트에 대해 알고 싶은 부분들이 많은데 이에 대해 자세한 설명을 포함하고 있습니다. 또한 스벨트 소스를 통한 설명도 좋습니다.

​

- 활용, 테스트, 배포

: 스벨트를 어떻게 활용하는지 그리고 어떻게 테스트하는지 또 배포하는지에 대한 설명을 모두 포함하고 있습니다. 이 책 한권이면 기본적인 스벨트 개발은 충분 할 것 같습니다.

​

- 새퍼를 통한 앱 개발

: 스벨트 기반 프레임워크인 새퍼에 대해 배울 수 있습니다. 뿐만아니라 새퍼를 통해 실제 앱을 개발해볼 수 도 있습니다.

​

프론트엔드 개발자로서 프레임워크는 하나의 도구입니다. 그래서 각각에 장점에 맞춰 필요한 프레임워크를 선택할 수 있다면 더 좋은 프로그램을 개발할 수 있습니다. 새롭게 뜨는 프레임워크로서 스벨트에 대해 배울 수 있는 책입니다. 스벨트와 새퍼에 대해 알고 싶다면 이 책을 추천합니다 :)

오늘 리뷰할 책은 스벨트 앤 새퍼 인 액션입니다.

현재까지 스벨트를 다루는 책은 스벨트 앤 새퍼 인 액션이 유일합니다.

스벨트와 새퍼의 특징과 장점을 자세히 설명하고 있으며 

다양한 예제가 수록되어 스벨트와 새퍼를 공부하려는 분들께 추천드립니다.

이 책은 독자가 HTML, CSS, 자바스크립트에 대해 안다고 가정하므로 기본적으로

HTML, CSS, 자바스크립트를 알고 계시는 분들께서는 책을 읽는데 무리가 없으실 것으로 생각됩니다.

스벨트 앤 새퍼 인 액션은 총 21개의 챕터로 스벨트와 새퍼를 자세히 다루고 있습니다.

저는 새로운 언어를 공부를 시작하면 기본적인 개념을 쌓은 후 TODO LIST를 만들어봅니다.

마침 책에서 여행용 물품 체크리스트를 함께 만들며 스벨트를 익힐 수 있었습니다.

전체적인 책 구성이 만족스러웠으며,

스벨트와 새퍼를 처음 접하는 입장에서

스벨트와 새퍼의 매력을 느끼며 읽을 수 있었습니다.

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

Manning 출판사의 “인 액션” 시리즈 답게 스벨트와 새퍼에 대한 간단한 소개로 시작해 각 주제에 대한 좀 더 자세한 설명과 따라하며 해당 내용을 자연스럽게 이해할 수 있는 적절한 예제가 구성되어 있다. 번역도 어색함 없이 매끄럽다.

React나 Vue.js가 아닌 스벨트에 관심을 가진 개발자라면 이미 프론트엔드 프레임웍을 경험해봤을 가능성이 높으니 상관없겠지만, 예제에 사용되는 npm 명령어에 대해서도 설명할 만큼 HTML과 자바스크립트에 대한 지식만 있다면 학습이 가능할 정도로 세심하게 가이드해준다.

출판 시점상 어쩔수 없는 부분이지만 새퍼는 더이상 업데이트 되지않고 SvelteKit이 대신하는 것으로 변경되었다. 물론 새퍼에 할애한 분량이 작고 SvelteKit이 그 기능들을 그대로 이어받은 만큼 그에 대한 설명은 충분히 참고할 만하다.

간결함과 작은 배포크기, 그리고 성능까지 당장 프로젝트에 도입하지 않더라도 학습하고 기존의 프레임웍과 비교해볼 매력이 있다.

한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성한 서평입니다.

웹 어플리케이션을 개발하는데 있어 자바스크립트의 영향력이 절대적이다 보니, 자바스크립트를 기반으로 개발한 웹 어플리케이션 개발 프레임워크에 대한 관심도 당연히 큰 것 같습니다. 즉, 프런트엔드 개발자라는 커리어 로드맵을 구성하는데 있어서 HTML, CSS, 자바스크립트까지는 무조건 쫓아가야 하는 길이라면, 리액트, 앵귤러, 뷰와 같은 프레임워크를 선택하는데 있어서는 고민을 많이 하게 됩니다. 기본적인 스터디에 너무 많은 시간과 비용이 들어간다면 개발자로서의 성장과정에 큰 지장이 되니까요. 이에 기존 웹 프레임워크보다 '늘씬한' 스벨트가 나도 있다고 손을 들었습니다. 이름처럼 미인이길 바라며 '스벨트 앤 새퍼 인 액션'을 읽어 봤습니다.

p11에 정리되어 있는 것처럼, 이 책은 HTML, CSS, 자바스크립트에 대해 익숙해야 읽어 나갈 수 있습니다. 거기에 덧붙이자면, 리액트와 뷰와 같은 다른 프레임워크를 이용하여 코딩하는 방법에 대해 기본적인 지식이 있으면 스벨트를 학습하는데 많은 도움이 됩니다. 스벨트 자체가 기존 프레임워크의 장점을 도입하고 단점을 보완하여 비교우위를 지니는 언어로서 개발된 느낌이 강하기 때문입니다. 예를들어, 리액트에서 프롭을 이용하여 컴포넌트를 구성하고 상태관리하는데 익숙하다거나 뷰를 이용하여 조건문 템플릿 같은 것을 작성해 본 경험이 있다면 스벨트의 코딩 스타일을 익히는데 별 어려움이 없을 것 같습니다. 심지어 php 코딩 경험도 스벨트 코딩 스타일을 이해하는데 도움이 되는 것 같습니다.

​

이 책 '스벨트 앤 새퍼 인 액션'은 다른 '인 액션'시리즈처럼 스벨트에 대하여 정말 많은 내용을 담고 있습니다. 어쩌면 스벨트 공식사이트인 https://svelte.dev/ 보다도 많은 내용을 담고 있을 것 같습니다. 이 책은 총 21개 챕터와 7개의 부록으로 구성되어 있습니다. 21개 챕터중 14개는 스벨트에 할당되어 있으며, 15장부터 19장까지는 스벨트 확장 프레임워크인 '새퍼'에 대한 내용으로 구성되어 있습니다. 책 전체적으로, 여행 준비물 체크 앱을 만드는 프로젝트를 스벨트와 새퍼로 개발하게 됩니다. 나머지 2개장과 부록에서는 스벨트와 관련된 주변지식과 학습에 도움될 내용들을 다루며, 안드로이드 및 iOS에 기반한 모바일 앱을 개발할 수 있는 '스벨트 네이티브'에 대해 언급합니다.

​

저자인 마크 보크먼은 37년 경력의 전문 소프트웨어 개발자라고 합니다. 경력 중 10년은 웹 개발자로 일해 왔다고 하는데요, 코드를 더 적게 작성해도 된다거나, 보다 작아서 더 빨리 작동한다든가 하는 개발자의 생산성면에서 스벨트와 새퍼가 다른 프레임워크와 비교하여 가장 단순하고 매력적이었다고 합니다. '선수입장'이라는 재미있는 제목으로 시작하는 1장부터 앵귤러, 리액트, 뷰 등과 같은 자바스크립트기반의 다른 프레임워크들과 스벨트가 어떻게 다른지 구체적으로 설명하고 있는 것도 그 이유인가 봅니다. 기존의 유명 프레임워크를 다 써 봤다는 전제로 각각의 차이점들을 설명하고 있어서, 경험이 적은 저 같은 사람들에게 매우 흥미롭기도 했고 스벨트에 대한 개념도 잘 잡게 된 것 같습니다.

​

자바스크립트에 이미 익숙한 개발자들을 대상으로 하는 책이지만 책 곳곳에 생소한 용어들에 대한 짧막한 설명이 꽤 잘 되어 있습니다. 코드를 전개하는데 있어서도 중요한 부분에는 이해를 도울 수 있는 주석들이 자상하게 달려 있습니다. 덕분에 자바스크립트 자체에 대한 이해도 따라 높아진 듯 합니다. 자바스크립트로 구성된 프레임워크들의 작동방법, 구성 부품의 개념 등을 놀랍도록 상세하게 잘 설명하고 있습니다.

​

스벨트로 개발할 수 있는 방법으로, 개발자체를 깃허브와 연계하여 웹에서 할 수 있는 REPL이나 코드샌드박스 등에 대하여 언급한 것도 흥미로웠습니다. 개발한 앱을 배포하는데 있어서도 HTTP 서버, 네틀리파이, 버셀, 도커 등을 이용하는 방법도 다루고 있어서, 저처럼 당연히 호스팅 서버에 FTP나 WinScp로 올리는게 다 인 줄 아는 사람에게 새로운 흐름을 이해하는데 많은 도움이 되었습니다. 물론 비주얼 스튜디오 코드를 사용하여 개발하는 방법도 잘 설명되어 있습니다.

​

다양한 코딩 언어에 대한 강의 경험이 많아서 그런지 저자의 코딩스타일도 좋았습니다. 리액트와 비교하여 뷰가 코딩 스타일이 매우 단순한 것처럼, 스벨트도 조건문이나 반복문 등을 사용하는데 있어서 매우 간결하게 처리된 것도 있고, 저자 스스로도 고급개발자의 코딩스타일을 유지하면서 시종일관 코드를 간결하게 작성하여 예제를 타이핑하는 것으로도 스터디가 많이 되었던 것 같습니다.

​

다만, 그 덕분에 반대로 좀 아쉬운 점은 ... 저자의 설명순서가 다른 책들에서 접하던 순서와는 사뭇 달라서 상당히 애를 먹었습니다. 보통은 코딩 결과 페이지의 디자인을 먼저 보여주고 전체적인 코딩 디자인을 먼저 잡고, 세부적으로 코딩을 작성해 가면서 컴포넌트도 만들고 관련 프롭스도 설정하고 해야 할 것 같은데 ... 저자의 설명순서는 반대로 적용된 것 같습니다. 스벨트 개발의 핵심이 재사용 가능한 컴포넌트를 만드는게 있어서 그런지 모르겠지만, 무작정 컴포넌트와 유틸리티 함수들을 먼저 만들고 나서, 해당 파트들이 import 되는 페이지 만든 후, 결과 페이지의 디자인을 보여 줍니다. 계속 따라하다 보면 굉장히 훌륭한 방법인지는 모르겠지만 ... 좀 ... 어려움이 있었습니다. 각 챕터마다 후반부를 먼저 살펴 보아 결과물 페이지를 일단 보고 HTML/CSS로 내 방식으로 페이지를 구성한 후 스벨트를 도입하는 나만의 코딩 방식으로 스터디를 진행했습니다.

​

그리고, 비주얼 슈튜디오 코드 같은 IDE를 이용하여 개발할 때, 리액트와 비슷하게 깃허브에서 스벨트 템플릿을 다운로드 받아 npm으로 인스톨한 후 개발을 하게 되는데요, 이 때 발생할 수 있는 이슈가 있으니 알아 두시는 것도 좋겠습니다. 원인은 잘 모르겠지만, 책의 설명이 작동하지 않는 경우도 있어서요. 책에서는 npx degit 으로 템플릿을 다운로드 합니다만, 에러가 발생할 수 있고 이미 깃허브에 관련한 이슈토론(https://github.com/Rich-Harris/degit/issues/37)도 있었습니다.

​

터미널에 npx degit sveltejs/template 작업폴더명 입력시,

​

! could not fetch remote https://github.com/sveltejs/template

! could not find commit hash for HEAD

​

에러가 발생하면, 먼저 깃이 제대로 설치되어 있는지 살펴보고, 터미널을 닫았다 새로 열거나 PC를 재부팅해 보기도 해야 합니다. 그래도 안 되면 p77 하단의 역자주에 작은 글씨로 설명되어 있는 대로, 깃허브에서 바로 수동으로 다운로드 받아(https://github.com/sveltejs/template) 압축을 풀어 폴더명을 바꾼 후 사용하면 됩니다.

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

2021년 7월에 출간된 <스벨트 앤 새퍼 인 액션>에 대해 소개합니다. 이 책의 부제는 '빠르고 우아한 웹 애플리케이션 설계 프레임워크입니다. 매닝(Manning) 출판사의 인기 있는 시리즈인 'in Action'의 명성답게 만족도가 높았습니다.  

이 책의 저자는 'Mark Volkmann'이며, 아마존 리뷰에서도 높은 점수를 받았습니다.  역자는 '박수현'님으로 번역에 대해서는 큰 불만을 느끼지는 않으실 것 같습니다. 대표 역서로 인사이트의 <자바스크립트는 왜 그 모양일까?>가 있습니다. 

<스벨트 앤 새퍼 인 액션>은 약 580여 페이지로 구성되어 있어 휴대하면서 읽기에는 조금 부담스러운 책입니다. 최근 출시된 한빛미디어 책은 전차책으로도 출간되므로 전자책을 읽을 수 있는 장치를 보유하신 분이라면 전자책으로 만나보는 것도 좋을 것 같습니다.

한빛미디어 평가단에 참가하여 작성한 글이며, 한빛미디어에서 제공해준 책을 읽고 작성했음을 밝힙니다. 
 

이 책의 매력은?

<스벨트 앤 새퍼 인 액션>은 2016년 등장한 프론트엔드 프레임워크로 최근 국내외에서 많은 사랑을 받는 스벨트(Svelte)에 대한 내용을 담고 있습니다. 필자가 알기로는 스벨트 관련 주제로 국내에 처음 소개된 책으로 알고 있습니다.

일반적으로 앵귤러(AngularJS), 리액트(ReactJS), 뷰(VueJS)를 프론트엔드 3대 프레임워크로 이야기하는데, 최근에는 스벨트를 포함하여 소개하는 글들이 많아지고 있습니다. 그럼 어떤 점 때문에 스벨트가 많은 관심을 유발하고 있는 것일까요? 이 질문에 대한 답은 <스벨트 앤 새퍼 인 액션>을 보시면 답을 얻으실 수 있습니다. 

<스벨트 앤 새퍼 인 액션>은 4부 21개의 챕터와 7개의 부록으로 구성되어 있습니다. 21개의 챕터에서는 스벨트에 대한 기본기를 습득할 수 있으며, 부록에서는 스벨트를 개발하기 위해 필요한 기본 소양과 다양한 도구들을 소개합니다. 이 책은 스벨트에 대한 기초 개념부터 테스트, 배포 등 다양한 지식을 습득할 수 있으며, 스벨트에 대한 고급 지식을 습득할 때 좋은 참고자료가 될 것 같습니다. 

자바스크립트에 대한 이해도가 어느 정도 있다면 이 책을 읽는데, 큰 어려움은 없으리라 생각합니다. 프론트엔드 개발에 필요한 기본 지식을 알고 있다면, 이 책을 이해하는 것이 더 쉬울 것입니다. 매력적인 스벨트를 활용하여 웹 페이지를 작성해보지 않으시겠어요?

마치면서

<스벨트 앤 새퍼 인 액션>에서 한 가지 아쉬운 부분은 새퍼(Sapper)에 대한 부분입니다. 물론 이 책은 번역서이고 계약 관계에 따라 대처하기 어려울 수도 있었겠지만, 스벨트를 제작한 리치 해리스(Rich Harris)가 새퍼를 더 이상 업데이트하지 않고 새로운 도구로 재명명하여 새롭게 출시한다고 밝혔는데 이 부분이 업데이트되지 않은 부분이 아쉬웠습니다. 

@sveltejs/kit이 아직 정식으로 출시된 것은 아닙니다. 현재 1.0 버전을 출시하기 위해 개발하고 있으며, 관련 내용은 다음 링크에서 확인하실 수 있습니다. 2020년 초부터 리치 해리스는 Sapper보다는 Routify를 추천했었습니다. 새롭게 만들고 있는 @sveltejs/kit은 Sapper와 Routify의 영향을 받아 만들어졌습니다. 

<스벨트 앤 새퍼 인 액션>은 스벨트를 매우 맛깔나게 소개한 좋은 책이라고 생각합니다. 이 책의 등장으로 국내에 스벨트 관련 기술이 보급되고 프로그래머에게 많은 사랑을 받을 수 있는 기회가 되었으면 좋겠습니다.

 "한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

스벨트 앤 새퍼 인 액션 Svelte and Sapper in Action

빠르고 우아한 웹 애플리케이션 설계 프레임워크 #마크볼크먼_지음 #박수현_옮김 #한빛미디어

스밸트와 새퍼를 보기 전에 HTML, CSS, 자바스크립트에 대해 선행학습이 되어야 한다. 

다른 프레임워크에 비해 간결한 코드가 매력적인 스벨트. 코드가 적어지면 버그가 숨을 곳도 줄어든다는 말이 너무 마음에 들었다. 이 책을 보고나서 나만의 TO-DO LIST를 꼭 만들 수 있기를!! 

1부> 시작하기. 

스벨트와 새터에 대한 소개를 시작한다.

스벨트는 다른 웹 애플리케이션 개발 프레임워크보다 더 적은 코드로 같은 기능을 구현할 수 있으며, 적은 용량에 가볍고 간단하고 빠르다. 새터는 스벨트에 고급 기능을 추가해 복잡한 웹 애플리케이션을 개발할 때 사용하면 좋다고 한다. 

이후 스벨트를 이용해 간단한 앱을 만들어보며 스벨트에 대한 맛보기가 가능하다. 

2부> 스벨트 파헤치기

본격적으로 스벨트 문법을 배워보는 단계.

각각의 예제를 통해 익힌 후 -> 익힌 내용을 '여행 준비물 앱 프로젝트'에 적용해 나간다. 

회차를 거듭할수록 앱이 완성되는 재밋는 공부방법으로 진행해 기본과 실습 모두를 잡을 수 있다. 

스벨트는 다른 프레임워크와 달리 애니메이션 기능을 내장하고 있다. 별도의 라이브러리를 불러오지 않아도 된다는 뜻. 2부 끝부분에서는 다양한 디버깅 방법과 테스팅을 익혀 배포하기까지 다루고 있다. 

간결한 싱글 페이지 제작에는 스벨트가 꽤 괜찮을것 같다. 

3부> 새퍼의 세계로

스벨트 기반 프레임워크인 새퍼에 대해 다룬다. 새퍼는 스벨트에 포함되어 있지 않은 강력한 기능들을 포함하고 있으며, 페이지라우팅 지원 · 서버 사이드 렌더링 제공 · 코드 분할 지원·오프라인 사용 지원 등 여러 장점이 있다. 

4부> 전처리기, 스벨트 네이티브, 참고 자료들(링크), REST 서비스 사용, 몽고DB에 대해 다루고 있다. 

스벨트 공식 홈페이지에서 튜토리얼을 제공하고 있지만, 튜토리얼 보다는 잘 정리된 책을 보는것이 문법을 익히기에는 더 좋은것 같다. 

이 책이 스벨트 관련 국내 최초 서적임에도 불구하고 많은 양의 참고자료를 수록하고 있어 스벨트에 대해 알아가는데 도움이 되었다.  

한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다.

이제 프론트엔드 개발에서 프레임워크와 라이브러리를 쓰지 않는 다는건 생각도 할 수 없는 것 같습니다.

백본, 앵귤러로 시작되어 현재는 리액트, 뷰를 많이 쓰고 있으며, 지금은 또 스벨트라는 프레임워크가

등장을 했습니다.

뷰도 리액트보다 사용하기 쉽도록 만들어졌는데, 스벨트는 뷰보다 더 쉽게 만들어진 것 같습니다.

물론 또 새로운 것을 배우고, 써야한다는 것은 부담이지만 이번에 한빛미디어에서 책으로 출간이 되어 

접할 수 있었습니다. 

우선 책에서 강조하는 스벨트를 써야하는 이유입니다. 여러가지가 있는데 몇 가지만 적어보았습니다.

. 스벨트는 코드를 적게 사용합니다.

. 스벨트는 가상 DOM 없이도 반응성을 제공합니다.

. 스벨트는 빠릅니다.

. 스벨트는 메모리는 덜 차지합니다.

. 스벨트는 양방향 데이터 바인딩을 제공합니다.

. 스벨트에서는 애니메이션을 쉽게 만들 수 있습니다.

뷰도 코드가 적다고 자부하는데, 스벨트는 실제 써보니 코드가 더 줄어들고, 직관적인거 같습니다.

다만 리액티브 선언문 이런게 좀 어색하긴 한데, 이런 선언문을 통해서 바인딩도 쉽게 할 수 있습니다.

그리고 장점으로는 코드 옆에 부가적인 설명도 포함되어 있어서 저자의 세심한 배려에 많은 도움이 될 수 있습니다.

또 한 Svelte를 배우기 위해서 아래와 같이 여행 준비물 앱을 만드는 과정을 거치며 개발 / 테스트 / 배포과정에

대해서 다뤄주는데, 초보자도 따라하는데 어려움 없이 진행할 수 있습니다.

그리고 스벨트 기반의 프레임워크인 새퍼에 대해서도 다루고 있습니니다.

스벨트를 좀 더 편리하고 쉽게 쓸 수 있도록 해주며, Native도 함께 다루고 있습니다.

마지막으로 Svelte 책이 아직 리뷰를 쓰는 시점에도 한빛미디어 책을 제외하고 없는 것 같습니다.

초보자가 따라하기에도 어려움이 없이 구성이 되어 있어서, 스벨트를 배우기 쉽다는 점과 뷰나 다른 리액트를 접하기

전에 먼저 스벨트를 먼저 익혀도 괜찮지 않을까 싶습니다.

쓰는 방법이 다른것이지 최근에 나온 프레임워크는 근본적인건 크게 다르지 않아 쉬운걸 먼저 배우고, 

어려운 걸 배운다면 많은 도움이 될 것 같습니다. 

여러 프론트엔드 프레임워크가 나오고 있지만, 어떤 걸 쓸지는 한 번씩은 경험해봐야 좋은 선택을 할 수 있을꺼 같습니다.

배우는 시간이 크게 소요되지 않으므로 책을 통해 스벨트를 배워보는 것도 좋은 선택인 것 같습니다. 

한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다.

개발자에게 떼려야 뗼 수 없는 스택 오버플로우에서 조사한 결과를 보면

Svelt가 가장 사랑받는 웹 프레임워크라고 합니다.

Svelt가 아직 많이 쓰이는 웹 프레임워크는 아니지만

많은 사랑을 받고 있으니 점점 많이 쓰이게 되겠죠.

자바스크립트 프레임워크, 라이브러리 3대장이라는

Anvular, React, Vue 보다 가볍고 빠르다고 당당히 소개하는 Svelt.

'스벨트 앤 새퍼 인 액션'은

현재 우리나라에서 Svelt를 다루는 유일한 책입니다.

프레임워크라서 그런지 꽤 방대한, 첫 만남이기에 생소한 내용을

텍스트 위주로 다루니 책이 쉽지 않습니다.

하지만 이 책을 통해 Svelt를 배우면 그저 아는 것으로 끝이 아닌

개발자로서 성장하게 될 것은 분명해 보입니다.

앞으로 대세가 될 Svelt!

'스벨트 앤 새퍼 인 액션'을 통해 먼저 배워보세요.

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

스벨트는 2019년에 등장해 무럭무럭 자라나고 있는 새로운 프론트엔트 프레임워크를 말한다. 가상돔 즉 Virtual Dom을 사용하지 않아서 React, Vue와 다른 페러다임을 제시한 프레임워크로 알고 있다. 2019년 관심도 1위를 기록할 만큼 핫하고 빠르게 성장하고 있는 JavaScript Framework이다. 일반적으로 JavaScript Framework로 유명한 React, Vue, Angular에 전혀 뒤지지 않는다. 평소 스벨트를 배워야지만 생각하고 있었지 막상 달려들지 못했었다. 본인은 Vue를 다루고 강의하고 있기에 스벨트에 대해 관심이 많았다. 

스벨트는 낮은 러닝커브를 자랑한다. 아마도 React를 배워본 분들은 너무 쉬운 코드를 사용한다는 것을 알 수 있고, 일단 놀래고 본다. 누구나 어렵지 않게 스벨트를 학습할 수 있다. 또 하나 스벨트는 가상돔을 사용하지 않기 때문에 변경된 부분을 찾기 위한 오버헤드도 발생하지 않고 따라서 렌더링 속도가 빠르다. JavaScript의 렌더링 속도가 빠르다는 것은 대단한 장점이 아닐 수 없다.

아마도 원서가 아닌 국내서로는 이 책이 처음일 것이다. 책 두께도 570페이지가 넘는다. 사실 JavaScript의 문법을 조금만 알아도 이 책을 따라가는데 문제가 없다. 하지만, 특별히 ES6를 잘 모르는 분들에게는 먼저 선행으로 ES6 학습을 권장한다. 본인도 이미 Vue를 다루고 있지만 스벨트라는 낯선 언어를 공부한다는 것이 쉽지는 않았다. 그런 차원에서 이 책은 스벨트에 관심을 갖고 스벨트를 통해 프로젝트를 하려는 분들에게 대단한 길라잡이가 될 것이다. 

한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다.

​

'svelte'를 발음도 못했는데, '스벨트'라고 읽는 거 였구나.

저자의 말 중 '쓸데없는 복잡함은 정말 보기만해도 화가 치밀어...'에 정말 동의 합니다.

존재 자체를 잊고 있었던, javascript의 label을 이용하는게 svelte에서 특이하게 보였습니다.

​

다른 in Action 시리즈 처럼 책의 내용 및 구성이 좋습니다.

svelte에 대한 설명도, sapper에 대한 설명도 충분합니다.

딱, 이렇게 2개만 설명할 것이라면 책이 이렇게 두꺼울 필요가 없었을 것 같습니다.

디버깅 방법이나 테스팅 방법도 포함되어 있고, 배포에 대한 장도 있습니다.

거기에 예제에 필요한 몽고DB도 부록에 포함되어 있습니다.

​

메인 앱 하나에 거의 대부분의 내용을 포함하며 서서히 키워가는 방식도 좋았습니다.

​

이 책 한권이면 svelte로 프로젝트를 하는데 부족함이 없어 보입니다.

개인 블로그에서 이미지로 퍼왔습니다. 원문을 보시려면 "이곳"으로 와주세요.





글 / 사진 : 서원준 (news@toktoknews.com) 

* 이 콘텐츠는 한빛미디어 “나는 리뷰어다” 이벤트에서 도서를 제공받아 솔직하게 작성되었습니다. 

이제 8월도 절반을 넘어섰다. 막바지 더위가 기승을 부리지만 계절은 여름에서 가을로 서서히 넘어가고 있다. 델타변이 바이러스는 전세계적으로 그 위세를 떨치고 있고 국내에도 예외가 아니다. 따라서 개인 방역을 철저히 하는 것이 중요할 것이다. 

델타변이 바이러스로 인한 제 2의 팬데믹으로 인해서 웹 개발도 재택근무를 진행하야 하는 상황이 되었다. 처음 웹 개발자들은 이른바 노가다가 많았다. 특히 html언어는 명령어가 생각보다 너무 방대했던 것이 사실이었다. 

웹 개발자들은 비교적 적은 코드와 작은 번들, 그리고 반응성 등을 갖춘 프레임워크를 그동안 요구하게 되었다. 스벨트와 새퍼가 최근 나오면서 그동안의 웹개발 문제가 상당 부분 해결되었다. 스벨트와 새퍼의 등장은 그에 맞는 도서의 출간을 요구받고 있었는데 때마침 국내 웹개발 관련 도서에서 최고의 능력을 인정받는 한빛미디어에서 이번에 스벨트와 새퍼에 대해서 제대로 설명한 책을 번역 출간하게 되었다. 

“스벨트 앤 새퍼 액션” 책은 스벨트와 새퍼를 만나는 가장 쉽고 빠른 방법에 대해서 설명하고 있다. 이 책에 등장하는 스벨트와 새퍼는 적은 코드, 작은 번들, 효율적인 DOM 관리와 반응성을 갖춰 큰 관심을 얻고 있는 프레임워크로, 생산성을 향상하고 싶은 웹 개발자를 위한 최적의 선택이다. 

이 책은 스벨트와 새퍼의 특징과 장점을 상세히 소개하며 다양한 예제를 통해 프레임워크의 기능을 꼼꼼하게 살펴본다. 할 일을 관리하는 앱과 여행 준비물을 챙기는 앱을 직접 만들어보며 스벨트가 제공하는 편리한 기능을 십분 활용해 볼 수 있다.

이 책은 총 4부, 21개의 장으로 이루어져 있다. 1부에서는 스벨트와 새퍼의 간단한 소개, 2부에서는 다양한 예제를 통해 스벨트를 심도 있게 다루며, 3부에서는 새퍼란 어떤 것인지를 집중 탐구하고, 4부에서는 위에서 다루지 못한 스벨트, 새퍼에 대한 내용을 다루는 순서이다. 이 책을 끝까지 따라 하다 보면 여행 준비물을 챙기는 데 유용한 앱을 만들게 될 것이다. 

도서 서평을 마치면서 

한빛미디어에서 출간한 “스벨트 앤 새퍼 액션”은 최근 웹 개발툴로 효용가치가 매우 높아진 스벨트, 그리고 새퍼에 대해서 제대로 다룬 책으로 델타변이 바이러스로 인헤 집콕이 일상화된 시점에서 보면 좋은 책이다. 이 책을 따라하다 보면 스벨트와 새퍼의 새로운 세계로 접어들게 될 것이다. 

오 놀랍게도 스벨트 관련 도서가 출시되었다. 아마 내가 알기로는 스벨트 관련 번역서로는 국내에서는 첫 도서가 아닌가 싶다. 

유명한 번들러 중에서 롤업을 만든 리치 해리스 아저씨가 스벨트를 만들었다고 하는데, 난 스벨트 잘 모른다. 일단 따라하며 살펴보는거다. 'ㅅ')

.svelte 파일에는 js, css, html 을 전부 때려넣어 구현할 수 있고, 스벨트 컴파일러는 .svelte 파일을 js 와 css 로 컴파일하게 된다. 모듈 번들링으로 롤업을 기본적으로 사용하며, 일반적으로 하나의 .svelte 컴포넌트 파일은 script, html, style 순서로 작성되는 것으로 도서에서는 소개하고 있다. 초반부에서 REPL 을 사용한 간단한 코딩 예제와 Todo 앱 예제 실습에서, '오 이것 봐라. 간단한데' 하는 느낌을 받았다. $: 구문으로 리액티브 변수 선언을 하는 부분이 React 의 useState 로 선언하는 상태 변수들에 비해 가볍게 느껴졌고, 첫 컴포넌트 제작에도 큰 어려움을 느끼지 못 했다.

'새퍼' 에 대해서 가볍게 살펴본 바로는 기본적으로 polka 라이브러리 기반으로 만들어져 있고, 페이지 라우팅, 페이지 레이아웃, SSR, 서버 라우트, code splitting, 정적 사이트 생성 기능 제공, prefetch 기능 지원을 하는 것으로 소개하고 있는데, 이는 React 환경의 Next.js 의 역할을 한다고 생각할 수 있겠다. 'ㅅ')a. React 환경에서 개발을 하고 있는 현재 일상에서 약간 떨어져 바라보자면, React 가 코드를 작성하는 방법에 있어 코드 일관/통일성 부분에서 이전의 코드 작성 환경과의 차이를 만들어냈다면, 스벨트는 기본 작성의 Rule 을 심플하게 가져가면서, 코드 작성의 자유를 좀 더 허가했다는 느낌이랄까 'ㅅ')

React 환경에서 함수 컴포넌트 사용시에 상태 관리를 위해 느껴지는 코드 작성 피로도를 줄일 수 있겠지만, 다수의 사람들과 협업시에는 앱/컴포넌트 복잡도가 올라간다면 제어를 위한 코드 작성 방식에 좀 더 신경을 써야겠다는 생각이 들었다.

이 도서에서는 스벨트의 기본적인 모든 것을 다루고 있다고 볼 수 있다. 사실 앱 설계 과정에서 '새퍼' 관련 코드까지 하나의 도서에서 다루고 있다는 점에서, 전체적으로 가벼운 스벨트를 사용한 전반적인 앱 설계를 가볍게 않게 소개하고 있는 레퍼런스 도서라 할 수 있다. 앞으로 설계할 앱에서 빠르고 가벼운 개발을 원하는 사람이라면 읽어볼만한 도서라고 생각한다.

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

  "한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

마크 볼크먼의 <스밸트 앤 새퍼 인 액션>은 이미 자바스크립트, HTML, CSS에 대한 어느 정도의 지식이 있고, 다양한 프레임워크에 대한 사용 경험이 있는 개발자를 위한 책입니다. 저 같은 경우 이제 만 3년이 된 신입 티를 벗으려고 하는 개발자입니다. Matlab을 통해 개발자 세상에 입문하였고 C/C++을 주로 활용하고 이제 막 파이썬을 통한 데이터 분석이나 딥러닝을 공부하고 있는 연구원이라 웹 개발에 대한 지식, 특히 자바스크립트나 HTML, CSS에 대해선 어지간한 초보 개발자만큼도 모르는 상황이었습니다. 

한빛미디어의 <나는 리뷰어다>를 통해 다양한 분야의 책을 읽어가고 있었는데, 최근 웹 개발에 대한 욕심도 생겨(소소한 토이 프로젝트 하기엔 웹 개발이 필수라고 생각이 들어) 이 책을 골랐는데, 웹린이의 입장에서는 조금 난해하게 다가왔습니다. 다만, 이 책의 구성이 안좋거나 스벨트라는 프레임워크가 복잡하고 어려워서 발생한 문제라기 보단 저의 웹에 대한 이해도가 떨어져서 발생한 문제였습니다.

책의 구성은 여타 다른 개발 도서와 유사한 구성으로 되어 있습니다. 나름의 차별점으로 보였던 부분은 "여행용 물품 체크리스트"를 스벨트의 기능을 하나씩 익혀가며 업그레이드 하는 형식으로 제공되고 있어 하나의 포트폴리오를 만드는데 있어서는 나름 성취감 있게 되어 있습니다. 또한 예제문들 사이사이에도 디테일한 설명들과 치밀한 구성 또한 이 책의 충분한 장점으로 다가왔습니다.

<스벨트 앤 새퍼 인 액션>에서 주장하는 스벨트 프레임워크에 대한 다양한 장점들이 다른 웹 개발 프레임워크를 사용해본 경험이 있다면 조금 더 와닿을 수 있었겠지만, 웹린이에게는 자바스크립트보단 가독성이 높게 개발이 가능해 보인다 정도로만 이해되었습니다. 웹 개발에 대한 어느정도의 이해가 있는 개발자라면 한번쯤 읽어봐서 스벨트라는 프레임워크를 경험해 볼 수 있는 것도 좋은 시간이 될 것 같습니다.

출처: https://jaksam.tistory.com/34 [작삼심일의 블로그]



스벨트는 매우 가볍고 사용하기 쉬운 프레임워크이다

거기다 스벨트를 더 사용하기 편하게 도와주는 새퍼와 함께 사용한다면 더할 나위 없이 편하고 쉽게 프론트 개발을 할 수 있게 된다

또한 이 언어로 앱까지 개발할 수 있다니 정말 가볍고 쉬운 프론트 프레임워크를 찾고 있다면 스벨트를 사용 해보는 것이

나쁘지 않은 선택이 될 수도 있을 것 같다

스벨트 앤 새퍼 인 액션 

최근 웹 개발 영역에서 크게 각광을 받고 있는 스벨트와 새퍼를 다루는 책이 출간되어 반갑게 집어들었다. 이 책은 빠르고 우아한 웹 애플리케이션 설계 프레임워크를 배울 수 있는 최적의 안내서이다.

스벨트와 새퍼는 적은 코드, 작은 번들, 효율적인 DOM 관리와 반응성을 갖춰 큰 관심을 얻고 있는 프레임워크로, 생산성을 향상하고 싶은 웹 개발자를 위한 최고의 선택이다. 이 책은 스벨트와 새퍼의 특징과 장점을 상세히 소개하며 다양한 예제를 통해 프레임워크의 기능을 꼼꼼하게 살펴본다. 

이 책을 배우고 익히게 되면 할 일을 관리하는 앱과 여행 준비물을 챙기는 앱을 직접 만들어보며 스벨트가 제공하는 편리한 기능을 십분 활용해볼 수 있다. 스벨트와 새퍼를 좋아할 이유는 많지만, 다른 웹 프레임워크와 비교할 수 없는 단순함이 가장 큰 매력이다.

스벨트는 코드를 더 적게 쓰고, 더 작은 크기의 번들을 만들고, 간단한 상태 관리를 제공하는데 새퍼는 스벨트 기반 도구로 페이지 라우팅, 서버 사이드 렌더링, 코드 분할, 정적 사이트 생성 등의 강력한 기능을 제공한다. 

책의 구성은 네개의 큰 챕터로 이어지며 21개의 세부 강의가 준비되어 있다. 맨 먼저 스벨트와 새퍼에 대한 간단히 소개와 함께 다양한 예제를 통해 스벨트를 심도 있게 다루고 나면 본격적인 새퍼 집중 탐구가 이어진다. 

개인적으로는 여행 준비물을 챙기는 데 유용한 애플리케이션 제작을 도와주는 대목이 즐거웠는데 책의 예제를 꼼꼼이 끝까지 따라 하다 보면 자연스럽게 익힐 수 있었다. 특히 한 권의 책에 기초 개념부터 고급 활용, 테스트, 배포, 네이티브까지 알차게 담겨 있던 점이 만족스러웠고 다양한 정보와 풍부한 예제, 친절한 설명을 따라가다 보면 스벨트와 새퍼만의 매력에 흠뻑 빠지게 된다.