시작하며,
나모 웹 에디터로 홈페이지를 만들며 웹 개발에 입문한 지 어느덧 이십여 년이 흘렀다.
이후 동적 사이트 구축을 위한 CGI, Perl, PHP, Python 등을 배우고 실무에 적용하며 2000년 초반부터 2012년까지 웹 서비스 개발에 전념했었다. 이후 신사업팀 발령으로 개발에서 손을 떼며 그렇게 십여 년의 시간이 흘렀다.
한참 개발 생활을 할 때만 해도 임베디드 시스템을 제외하곤 무조건 APM (Apache + PHP + MySQL)의 구성으로 서비스 제작을 했었다.
강산이 변한 지금 자바스크립트의 발전은 상상도 못했고, 그런 자바스크립트를 활용할 수 있는 수많은 프레임워크를 보며 놀라지 않을 수 없었다.
React로 개발 중인 웹서비스에 접목시키고자 알아가던 중에 이 책의 출간 소식을 우연히 접하게 되었다.
이름조차 생소하여 영어 스펠링은 자주 틀리기도 하지만 검색을 통해 살펴보며 Svelte는 마침 내가 원하던 쉽고 간결한 구조와 문법은 빠른 결과물을 생산할 수 있을 것만 같았다.
이 글은 제이펍에서 출간한 ‘실전 스벨트 & 스벨트킷 입문’에 대한 리뷰이자 스벨트를 이해하는 과정을 담고 있다.
스벨트와 스벨트킷?
근래 웹 개발과 서비스를 다시 시작하며 페이지 전환을 부드럽게 해주는 싱글 페이지 어플리케이션 사이트를 만들어 보고자 리액트를 들여다보기 시작했다.
알아가며 여러 편리성과 장점을 배우게 되지만, 자바스크립트 문법만 아는 나로서는 모든 것이 생소함 그 자체였다.
그러던 중 이번에 제이펍 출판사에서 새로 출간된 ‘실전 스벨트 & 스벨트킷 입문’이라는 책의 출간 소식을 보게 되며 관련 정보를 찾아보았다.
스벨트 역시 Node.js 기반으로 구동되며, 리액트와의 큰 차이점으로 코드가 전반적으로 간결하며 별도의 import가 필요 없다는 것이 큰 관심을 불러일으켰다.
딱 내가 원하던 기능이다.
스벨트는 사용자 인터페이스를 만들기 위한 자바스크립트 프레임워크의 하나이며, 스벨트킷은 스벨트의 기능을 확장하여 서버 사이드 렌더링, 정적 사이트 생성, API 라우팅 등을 포함하는 완전한 웹 애플리케이션 프레임워크이다.
이와함끼 Next.js라는 리액트 기반의 프레임워크도, 서버 사이드 렌더링, 정적 사이트 생성, 그리고 API 라우트 등의 기능을 내장하고 있어 이 또한 관심사였다.
그런데 결정적으로 코드의 간결함이 스벨트의 세계로 발을 내딛게 만들었다.
- 스벨트로 카운터 애플리케이션 구현 하기
<script>
let count = 0; // 카운터의 상태를 선언
function handleClick() {
count += 1; // 버튼 클릭 시 카운트 증가
}
</script>
<main>
<h1>Count: {count}</h1>
<button on:click={handleClick}>Increment</button>
</main>
<style>
main {
text-align: center;
margin-top: 50px;
}
</style>- 리액트로 카운터 애플리케이션 구현하기
import React, { useState } from 'react';
function App() {
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1);
}
return (
<div style={{ textAlign: 'center', marginTop: '50px' }}>
<h1>Count: {count}</h1>
<button onClick={handleClick}>Increment</button>
</div>
);
}
export default App;- Next.js로 카운터 애플리케이션 구현하기
import React, { useState } from 'react';
export default function Home() {
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1);
}
return (
<div style={{ textAlign: 'center', marginTop: '50px' }}>
<h1>Count: {count}</h1>
<button onClick={handleClick}>Increment</button>
</div>
);
}위 세 코드를 비교해보면서 스벨트가 가장 편안하게 눈에 들어왔다.
참고로 스택 오버플로우 개발자 설문조사에서 2021년에는 가장 사랑받는 프레임워크로 선정되었고, 2022년에는 4% 더 증가하여 75.28%의 개발자들이 선호하는 프레임워크 중 하나가 되었다.
스벨트의 가장 큰 장점으로는 코드 양을 줄이고, 빠른 성능을 제공하며, 적은 러닝 커브로 인해 빠르게 배울 수 있다는 점에서 나 또한 스벨트에 입문하게 되었다.
실전 스벨트 & 스벨트킷 입문
1. 가뭄에 단비 같은 책
React나 Next.js 그리고 스벨트를 포함하여 관련 서적이 그리 많은 편이 아니다.
AI관련 서적들은 꽤 많이 볼 수 있지만 특정 분야의 기술서는 가뭄에 콩 나듯 출간하니 내 관심분야의 책의 출간은 모니터링 대상이 된다.
그러던 중 얼마 전 ‘실전 스벨트 & 스벨트 킷 입문’이 출간되었다.
YES24 스벨트 관련 도서 검색 목록
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
#도서리뷰 #스벨트 #스벨트킷 #제이펍