2023년 6월, 스벨트는 버전 4로 지정된 최신 안정 버전을 공개했습니다. 이 업데이트는 주로 Svelte 3의 점진적인 개선 사항으로, Svelte 5로 출시될 후속 세대의 Svelte를 위한 토대를 마련하는 것을 목표로 합니다.
스벨트 4는 웹사이트 레이아웃 개선, 로컬 상태 변경을 표준으로 설정, 웹 컴포넌트 지원 강화, 문서용 TypeScript에서 JSDoc으로의 전환 등 스벨트 환경에 몇 가지 향상된 기능을 도입했습니다.
스벨트 사이트 재설계
스벨트 4는 공식 스벨트 웹사이트 의 개선과 함께 출시되었습니다. 사이트의 새로운 모습은 환상적이며, 개선된 타입스크립트 문서, 다크 모드 옵션, 전반적으로 모든 기기에서 개선된 사용자 경험을 제공합니다.
Svelte 웹사이트는 현재 개선된 REPL(읽기-값-출력 루프)을 통해 사용자가 브라우저 내에서 Svelte 코드를 테스트하고 수정할 수 있도록 지원하여 향상된 개발 경험을 제공합니다.
현재 Svelte 튜토리얼이 업데이트되어 사용자가 새로 설계된 Svelte 학습 환경으로 안내하도록 변경되었지만, Safari 16.3 이상 버전을 사용하는 사용자는 이전 튜토리얼에 계속 액세스할 수 있습니다.
로컬 전환이 기본값입니다.
Svelte 전환을 사용하면 로딩 시간이 길어질 수 있으며, 이는 CSS 전환이 제공하는 보다 원활한 환경과 비교할 때 불만의 원인이 될 수 있습니다.
표준 관행은 상위 블록이 제거될 때 전환이 발생하는 것입니다. 그러나 이 기본 동작은 |local 수정자를 사용하여 재정의할 수 있습니다. 대상 컴포넌트의 블록에 적용하면 해당 블록을 포함하는 컴포넌트가 소멸될 때만 트랜지션이 실행되도록 트리거됩니다. 스벨트 4에서는 모든 트랜지션에 대해 이 |local 수정자가 미리 구성됩니다.
다음 스니펫의 div 요소에 슬라이드 전환이 로컬로 추가되었습니다.
<div transition:slide|local> {item}</div>
웹 컴포넌트 지원 개선
스벨트는 재활용과 유지관리의 중요성을 지속적으로 강조해왔으며, 이것이 바로 웹 컴포넌트를 지속적으로 지지하는 이유입니다. 웹 컴포넌트를 사용하면 스타일과 기능을 모두 주입할 수 있는 사용자 정의 가능한 HTML 요소를 만들 수 있습니다.
Svelte 4의 최신 버전은 오류를 근절하고 불규칙성을 제거하여 웹 요소 생성 방식을 혁신적으로 개선했습니다.
컴포넌트 속성을 내보내면 동일한 애플리케이션 또는 시스템 내의 다른 컴포넌트에서 사용할 수 있습니다.
지역 변수에 값을 할당하는 행위는 컴포넌트의 상태를 변경한 후 렌더링을 새로 고치도록 유도하는 데 필요합니다.
선언을 시작할 때 달러 기호($)를 사용하는 것은 선언을 반응형 문으로 표시하는 역할을 합니다. 이러한 문은 종속 값의 변경에 대한 응답으로 스크립트 코드 실행 후 및 컴포넌트 마크업 렌더링 전에 실행됩니다.
스토어 객체 앞에 달러 기호($)를 사용하면 스토어 내의 특정 값에 대한 반응형 액세스를 용이하게 할 수 있습니다.
스크립트 태그의 컨텍스트 속성을 “모듈”로 설정하면 스크립트가 구성 요소의 각 개별 인스턴스가 아니라 모듈의 초기 평가 시 한 번만 실행됩니다.
TypeScript에서 JSDoc으로 이동
JSDOc는 타이포그래피 주석과 비고를 통합하여 JavaScript 코드에서 문서를 생성하기 위해 설계된 애플리케이션입니다.
이 마이그레이션의 목적은 Svelte 개발자가 JSDoc을 활용하여 코드를 올바르게 문서화하는 관행을 채택하도록 장려하는 것입니다. 잘 문서화된 JavaScript 코드베이스는 유형 검사의 필요성을 크게 줄여줍니다.
타입스크립트는 다른 언어에 비해 많은 장점으로 인해 최근 몇 년 동안 개발자들 사이에서 엄청난 인기를 얻고 있는 프로그래밍 언어입니다. 따라서 이 언어에 익숙하지 않고 익숙해지기를 원한다면 TypeScript의 기능과 이점을 살펴보는 것이 여정의 훌륭한 출발점이 될 것입니다.
스벨트 4로 마이그레이션하기
스벨트 4의 최신 버전은 향상된 효율성과 간소화된 개발 프로세스를 자랑하며, 강력한 웹 애플리케이션을 구축하는 데 이상적인 선택이 될 것입니다. 또한 이 업데이트는 JSDoc을 채택하여 보다 포괄적인 코드 문서화를 촉진할 것입니다.
개발자들 사이에서 Svelte의 인기는 꾸준히 증가하고 있으며, 이 프레임워크에 대해 잘 알고 있는 사람들은 그 기능에 대해 감탄을 아끼지 않고 있습니다.