웹 애플리케이션 개발을 위한 자바스크립트 프레임워크인 스텔스 4는 최신 버전에서 상당한 진전을 이루었습니다. 이번 업데이트에서는 전반적인 성능 향상과 개발자 경험 간소화에 중점을 둔 몇 가지 흥미로운 발전이 이루어졌습니다.
더 작고 독립적인
가장 눈에 띄는 개선 사항은 전체 크기가 크게 줄어든 것입니다. 10.6MB로 부피가 컸던 이전 버전과 달리, Svelte는 2.8MB로 간소화되어 75%나 감소했습니다.
Svelte JavaScript 프레임워크와 관련된 개발자들은 필요한 종속성 수를 61개에서 로 효율적으로 줄였습니다. 이러한 다운사이징은 REPL(읽기-값-출력 루프) 성능 가속화, 웹사이트 상호 작용 개선, npm 설치 및 선호하는 패키지 관리자 실행이 눈에 띄게 빨라지는 등 여러 가지 장점을 가져다줍니다.
스벨트는 패키지 크기뿐만 아니라 생성된 코드도 수화용으로 최적화했습니다. 예를 들어, SvelteKit 웹사이트의 코드가 13% 감소하여 126.3kB에서 110.2kB로 줄었습니다.
향상된 개발자 경험
기본적으로 Svelte는 전환을 로컬로 구성하므로 자체 범위를 벗어난 요소에는 영향을 미치지 않습니다. 이렇게 하면 여러 컴포넌트가 한 번에 로드될 때 발생할 수 있는 서로 다른 전환 애니메이션 간의 잠재적인 충돌을 방지하여 보다 원활한 사용자 경험을 제공할 수 있습니다.
웹 컴포넌트
새로 도입된
<svelte:options tag="my-component" />
그러나 이 방법은 DOM 내에서 업데이트된 속성 값의 표시를 조절하거나 섀도 DOM을 비활성화하는 등 간단한 애플리케이션에서 단순성과 접근성을 입증했지만, 더 복잡한 상황에 직면하면 그 기능이 제한됩니다.
svelte:options 인터페이스 내에서 customElement 속성을 활용하면 웹 컴포넌트를 만들고 구성하는 프로세스가 크게 개선되어 사용자 지정 가능한 옵션 배열을 구현할 수 있습니다.
<svelte:options
customElement={{
tag: 'custom-element',
shadow: 'none',
props: {
name: {
<!-- Reflects the updated value back to the DOM -->
reflect: true,
<!-- Reflects the value as a number -->
type: 'Number',
<!-- Name of the attribute -->
attribute: 'element-index'
}
}
}}
/>
<script>
export let elementIndex;
</script>
더 엄격한 유형
createEventDispatcher의 최신 반복은 제공된 인수를 특정 유형 및 수량과 관련하여 꼼꼼하게 조사하고 불일치가 감지되면 해당 오류를 발생시키는 새로운 기능을 구현했습니다.
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher<{
optional: number | null;
required: string;
noArgument: never;
}>();
// Svelte version 3
dispatch('optional');
// Detail argument still omitted
dispatch('required');
// Detail argument still provided
dispatch('noArgument', 'surprise');
// Svelte version 4 using TypeScript strict mode
dispatch('optional');
// Error, missing argument
dispatch('required');
// Error, cannot pass an argument
dispatch('noArgument', 'surprise');
액션에 지정된 일반 유형이 없는 경우 액션의 반환 값에 대한 기본 매개변수 유형이 “never”로 설정되어 유추할 수 없음을 나타냅니다.
const untyped: Action = (node, params) => {
// Now an error as `params` is expected not to exist
}
const typed: Action<HTMLElement, string> = (node, params) => {
// `params` is of type string
}
반환 값이 동기식 연산으로 실행되도록 `onMount` 함수의 활용이 수정되었습니다. 이 수정은 동기식 함수에만 해당되며, 컴포넌트를 소멸하는 과정에서 콜백 함수가 실행될 때 발생할 수 있는 잠재적인 문제를 방지하기 위해 필요합니다.
// `cleanup()` will not be called
onMount(async () => {
const bar = await foo();
return cleanup();
});
// `cleanup()` will be called
onMount(() => {
foo().then(bar => /* ... */ );
return cleanup();
});
간편한 마이그레이션
스벨트 3에서 스벨트 4로 마이그레이션하는 과정은 개발팀에서 제공하는 업그레이드된 마이그레이션 툴을 통해 용이하게 진행할 수 있습니다. 최신 버전으로 진행하려면 다음 명령을 실행하기만 하면 됩니다:
npx svelte-migrate@latest svelte-4
이를 위해서는 최소 16 이상의 NodeJS 버전이 필요합니다.
필요한 SvelteKit 버전은 1.20.4 이상입니다.
TypeScript는 버전 5 이상이 필요한 프로그래밍 언어입니다.
스벨트 5에서 기대할 수 있는 기능
현재 스벨트의 임박한 기능에 관한 데이터는 부족합니다. 그럼에도 불구하고 Svelte와 ESLint가 결합되어 있기 때문에 Svelte 패키지의 크기도 이 연관성의 영향을 받습니다.
향후 ESLint의 개정으로 인해 Svelte 5가 출시되기 전에 현재 패키지 크기가 절반 이상 줄어들 것으로 예상됩니다.
Svelte의 미래를 품다
Svelte 4의 도입으로 더욱 간소화되고 자원이 풍부한 개발 여정이 가능해졌으며, 이를 통해 곧 출시될 Svelte 5 버전에서 기대되는 다양한 매력적인 기능을 위한 토대를 마련할 수 있게 되었습니다.
프레임워크가 계속 발전하고 사용자의 요구 사항을 준수함에 따라 Svelte 추종자뿐만 아니라 최첨단 웹 애플리케이션을 만드는 데 기능을 활용하려는 사람들의 전망이 유망 할 것으로 예상됩니다.
Svelte 4 JavaScript 프레임 워크의 강력한 기능을 수용하면 뛰어난 사용자 경험을 제공하는 현대적이고 세련된 사용자 인터페이스를 갖춘 애플리케이션을 개발할 수 있습니다.