[서평] 리액트의 대항마 - 실전 스벨트 & 스벨트킷 입문

이 서평은 제이펍의 <IT 전문서 리뷰어 3기> 활동의 일환으로 출판사로부터 책을 제공받아 작성되었습니다.

 

 

 

 

1장 스벨트 시작하기

1장에서는 스벨트의 기본 개념과 적용 방법을 소개하면서 시작한다. 스벨트가 탄생한 배경과 주요 특징을 가볍게 다루는데 스벨트를 만든 개발자가 접근한 방식을 이해하는데 도움이 될 것이다.

 

스벨트의 주요 특징 중 하나는 전통적인 프론트엔드 프레임워크(또는 라이브러리)와 다르게 가상 DOM을 사용하지 않는다.

 

가상 DOM은 실제 DOM에 적용되기 전에 변경 사항을 먼저 처리하고 필요한 최소한의 변경만 실제 DOM으로 푸시하는 방식으로 작동한다.

 

리액트 같은 경우 컴포넌트의 코드를 유저의 브라우저에 로드되어 실행될 때 처음으로 평가한다.

 

반면 스벨트는 컴파일 시점에 코드 최적화를 수행한다. 사용자에게 로드되기 훨씬 전인 빌드 과정에서 컴포넌트 코드가 컴파일 되므로 이 때 DOM 구조의 변화를 파악해 업데이트한다.

 

스벨트의 특징을 실제 적용해보는 튜토리얼은 온라인 쇼핑 페이지 제작으로 구성된다.

 

이 튜토리얼은 프로젝트 준비단계 부터 시작해 HTML과 CSS를 활용한 기본적인 화면 구성 요소의 생성, 변수와 이벤트 핸들러를 사용한 동적 기능 구현 등을 사용한다.

 

2장 이후로 점점 기능을 늘려가면서 개발하는 과정을 함께할 수 있다.

 

 

 

2장 스벨트 기초

2장에서는 스벨트 환경 구축 및 컴포넌트 기반 개발에 대해 다룬다.

 

환경 구축에서는 스벨트 공식 REPL을 사용해 간단히 코드를 실행해볼 수 있는 방법과 Vite를 사용해 개발 환경을 구축하는 과정을 설명한다.

 

컴포넌트는 .svelte 확장자의 파일로 생성된다. 그 안에서 HTML, CSS, Javascript (또는 Typescript) 코드들이 어떻게 관리되는지도 보여준다.

 

템플릿 기초 문법을 통해 개발자가 어떻게 UI를 정의내리고 스타일을 컴포넌트에 어떻게 적용하는지도 다룬다.

 

 

컴포넌트 내에서 데이터를 조작하는 다양한 방법으로 속성, 슬롯, 이벤트가 소개된다.

 

슬롯을 사용하면 부모 컴포넌트에서 자식 컴포넌트로 특정 내용을 삽입할 수 있다.

 

이벤트를 통해 사용자의 동작에 반응하고 컴포넌트의 라이프 사이클을 관리한다. 특히 CustomEvent라고 이벤트에 자체 데이터를 포함할 수 있는 스벨트만의 독특한 컴포넌트 또한 제공된다.

 

라이프 사이클 관리는 컴포넌트가 생성, 업데이트, 파괴되는 시점에 필요한 작업을 수행할 수 있도록 한다. 라이프 사이클 함수인 onMount, onDestory, beforeUpdate, afterUpdate, tick을 배울 수 있다.

 

 

 

3장 스벨트의 리액티비티

3장에서는 스벨트의 기능 중 하나인 리액티비티에 대해 다룬다.

 

스벨트에서 데이터의 변화가 어떻게 감지되고 UI가 어떻게 자동으로 업데이트 되는지 알 수 있다.

 

컴포넌트의 리액티비티는 변수 대입, $: 접두사를 사용한 리액티브 선언, 배열과 객체의 업데이트를 통한 상태 관리 방법이 있다.

 

입력 요소와 미디어 요소에 대한 바인딩으로 입력과 애플리케이션 상태 사이의 동적인 상호 작용을 어떻게 처리할 수 있는지를 보여준다.

 

컴포넌트 간의 데이터 바인딩과 this를 사용한 컨텍스트 바인딩도 다루어 DOM 요소 자체를 변수에 바인딩할 수 있는 기능 또한 소개하고 있다.

 

리액티비티의 또 다른 중요한 측면은 스토어를 통한 상태 관리다. writable, readable, derived, custom 등 다양한 종류의 스토어를 통해 애플리케이션 전반에 걸친 상태를 효과적으로 관리할 수 있다.

 

writable, readable 스토어는 각각 변경 가능한 상태, 읽기 전용 상태를 의미한다.

 

derived 스토어는 기존 스토어의 상태에 의존하는 새로운 상태를 생성할 수 있다.

 

custom 스토어는 특별한 로직이 필요한 상태 관리를 위해 사용자가 직접 정의할 수 있으며, 이 모든 스토어들은 $를 사용하여 자동으로 구독하고 업데이트할 수 있다.

 

 

4장 스벨트의 고급 기능

4장에서는 스벨트의 고급 기능 중 동적인 웹 애플리케이션을 구현할 수 있는 방법에 대해 소개하고 있다.

 

고급 템플릿 문법으로 시작해 키를 포함하는 {#each} 블록을 사용한 리스트 아이템 관리, {#key} 블록을 통한 고유한 키 할당, 다양한 {@...} 태그와 〈svelte:...〉 태그를 통해 스벨트의 내장 기능을 활용하는 방법이 작성되어 있다.

 

모듈 콘텍스트는 컴포넌트 인스턴스 간에 공유하고 싶은 상태가 존재하거나 컴포넌트 이외에 모듈에서 내보내기 하고 싶은 것이 있을 때 사용한다. 사용할 기회는 많지 않지만 위 경우에 생각해볼만한 방법인 것 같다.

 

스벨트는 DOM 요소의 움직임을 제어하기 위해 모션, 트랜지션, 애니메이션을 제공한다. 종류가 세 가지가 되는 이유는 각 움직임의 종류가 다르기 때문이다.

 

모션은 요소의 움직임을 제어하며, 트랜지션은 상태 변화 시 시각적 전환을 관리하고, 애니메이션은 복잡한 시각 효과를 생성하는 데 사용된다.

 

콘텍스트 API는 하나의 부모 컴포넌트에서 자식 컴포넌트로 데이터를 공유할 수 있는 구조다.

 

스토어와의 비교를 통해 개발자가 적합한 상태 관리 전략을 선택할 수 있다.

 

콘텍스트는 하나의 컴포넌트와 그 자식 컴포넌트에 한정되며 인스턴스마다 각각의 값을 유지할 수 있다. 부모 자식 관계가 정해져 데이터를 공유하려면 콘텍스트가 적합하다.

 

마지막으로 액션은 DOM 요소에 대한 스벨트 컴포넌트의 라이프사이클에 개입해 요소의 크기 변경 감지와 같은 기능을 구현할 수 있게 한다.

 

 

5장 스벨트킷으로 다중 페이지 애플리케이션 개발하기

5장에서는 스벨트킷을 사용해 더 많은 페이지가 포함된 애플리케이션 개발에 대한 방법을 소개한다.

 

스벨트킷은 스벨트의 공식 프레임워크로서 풀스택 기능을 제공해 서버 사이드 렌더링, 정적 사이트 생성, 라우팅 등을 지원한다.

 

프로젝트 생성부터 시작해 스벨트킷 프로젝트의 파일 구조에 대해 설명한다.

 

장의 마지막에서는 지금까지 기능을 사용해 스벨트로 쇼핑몰 사이트를 구현한다. 스벨트킷 프로젝트를 생성하고 상품 페이지에 대응하는 라우트를 생성하는 방법부터 시작해 상품 데이터와 장바구니 데이터를 관리하는 방법을 배운다.

 

폼액션을 사용하여 장바구니에 상품을 추가하고, 사용자에게 ‘추천 상품’을 표시하는 방법까지 스벨트킷을 다뤄보면서 프로젝트를 통해 복잡한 로직과 데이터 관리가 필요한 실제와 비슷한 웹 애플리케이션을 개발할 수 있다.

 

 

6장 스벨트킷 레퍼런스

6장에서는 스벨트킷을 통한 애플리케이션 개발에 유용한 레퍼런스와 그 기능들을 설명한다.

 

페이지 라우트, 서버 라우트, 폼액션, 라우팅, 레이아웃, 실행 모델 등을 포함한 스벨트킷의 다양한 개념들을 소개한다.

 

폼액션은 사용자 입력과 서버 사이드 로직의 상호작용을 간소화하는 기능으로, 프로그레시브 인핸스먼트를 통해 사용자 경험을 향상시키는 방법을 제공한다.

 

서버 라우트는 서버에서 직접 라우트를 관리하는 방식으로 서버에서 요청을 효과적으로 처리할 수 있다.

 

훅과 헬퍼 함수는 스벨트킷에서 애플리케이션을 효율적으로 확장하는데 중요한 역할을 한다.

 

훅을 사용해 애플리케이션의 수명주기 이벤트를 처리하고, 헬퍼 함수를 통해 실행 환경 정보, 폼 처리, 페이지 이동, 경로 관리, 스토어 접근 등을 손쉽게 할 수 있다.

 

빌드와 배포에서는 다양한 호스팅 서비스와의 통합을 위한 어댑터 사용법을 설명한다.

 

Node 서버로의 배포, 정적 사이트 생성, SPA 모드 구성 등 다양한 배포 시나리오에 대응할 수 있다.

 

 

7장 MongoDB와 Vercel을 사용한 운영 환경 구축

7장에서는 MongoDB와 Vercel을 활용해 스벨트킷 애플리케이션을 운영 환경에 배포하는 과정을 설명한다.

 

스벨트킷 애플리케이션의 개발 환경 설정에서부터 시작해 샘플 애플리케이션의 개발, 운영 환경 구축, 빌드 및 배포 과정을 다룬다.

 

MongoDB 부분에서는 MongoDB를 사용한 데이터베이스 구축과 관리 방법을 설명한다.

 

데이터베이스의 역할을 정의하고 MongoDB Atlas를 통해 클라우드 기반 데이터베이스를 생성한다.

 

mongodb 패키지를 도입해 애플리케이션과 데이터베이스 간의 연결을 설정해 장바구니와 상품 데이터 관리를 MongoDB를 사용하여 구현해본다.

 

Vercel을 통한 배포에서는 스벨트킷 애플리케이션을 Vercel에 배포하는 과정을 설명한다.

 

GitHub 설정부터 Vercel에서의 프로젝트 설정, MongoDB Atlas와의 통합, 환경 변수의 적용 방법으로 개발에서 배포에 이르는 전체 파이프라인을 이해할 수 있다.

 

클라우드 서비스를 활용해 애플리케이션을 구축하면서 스케일링, 데이터 관리, 배포를 비교적 간단하게 하면서 복잡한 인프라 관리 없이도 효율적으로 운영할 수 있도록 도와준다.

 

 

 

8장 Auto0을 통한 패스워드 없는 로그인 구현과 세션 관리

8장에서는 Auth0를 사용하여 패스워드 없는 로그인 시스템을 구현하고 세션 관리를 통해 사용자 인증을 처리하는 방법을 설명한다.

 

Auth0의 기본 개념과 계정 설정, 로그인 로직의 구현, 세션 관리, 유저별 데이터 처리 방법이 포함된다.

 

Auth0 준비 섹션은 패스워드 없는 인증 시스템이 무엇인지 설명하고 계정을 생성해 초기 설정하는 방법을 다룬다.

 

로그인 구현 부분에서는 Auth0를 활용한 로그인 처리 절차를 소개한다.

 

로그인 페이지 생성, Auth0 API 호출, 콜백 URL 구현, 세션 정보 저장, 로그인 기능의 작동 확인이 포함된다.

 

모든 단계를 거쳐 시스템에 안전하게 로그인하고 로그인 된 상태가 유지되도록 관리할 수 있다.

 

 

9장 유저 경험 개선 - OGP 태그와 프리렌더링

9장에서는 사용자 경험을 개선하는 기술로 OGP 태그와 프리렌더링에 대해 다룬다.

 

소셜 미디어 플랫폼에서 웹사이트 콘텐츠를 공유했을 때 미리보기를 제공하는 OGP(Open Graph Protocol) 태그의 구현 방법을 설명한다.

 

OGP 태그를 상품 페이지에 추가하는 과정을 포함해 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)을 비활성화하는 방법도 소개한다.

 

동적인 자바스크립트 애플리케이션에서 OGP 태그가 올바르게 작동하도록 하기 위해 비활성화가 필요한다고 소개한다.

 

 

마지막으로 Vercel을 통한 배포 과정과 소셜 미디어 카드의 미리보기가 제대로 표시되는지 확인하는 단계를 포함한다.

 

웹 페이지의 로딩 시간을 단축하고 검색 엔진 최적화(SEO)를 향상시키기 위해 프리렌더링을 다루게 된다.

 

상품 페이지와 장바구니 페이지의 프리렌더링을 실시하면서 필요한 페이지 준비와 클라이언트에서의 데이터 처리에 대해 배운다.

 

프리렌더링을 통해 브라우저가 서버에서 렌더링된 페이지를 빠르게 로드할 수 있도록 해 '장바구니 담기' 버튼과 같은 동적 기능의 작동을 개선해보는 실습을 가진다.

 

 

총평

이 책은 초반부에 스벨트의 기본 개념에서 출발해 템플릿의 고급 문법, 복잡한 상태 관리, 그리고 모듈 콘텍스트 관리 방법까지 스벨트의 전체적인 사용 방법에 대해 설명해준다.

 

기본적으로 알고 있어야 할 내용들로 처음 시작하는 초보자도 쉽게 이해할 수 있는 코드 예제들을 통해서 중요한 개념들을 쉽게 이해할 수 있었다.

 

책의 후반부에서는 스벨트킷을 활용한 복잡한 애플리케이션 개발로 넘어가면서 라우팅 시스템, 서버사이드 렌더링(SSR), 정적 사이트 생성(SSG)과 같은 기술을 소개한다.

 

스벨트킷을 통해 스벨트가 처리하지 못하는 다양한 작업들을 수행해보면서 실제 프로젝트에서 사용할 수 있는 웹 애플리케이션을 단계별로 구축하는 방법을 배울 수 있다.

 

OGP 태그와 프리렌더링 같은 성능 최적화 기법을 통해 검색 엔진 최적화와 소셜 미디어 통합 측면에서 애플리케이션의 가시성을 높여 단순히 만드는 것에 그치지 않고 더 많은 사용자들이 접할 수 있는 기반을 마련할 수 있도록 꼼꼼히 작성되어 있음을 확인할 수 있었다.