|
시작하며, 나모 웹 에디터로 홈페이지를 만들며 웹 개발에 입문한 지 어느덧 이십여 년이 흘렀다. 이후 동적 사이트 구축을 위한 CGI, Perl, PHP, Python 등을 배우고 실무에 적용하며 2000년 초반부터 2012년까지 웹 서비스 개발에 전념했었다. 이후 신사업팀 발령으로 개발에서 손을 떼며 그렇게 십여 년의 시간이 흘렀다. 한참 개발 생활을 할 때만 해도 임베디드 시스템을 제외하곤 무조건 APM (Apache + PHP + MySQL)의 구성으로 서비스 제작을 했었다. 강산이 변한 지금 자바스크립트의 발전은 상상도 못했고, 그런 자바스크립트를 활용할 수 있는 수많은 프레임워크를 보며 놀라지 않을 수 없었다. React로 개발 중인 웹서비스에 접목시키고자 알아가던 중에 이 책의 출간 소식을 우연히 접하게 되었다. 이름조차 생소하여 영어 스펠링은 자주 틀리기도 하지만 검색을 통해 살펴보며 Svelte는 마침 내가 원하던 쉽고 간결한 구조와 문법은 빠른 결과물을 생산할 수 있을 것만 같았다. 이 글은 제이펍에서 출간한 ‘실전 스벨트 & 스벨트킷 입문'에 대한 리뷰이자 스벨트를 이해하는 과정을 담고 있다.  스벨트와 스벨트킷? 근래 웹 개발과 서비스를 다시 시작하며 페이지 전환을 부드럽게 해주는 싱글 페이지 어플리케이션 사이트를 만들어 보고자 리액트를 들여다보기 시작했다. 알아가며 여러 편리성과 장점을 배우게 되지만, 자바스크립트 문법만 아는 나로서는 모든 것이 생소함 그 자체였다. 그러던 중 이번에 제이펍 출판사에서 새로 출간된 '실전 스벨트 & 스벨트킷 입문'이라는 책의 출간 소식을 보게 되며 관련 정보를 찾아보았다. 스벨트 역시 Node.js 기반으로 구동되며, 리액트와의 큰 차이점으로 코드가 전반적으로 간결하며 별도의 import가 필요 없다는 것이 큰 관심을 불러일으켰다. 딱 내가 원하던 기능이다. 스벨트는 사용자 인터페이스를 만들기 위한 자바스크립트 프레임워크의 하나이며, 스벨트킷은 스벨트의 기능을 확장하여 서버 사이드 렌더링, 정적 사이트 생성, API 라우팅 등을 포함하는 완전한 웹 애플리케이션 프레임워크이다. Next.js는 리액트 기반의 프레임워크로, 서버 사이드 렌더링, 정적 사이트 생성, 그리고 API 라우트 등의 기능을 내장하고 있어 이 또한 관심사였다. 그런데 결정적으로 코드의 간결함이 스벨트의 세계로 발을 내딛게 만들었다.
위 세 코드를 비교해보면서 스벨트가 가장 편안하게 눈에 들어왔다. 참고로 스택 오버플로우 개발자 설문조사에서 2021년에는 가장 사랑받는 프레임워크로 선정되었고, 2022년에는 4% 더 증가하여 75.28%의 개발자들이 선호하는 프레임워크 중 하나가 되었다. 스벨트의 가장 큰 장점으로는 코드 양을 줄이고, 빠른 성능을 제공하며, 적은 러닝 커브로 인해 빠르게 배울 수 있다는 점에서 나 또한 스벨트에 입문하게 되었다. 실전 스벨트 & 스벨트킷 입문 1. 가뭄에 단비 같은 책 React나 Next.js 그리고 스벨트를 포함하여 관련 서적이 그리 많은 편이 아니다. AI관련 서적들은 꽤 많이 볼 수 있지만 특정 분야의 기술서는 가뭄에 콩 나듯 출간하니 내 관심분야의 책의 출간은 모니터링 대상이 된다. 그러던 중 얼마 전 ‘실전 스벨트 & 스벨트 킷 입문’이 출간되었다.
 YES24에서 검색해 보아도 스벨트 관련 책이 몇 권 없다는 게 보인다. 마치 가뭄에 단비라도 만난 느낌이 밀려온다. 2. 누구에게 적합한 책인가? 책의 서론에도 명시되어 있다. "이 책은 자바스크립트와 HTML5에 대해 어느 정도의 이해도를 갖춘 상태에서 최신 스타일의 프로젝트와 웹 애플리케이션 개발 방법을 배우고 싶은 독자를 대상으로 한다. 리액트나 앵글러와 같이 다른 프런트앤드 라이브러리, 프레임워크에 대한 선행 지식이 있다면 조금 더 이해하기 쉽지만, 필수는 아니다." 개인적으로 리액트도 쉽게 접근할 수 있었던 건 이미 HTML이나 Javascript, CSS 등에 대해 어느 정도 이해를 하고 있었고, 근래 플러터를 사용하며 복작한 디렉터리 구조가 익숙해져서인지 리액트나 스벨트도 자연스럽게 다가왔다.  참고로 책에서도 소개하고 있지만 스벨트 공식 홈페이지에는 REPL(read-eval-print loop)라는 마치 구글 코랩 같은 웹 개발도구를 제공하고 있다.  이로 인해 Node.js설치나 Visual Studio Code 등에 익숙지 않은 입문자도 해당 사이트에서 기초를 닦을 수 있다는 게 큰 장점인 것 같다. 3. 책의 구성과 특징 이 책은 입문자가 실전 프로젝트를 통해 스벨트를 학습할 수 있도록 구성되어 있다. 쇼핑몰의 주요 기능을 구현하며 스벨트와 최대한 친숙하게 이끄는데 초점을 두고 있다. 하나씩 따라가면서 문법, 컴포넌트 생성, 데이터 바인딩 여러 기술을 차근차근 배워 나갈 수 있다. 처음 시작 시 스벨트와 바이트의 조합으로 예제를 진행한다. 후반에는 웹 어플리케이션 구축 시 필요한 스벨트킷을 중점 소개한다. 책은 2색을 사용하여 편안한 느낌으로 보인다.  설명은 검정, 제목과 소스는 붉은 계열로 표현하여 가독성이 상당히 좋다. 가끔 풀컬러의 책들을 보면 이쁘긴 한데 복잡한 느낌에 가독성이 떨어지는 책들도 있다. 그래도 단색으로 빼곡하게 처리하지 않은 것만으로도 감사한다. 책의 구성은 총 9개의 챕터와 한국어판 부록이 후반부에 수록되어 있다. CHAPTER 1. 스벨트 시작하기 CHAPTER 2. 스벨트 기초 CHAPTER 3. 스벨트의 리액티비티 CHAPTER 4. 스벨트의 고급 기능 CHAPTER 5. 스벨트킷으로 다중 페이지 애플리케이션 개발하기 CHAPTER 6. 스벨트킷 레퍼런스 CHAPTER 7. MongoDV와 Vercel을 사용한 운영 환경 구축 CHAPTER 8. Auth0를 통한 패스워드 없는 로그인 구현과 세션 관리 CHAPTER 9. 유저 경험 개선 - OGP 태그와 프리렌더링 APPENDIX A. 한국어판 부록 위 구성으로 제공하는 내용들을 살펴보면 스벨트에 대한 이해와 실전에 활용 내용들로 구성되어 있어 빠른 활용이 가능하지 않을까 생각한다. 마치며, 이 책은 제이펍 서평단에 선정되어 제공받은 책이다. 무상으로 책을 지원 받았다고 좋아요를 남발하지 않는다. 만약 내용이 부실하거나 도움이 안 될 것 같았으면 책의 추천은 절대 거론하지 않고 짧은 리뷰로 마감했을 것이다. ChatGPT와 같은 생성형 AI의 등장은 책에 대한 기피 현상을 만들 수도 있겠지만 개인적으로 AI를 제대로 활용하려면 나부터 제대로 된 개념을 잡아야 하기에 무조건 책부터 사서 참고한다. 하지만 위에서도 거론한 바와 같이 특정 분야의 기술서들은 참고할 만한 책들이 극소수이기에 신간이 출시되지 않으면 철 지난 서적들은 나부터도 기피하고 있기에 이렇게 신간이 출간되는 것만으로도 출판사에 감사하게 된다. 월평균 10만 원 내외로 필요 기술서적들을 구입하고 있었기에 서평단에 뽑히지 않았어도 바로 구매했을 것이다. 이 책 덕분에 전혀 인지하지 못하던 스벨트에 대해 알게 되었고, 이를 활용할 다양한 계획을 구상할 수 있게 되었다. 입문자나 리액트가 부담이 가는 개발자라면 스벨트가 제 역할을 해줄 것이라 생각하며 이 책을 추천해 본다. 참고로 예제 코드는 책 맨 앞장 바로 뒷면 하단에 기재되어 있다. https://github.com/developer-book/svelte  |
|
"스벨트 & 스벨트킷"은 현대적이고 강력한 웹 애플리케이션을 구축하기 위한 혁신적인 프레임워크인 Svelte와 그 보조 라이브러리인 SvelteKit에 대한 포괄적인 안내서입니다. 이 책은 Svelte와 SvelteKit의 기본 개념부터 심화적인 주제까지를 다루며, 실전 프로젝트를 통해 응용할 수 있는 실용적인 노하우를 제시합니다. 저자는 책 전반에 걸쳐 Svelte의 핵심 원리를 명확하고 자세히 설명하고 있습니다. 각 주제는 실용적인 예제와 함께 다루어져서 개념을 이해하고 적용하는 데 큰 도움이 됩니다. 또한 SvelteKit을 사용하여 프로젝트를 구성하고 배포하는 방법에 대한 실질적인 지침도 제공되어, 개발자들은 프로젝트를 시작하고 완성할 때까지의 전체 과정을 이해할 수 있습니다. 이 책의 강점 중 하나는 Svelte의 독특한 컴파일러 기반 접근 방식을 이해하는 데 도움이 되는 세부적인 설명입니다. 또한 Svelte의 반응형 선언성과 컴포넌트 기반 아키텍처를 통해 최신 웹 개발 동향을 익히는 데 이 책이 얼마나 가치 있는지를 알 수 있습니다. 책은 초보자부터 중급자까지 넓은 독자층을 대상으로 하고 있습니다. Svelte를 처음 접하는 사람이라면 기초적인 내용부터 차근차근 익힐 수 있고, 이미 경험이 있는 사람들도 SvelteKit과 같은 심화적인 주제를 탐구할 수 있습니다. 특히, 실전 예제와 풍부한 그래픽 요소는 개발자들이 개념을 보다 잘 파악하고 활용할 수 있도록 돕는 데 큰 도움이 됩니다. 전반적으로 "스벨트 & 스벨트킷"은 Svelte 및 SvelteKit에 대한 포괄적인 학습 자료로, 최신 웹 개발 기술을 습득하고 현대적인 프론트엔드 애플리케이션을 만들고자 하는 개발자들에게 강력히 추천할 만한 책입니다. Svelte 생태계의 혁신적인 접근 방식과 강력한 성능을 향상시키는 기술을 습득하고자 하는 분들께 이 책은 꼭 필요한 자료일 것입니다. |
 제이펍에서 리뷰 이벤트로 이 '실전 스벨트 & 스벨트킷 입문'을 제공하여 서평을 작성하게 되었습니다. 저는 현업에 있는 주니어 프론트엔드 개발자이며, 타 프론트엔드 프레임워크인 React.js와 Vue.js와 언어로는 자바스크립트를 주로 사용해 일하고 있습니다. 그 덕분에 프론트엔드 생태계에 대한 사전지식을 바탕으로 이 책을 읽을 수 있었습니다. 이 책에서 다루는 스벨트에 대해서는 개발 커뮤니티에서 이름을 듣고, 관심있는 회사의 팀에서 도입해 사용하고 있다는 것을 알게 되어 관심을 갖고 있었으나 실제로 사용해보지 않았습니다. 이렇게 스벨트에 대한 사전 지식이 없어도 1장을 보고 이해할 수 있었는데, 스벨트의 특징에 대해 크게 상태관리 기법, 컴파일 방식, 가상 DOM의 미사용으로 나누어 이미 친숙한 자바스크립트 및 리액트 방식이랑 비교해 설명을 하고 있어서 이해가 쉬웠습니다. 이를 넘어 간단한 '쇼핑 페이지 실습'을 통해 뒤에서 배울 내용을 튜토리얼 형식으로 톺아볼 수 있다는 점이 좋았습니다. 기존에 프론트엔드를 경험해보신 분이라면 같은 기능이 스벨트에서는 어떻게 사용되는지 비교하면서 이해할 수 있습니다. 챕터 2, 3에서는 스벨트 개발에 필요한 환경 설정과 문법에 대해 알 수 있습니다. 프론트엔드 개발을 경험해신 분이라면 어느 정도 개념을 공유하고 있어서 문법에 대해서는 사용법만 눈에 익히시고 계속 코드를 옮기시면 금방 익숙해질 수 있을 건데, 문법에 대한 내용 뿐만 아니라 'column'부분을 읽으면 타입스크립트와 사용법과 같은 추가적인 정보를 얻을 수 있는 것이 좋았습니다. 상태 관리를 위한 스토어까지 공부를 마치면, 4장에서는 스벨트에서 사용하는 고급 기능 및 UI 애니메이션과 같은 것도 배울 수 있어 심화적인 내용도 챙길 수 있었습니다. 챕터 5부터는 스벨트만으로 하기 힘든 부가적인 기능을 제공하는 스벨트킷의 내용을 포함하고 있는데, 페이지 라우팅 기능 뿐만 아니라 폼액션, 레이아웃 기능 등을 추가로 배울 수 있었습니다. 마지막 챕터까지는 mongoDB, vercel을 이용해 실제 이전의 장바구니 예제를 확장해봤는데, 데이터를 실제로 불러와 저장할 수 있게 하는 db도 구현하고, 배포까지 하면서 실제 개발에 필요한 사이클 하나를 체험해볼 수 있었습니다. 이 책을 읽으면서 작은 예제부터 확장해나가면서 배포까지 해보는 경험을 할 수 있었고, 큰 장점이라고 생각했습니다. 다른 책을 읽을 때는 프론트 구현에서 끝내는 경우도 종종 봤는데, 스벨트 사용방법에 대한 단순한 정보나열을 넘어서 실제 데이터를 저장하고 불러오기 위한 db부터 해서 사이트 배포까지 완전하게 구현해본 경험은 실제 작업하면서 도움이 될 것이라 생각합니다. 또한 부록까지 읽으면 auth0, github가 소개되어 있어 각각 로그인 구현과 코드 관리도 할 수 있는 방법도 알 수 있었습니다. 책의 난이도는 뒷면에 가장 낮은 난이도로 되어있지만, 개인적으로 이 책을 적어도 자바스크립트 언어에 대한 사전지식을 갖추고 있는 사람에게 추천해주고 싶습니다. 난이도가 낮아도 언어에 대한 지식이 없으면 이해 없이 코드를 따라칠 수밖에 없을 거라 생각하기 때문입니다. 자바스크립트를 갓 배운 프론트엔드 프레임워크 입문자에게는 시간이 걸릴 수 있지만 프론트엔드 프레임워크에 대한 특징을 기억하며 예제를 따라치면 배포까지의 경험을 가져갈 수 있고, 다른 프레임워크를 배울 때 도움을 받을 수 있을 거라 생각합니다. 저처럼 다른 프레임워크에 대한 경험이 있으면 알고 있는 프레임워크에 대한 지식을 대입해 이해하려고 하면 금방 배울 수 있을 거라 생각합니다. 특히 국내에 스벨트 관련 책이 많이 없어서, 프론트엔드 공부를 하는 중이거나 현업에서 일하면서 스벨트에 대해 관심을 가지게 되어 있어 배워보고싶은 분들께 이 책을 추천합니다. |
 안녕하세요, 다람쥐입니다. 이번에 소개드릴 도서는 '실전 스벨트 & 스벨트킷 입문' 입니다. 스벨트는 들어봤는데, 스벨트킷은 처음 들어봤어요. React 프레임워크 중 Next.js 와 비슷한 역할을 하는 걸로 보였어요.  라우팅, 데이터 로딩, 폼 액션, 페이지 렌더링(SSR 등), 상태 관리를 코어 컨셉으로 가져가고 Static Build, SPA(Single Page Application) 등의 빌드 방법과 Vercel, Netlify 으로 배포까지 도와주는 프레임워크더라고요. 스벨트를 도입할 때 스벨트킷 프레임워크도 고려해보면 좋을 것 같네요.   책 구성은 아래와 같아요! 초반부엔 스벨트를 설명합니다. 스벨트 문법과 컴포넌트로 나누는 법, 바인딩, 스토어를 설명합니다. 그리고 콘텍스트, 트랜지션 / 애니메이션 같은 고급 문법을 따로 설명합니다. 스벨트는 가상 DOM을 사용하지 않아 DOM에 바로 접근하게 됩니다. 값을 바인딩하면, 값이 '할당'되는 순간에 업데이트가 된다는 점이 신기했어요. 객체를 할당하고 객체 속성에 접근해서 바꾼다한들, 업데이트가 이뤄지지 않는데요. 예를 들어, [] 배열에 push를 해도 상태 변경이 이뤄지지 않습니다. 아래처럼 stars 에 재할당할 시, 스벨트에서 빌드 시 '할당'을 인식해 이 지점을 업데이트 지점으로 인식하게 됩니다. '할당'으로 한 이유가 업데이트 시점을 직관적으로 이해하기 쉽게 하기 위함이라고 합니다. 한 컴포넌트의 값이 '할당'이 일어나면, 렌더링이 되는 포인트구나! 를 쉽게 알 수 있더라고요.
＜script＞
let n = 1;
let stars;
$: {
????const newStars = [];
for (let i = 0; i ＜ n; i++) {
????newStars.push(i % 2 === 0 ? "*" : '');
}
stars = newStars;
}
＜/script＞
＜div＞
{#each stars as star}{star}{/each}
＜/div＞
＜div＞
＜button on:click={() =＞ (n = n - 1)} disabled={n ＜= 1}＞
????별 제거하기
＜/button＞
????＜button on:click={() =＞ (n = n + 1)}＞
????별 추가하기
＜/button＞
＜/div＞또 스토어가 생소했어요. writable 스토어, readable 스토어, derived 스토어, custom 스토어가 있습니다. 스벨트 컴포넌트는 변수를 사용해 상태를 관리하지만, 단일 컴포넌트 내에서만 사용이 가능한데요. 여러 컴포넌트 상태를 공유하기 위해 스토어를 사용합니다. 값을 구독 / 해지하는 기법을 사용합니다. 스토어 값이 변경되는 순간, 구독하는 모든 컴포넌트에 신호를 전달합니다. 각 컴포넌트는 변경된 값을 다시 컴포넌트 변수에 '할당'하게 되는거죠. '할당'이 일어났으니 렌더링 되고요~   다음 파트는 스벨트킷입니다. Next.js 처럼 폴더명과 파일명을 통해서 라우팅을 쉽게 적용할 수 있습니다. 언제 봐도 이름으로 관습을 정하는 방식은, 참 통일성 있는 것 같아요. 페이지가 많을 수록 파일이 많아진다는 단점도 있지만, 직관적인 장점도 무시 못하는 것 같습니다. 서버 처리도 가능해서 아래처럼 MongoDB 와 연동해서 상품 데이터를 불러오는 실습도 진행합니다. MySQL, PostgreSQL, SQLite 같은 RDBMS(관계형 데이터베이스)를 사용할 수 있지만, 테이블 셋팅과 SQL문을 별도로 알아야 하는 번거로움이 있어 JavaScript 객체 내지는 JSON 와 표현 방법이 같은 NoSQL (여기선 MongoDB) 을 채택한 것 같습니다. 상품 도메인이다 보니, 한 상품에 관련된 값을 모아 표시해주는 MongoDB 로 실습하는 게 용도에 맞고, 더욱 직관적이라서 좋았습니다. 뿐만 아니라 온라인 쇼핑몰의 백엔드 스택으로 사용하는 Elasticsearch, Redis 도 소개해서 백엔드 미들웨어 지식을 모르는 독자도 흥미가 가게끔 편집한 점이 좋네요.  OAuth 인증도 어떻게 이뤄지는지 시퀀스 다이어그램으로 자세히 설명합니다. 외부 인증 서버에서 액세스 토큰을 발급받고 유저 정보를 조회해, 유저 정보와 함께 세션 처리를 하는 식인데요. 이 때 쿠키에 값을 저장하기 때문에, 쿠키와 관련한 설명도 알려줍니다. Secure, HttpOnly 등 쿠키 보안에 필요한 지식도 강조한 점이 인상 깊었어요.    교재 전체적으로 삽화도 많고 보충 설명도 많아서 학습하기는 굉장히 좋은 책이었습니다. 컬러가 있을 줄은 몰랐는데, 배경 보다는 문법 하이라이팅을 했으면 어땠을까 하는 편집적인 아쉬움도 있긴 해요. 아무래도 HTML 코드와 스벨트 문법, 자바스크립트 코드가 한 파일에 들어가 있다 보니, 설명과 코드의 가독성이 일치하지 않는 점이 좀 있었어요. 또는 코드 왼쪽에 라인 넘버가 있었으면 어땠을까 하네요. :) 전체적으로 스벨트 문법과 코어 개념이 압축적으로 들어갔고 실무에 필요한 요소를 우선순위를 높여서 편집했다고도 느껴서 빠르게 프로젝트를 실습해서 개념을 익히고 싶다하는 분에게 강추드립니다! 웹 지식이 어느정도 있는 분들은 빠르게 학습할 수 있을텐데, 아무런 지식이 없는 사람은 설명이 다소 빈약하다고 느낄 수도 있을 것 같아요. 이 용어가 정확히 어떤 건지는 구글링이나 ChatGPT 같은 AI 도구로 채워나가면 어떨까 제안드려봐요. :) |
|
웹 개발의 세계는 끊임없이 변화하고 있으며, 보다 단순하면서 성능까지 좋은 프레임워크를 원하고 있습니다. 『실전 스벨트&스벨트킷 입문』은 이러한 변화 속에서 개발자들의 사랑을 받고 있는 자바스크립트 UI 라이브러리인 스벨트(Svelte)와 프레임워크인 스벨트킷(SvelteKit)을 소개합니다.  책은 스벨트와 스벨트킷을 소개하기 앞서 간단한 튜토리얼(쇼핑몰 웹 사이트)로 파악한 뒤 스벨트 기초와 스벨트 심화, 스벨트킷 기초와 심화에 대한 내용을 학습합니다. 다음으로 Vercel에 배포와 DB로 MongoDB를 도입하고, 로그인 구현과 세션 관리 순서, 사용자 경험 개선을 위한 OGP 태그와 프리렌더링을 구현하는 순서로 구성됩니다.  자바스크립트 UI 라이브러리인 스벨트는 컴파일러를 사용해, 런타임 없이 실행 가능한 형태로 변환되어 로딩됩니다. 이를 통해 개발자의 실수를 방지할 수 있고, 리액트와는 달리 가상 DOM을 사용하지 않아 최소한의 필수 코드만 자바스크립트로 변환됩니다. 리액트, 뷰와 같은 웹 애플리케이션 프레임워크인 스벨트킷은 스벨트로 풀스택 개발을 할 수 있게 기능을 확장하여 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 라우팅 등을 포함하고 있습니다. 책은 스벨트와 스벨트킷의 장점을 실습을 통해 직접 경험하고 싶은 사람들에게 유용합니다. - 스벨트의 기초부터 고급 기능까지 체계적으로 학습할 수 있습니다. - 초보자부터 경험 있는 개발자까지 다양한 수준의 독자들이 스벨트를 효과적으로 배울 수 있습니다. - 실용적인 예제(쇼핑몰 웹 사이트)를 만들면서 스벨트를 활용한 웹 개발 실무에 대한 이해를 높일 수 있습니다. - 'Column'으로 스벨트 개발의 주의 사항과 노하우를 얻고, 심화 학습을 할 수 있습니다. 그 밖에도 Vite로 개발 환경 구축, 부록으로 개발에 필요한 등록 및 환경 설정을 사진과 함께 제공하여 유용했습니다.  이 책을 웹 개발을 쉽게 시작하고 싶은 개발자에게 추천하고 싶습니. 웹 개발에 필요한 배경지식은 책에서 소개해 도움이 많이 되었습니다. 다음으로는 풀스택 개발에 관심 있는 개발자에게 추천합니다. 스벨트로 프런트엔드, 스벨트킷으로 백엔드를 각 단계별로 추가하면서 스벨트를 활용한 풀스택 개발 경험을 할 수 있습니다. 책을 따라 읽다 보면, 스벨트와 스벨트킷을 이용하여 현대적인 웹 애플리케이션을 구축하는 방법을 배울 수 있도록 구성되어 있습니다. 스벨트를 처음 배우는 개발자부터 기존의 다른 프레임워크 경험이 있는 개발자까지 스벨트와 스벨트킷을 활용한 웹 개발을 쉽게 설명합니다. 책은 스벨트와 스벨트킷의 성능과 단순함, 높은 성장 곡선을 느낄 수 있게 효과적으로 설명하며, 스벨트를 처음 배우는 독자에게 추천할 만한 좋은 책입니다. 체계적인 구성과 쉬운 이해를 통해 스벨트의 기초를 탄탄하게 다질 수 있으며, 실무 중심 내용을 통해 실제 웹 개발에 활용할 수 있는 지식을 쌓을 수 있습니다. 하지만, 스벨트의 업데이트가 자주 되므로 되도록 최신 정보는 스벨트 공식 문서를 확인하는 것을 추천합니다. (2024년 04월 30일에 Svelte 5.0 버전 릴리스 준비 중)  저에게는 스벨트를 개발한 코어팀이 스벨트킷을 배포했다는 것이 마음에 들었습니다. 리액트-Next.js, 뷰-Nuxt와 달리 개발의 일관성을 가진 데다가, 컴파일을 내장한 자체적인 특성으로 인해 배워볼 만한 프레임워크라는 생각을 했습니다. 또한 스벨트의 제작자인 리치 해리스가 Vercel에 합류하여, Vercel이 밀어주는 오픈소스 프레임워크인 Next.js처럼 많은 사람들이 사용하고 점차 점유율이 높아질 것 같아 기대가 됩니다. 이 책을 통해 스벨트와 스벨트킷에 대한 웹 개발에 대한 이해도를 높일 수 있어 유익했던 시간이었습니다. 스벨트의 간결한 문법과 빠른 성능은 웹 개발의 요구사항을 충족시키는 데 효과적이라고 느꼈고, 스벨트킷의 서버 사이드 렌더링과 정적 사이트 생성 기능은 다양한 웹 애플리케이션의 개발에 도움이 됩니다. 이 책은 스벨트를 처음 접하는 개발자들에게는 좋은 입문서가 될 것이며, 이미 스벨트를 사용하고 있는 개발자들에게는 더 깊은 이해를 돕는 참고서가 될 것입니다. "해당 서평은 제이펍 출판사로부터 책을 제공받아 작성했습니다." #스벨트, #스벨트킷, #Svelte, #SvelteKit, #컴포넌트, #리액티비티, #스토어, #라우트, #라우팅, #MongoDB, #몽고db, #Vercel, #Auth0, #OGP, #프리렌더링, #제이펍, #서평, #리뷰 |
|
프론트엔드 개발자라면 한번 쯤은 관심을 가져봤을만한 스벨트에 대한 책입니다. 저는 angular.js와 angular 그리고 현재는 React를 주로 사용하고 있는데요. 리액트가 대세이긴 하지만, 꽤 오래 그 자리를 지켜왔기 때문에 왠지 다음으로는 어떤 프레임워크나 라이브러리가 각광을 받을지 고민해야 할 시점이 아닌가 싶어집니다. 일단, 앵귤라 계열은 러닝커브( 학습비용 )이 꽤 많이 들어갑니다. 전부다 가지고 있는 프레임워크이기 때문에 앵귤라를 공부하고 앵귤라 환경에서 하라는 것만 익숙해지면 해볼만한 프레임워크입니다. 문제는 그 학습비용이 다른 프레임워크에 비해서 어마어마하다는 것이죠. 리액트는 앵귤라에 비해서 상대적으로 학습비용은 적습니다. 하지만 초보 입문자 입장에서 보기에는 여전히 학습비용이 많이 든다는 것이죠. 그리고 리액트는 프레임워크라기 보다는 렌더링 라이브러리를 지향하기 때문에 리액트 만으로는 프로젝트를 하지못하고 부수적인 라이브러리들을 조합해서 사용해야 한다는 단점이 있습니다. 그 외에 뷰를 많이 쓰기도 하는데요. 가장 학습비용이 덜 들어간다고 하지만 그래도 만만치 않습니다. 특히 가장 많이 사용하고 있는 리액트의 최대 장점이라 일컫는 가상 DOM은 점점 그 장점이 시들해져가고 있고, 오히려 단점으로 부각되는 경향도 있는데요. 그런 문제점을 보완하고 새로운 기술 트렌드 요구를 부응할 수 있는 프레임워크가 필요한게 요즘 시점입니다. 그래서 많은 개발자들이 스벨트를 들춰보는 것 같네요.  따라서, 최근 1년간 npm 추의를 보면, 스벨트가 앵귤라도 앞서는 것처럼 보입니다. 이 책의 저자는 스벨트라는 주제에 대해서 상당히 실용적으로 접근하길 원했던 것 같습니다. 단순히 스벨트를 설명하기 보다는 스벨트를 활용해서 무언가 할 수 있는 상태를 만들어 주기 위해서 스벨트와 스벨트 킷을 모두 설명하고 있습니다. 스벨트 킷은 서버단 기능을 지원하는 스벨트 진영 프레임워크 이거든요. 이렇게 두가지를 설명하기 때문에 이 책을 모두 읽고 나면 스벨트로 무언가를 할 수 있게 될 것 같습니다. 게다가 번역 과정에서 이 책에 사용한 Auth0, MongoDB Atlas, 깃허브, Vercel 같은 솔루션들에 어떻게 가입하고 사용하는지도 따로 정리해 주시고 있습니다. 그러니 비교적 프런트엔드 분야를 모르는 사람이라고 하더라도 차근 차근 따라가보면서 해볼 수 있을 것 같군요. 제가 개인적으로 느꼈던 스벨트의 장점은 파일 단위로 컴포넌트를 만들어서 관리할 수 있다는 것과 표현문을 꽤 많이 생략할 수 있다는 것입니다. 책을 읽으면서 초반에는 좀 오버하는 정도가 아닌가 싶었는데, 읽다보니, 스벨트의 철학이 무엇인지 어렴풋이 이해할 수 있을 것 같더군요. 간결한 명령이 가장 아름답게 보여지는 Perl 같은 감흥이 느껴졌습니다. 또한, 스벨트 고급 기능으로 분류되어 있는 모션, 트랜지션, 애니메이션 같은 기능이나 프로그레시브 웹 애플리케이션에 대한 이야기 그리고 라우터 기능에 대해서 읽어보면서는 많은 생각을 하게 되었습니다. 현재 Next.js나 또 비슷한 레이어를 지원하는 프레임워크들이 지향하는 라우팅 방식이 스벨트에도 녹아들어가 있는 것을 보았는데요. 결국, 새로운 프레임워이나 라이브러리가 세상에 나오게 되는 이유는 기존 라이브러리들이 원숙해지는 과정에서 담아내지 못하는 새로운 기술들을 새로운 프레임워크, 라이브러리가 담아낼 수 있게 되기 때문이 아닐까 싶네요. 요즘은 AI기술이 눈부시게 발전하는 시기입니다. 그리고 그 영향을 가장 많이 받는 분야가 프런트엔드 분야라고 생각하는 데요. AI로 Web을 구현할 수 있고, 또는 AI 음성으로 사용자와 인터렉션하기 쉬워졌기 때문에 사용자의 음성을 포함해서 인터렉션하는 기능이 필요하다면 대번에 프런트엔드 분야가 대응해야 하기 때문입니다. 결과적으로 프런트엔드 개발자는 상황만 되면 다른 프레임워크나 라이브러리를 사용할 준비를 하고 있어야 하는 시기라고 할 수 있습니다. 그러니, 비록 사용하고 있지 않은 프레임워크라도 책으로라도 열심히 접하고 공부해서 준비하고 있는 게 맞을 것 같군요.  |
|
[제이펍 리뷰] 출판사 제이펍의 리뷰 이벤트 당첨으로 보게된 "쇼핑몰사이트 웹 애플리케이션"을 만들면서 배우는 스벨트 & 스벨트킷입니다. 사실, "스벨트"라는 프론트엔드 프레임워크를 처음 들어보았다. 주로 클라이언트나 모바일 등 C, C#, Java, Android 등 위주로 해보았고, 웹은 Python이나 PHP 등만 해보아서 사실 프론트는 React나 Node.js, next.js, vue.js등만 알고있는 상태였다. 그래서 스벨트에 대해 호기심이 생겨서 이 책을 재밌게 볼 수 있었다. 스벨트라는 단어의 뜻이 날씬한, 유연한, 우아한이라고 해서 이름과 비슷하게 유연한 프레임워크를 지향하는게 아닐까라는 생각을 해보았습니다. 먼저, 책은 쇼핑몰사이트를 만드는 방법을 하나씩 소개하면서 스벨트와 스벨트킷에 대해서 배워나가는 책입니다. 스벨트는 자바스크립트 UI 라이브러리이고 스벨트킷은 스벨트를 베이스로 한 웹 프레임워크라고 생각하면 됩니다. 스벨트는 스벨트 사이트에서 개발도구 설정없이 스벨트를 해볼 수 있습니다. https://svelte.dev/repl/hello-world?version=4.2.16 Hello world ? REPL ? Svelte svelte.dev 개발도구는 Visual Studio Code의 플러그인을 통해서 개발할 수 있습니다. 다만, 책에서는 개발환경 설정은 간단하게 소개해줄 뿐이라 따로 찾아보긴 해야합니다. 그리고 책은 타입스크립트가 아닌 자바스크립트를 기본으로 해서 설명해주고 있어서 저처럼 타입스크립트를 접해보지 못하고 기존적인 자바스크립트만 안다면, 좀 더 쉽게 접할 수 있습니다. 그렇지만, 타입스크립트가 필요한 부분에 대해서는 별도로 타입스크립트로 설명해주고 있습니다. 초반에는 스벨트의 기본 기능, 컴포넌트 작성 방법, 리액티비티와 고급 템플릿 문법, 애니메이션 등의 고급 기능을 설명해주고 있다. 스벨트는 가상DOM을 사용하지 않는 다고 되어 있다. 사실 가상 DOM과 실제 DOM의 차이는 잘 모르겠다. 책에서 간단하게 설명해주지만, 조금 아쉬운 것 같다. 상태 변경에 따라 DOM이 업데이트 되는 구조인데, 이를 스벨트에서 리액티비티라고 하는데, 이 부분이 스벨트에서 중요한 요소인 것 같다는 생각이 든다. 또한, 여러 컴포넌트의 상태를 공유하기 위해 스토어라는 구조를 제공하는 데 이점도 조금 신기한 듯 싶다. 스벨트도 vercel를 통해서 배포가 가능하다는 것도 이점인거 같다. vercel은 next.js만 되는 줄 알았는데 스벨트로도 가능하다는 점이 토이프로젝트로 시도할 때 좋은 점인 거 같습니다. 아쉬운 점은 책이 쇼핑몰 사이트를 만들면서 배우는 책인데, 이와 관련된 설명이나 부분이 짧은 건 아쉬웠습니다. 하지만, 실제로 배포하고 하는 부분과 로그인 부분 등 다른 책에서는 주로 다루지 않은 부분도 다루고 있어서 좋았습니다. 스벨트와 스벨트킷이라는 조금 생소하지만 입문하기에 좋은 책이라고 생각합니다. #스벨트 #스벨트킷 #프론트엔드 #웹프레임워크 #제이펍 |
|
book reviews sponsored by publishers (Lang : KR) 제이펍 출판사 IT 전문서 리뷰어 3기 선발이 되어 책을 받았다. 스벨트의 존재 목적이자 가장 큰 장점은 단순함이다. 그래서인지, 전 세계 자바스크립트 개발자를 대상으로 하는 라이브러리 && 프레임워크 만족도 조사 ＜State of JS＞에서 '개발자가 좋아하는 UI 라이브러리'로 2020년부터 2022년까지 3년 연속 TOP 2에 선정되었다. 제이펍의 오피셜 난이도는 '매우 쉬움' 이지만, 필자의 생각은 좀 다르다. 책을 읽기전에는 겉 표지만 살펴보고 필자도 당연하게 '그렇겠지'라고 생각을 했지만, 정독을 해보니 기존에 '리액트' 같은 프레임워크를 이미 사용해본 실무자나 몇년 실습자 기준에서는 입문이 맞다. 하지만, 아무것도 모르는 쌩 입문자가 하기에는 아주 불친절하다. 일단 책을 읽으려면 자바스크립트를 알아야 하는데, 이 책에서는 '자바스크립트 입문'이 아니기에 일절 가르쳐 주지 않는다. 그러니 애초에 자바스크립트를 기존에 알고 있다는 전제조건 하에 시작하는 책이라는 것이다. 대충 VSC 에디터에서 프로그래밍 몇번 해보고, 이제는 본격적으로 포트폴리오를 위해서는 당연히 프레임워크를 선택을 해야한다. 그럴 때! 그런 사람들에게 정말이지 딱 어울린다고 생각한다. 아무것도 모르는데, 그저 ＜입문＞ 이라는 단어 적혀있다고, 무작정 구매를 해버리면, 매우 난감한 상황이 된다. 그리고, 애초에 스벨트 프레임워크는 다른 프레임워크에 비해서 매우 쉬운 축에 속하기 때문에 다른 프레임워크를 해봤으면 훨씬 학습하기 쉬워서 오피셜 난이도가 이렇게 설정되어 있는게 아닐까 싶다. 저자의 '시작하며' 챕터에서 보면 "이 책은 자바스크립트와 HTML5에 대해 어느 정도의 이해도를 갖춘 상태에서 최신 스타일의 프로젝트와 웹 애플리케이션 개발 방법을 배우고 싶은 독자를 대상으로 한다." 라고 적혀 있다. 2024 프론트엔드 프레임워크 순위 TOP 10 기준, 리액트가 1위 이며, 스벨트가 4위로 상당히 많이 올라왔다. 아직까지는 국내시장 점유율이 리액트가 많지만, 추세가 서서히 스벨트도 실무에도 도입이 되는 날이 오지 않을까 기대가 된다. 웹 개발을 어느정도 해봤고, 이젠 좀 프로젝트를 제대로 각잡고 해보고 싶지만 비교적 난이도가 쉬운 프레임워크를 원한다면 최신판인 ＜실전 스벨트 & 스벨트킷 입문＞ 서적을 구매하길 추천한다. #제이펍 #제이펍전문서 #제이펍서평단 #Jpub #jpub #출판사 #제이펍출판사 #서평단 #hackers #hacker #hacking #anonymous #cybersecurity #kalilinux #programming #hack #hacked #technology #cybercrime #linux #ethicalhacking #coding #programmer #computerscience #malware #hacks #bhfyp #redteam #tryhackme #hackthebox
|