Category: #Tech
(원문: https://svelte.dev/blog/svelte-3-rethinking-reactivity)
Svelte는 React나 Vue와 같은 컴포넌트 프레임워크이지만 중요한 차이점이 있습니다. 전통적인 프레임워크들은 선언적인 상태 중심의 코드를 작성할 수 있게 해주지만, 브라우저가 프레임워크의 선언형 구조에서 DOM 구조로 변환해야만 한다는 패널티를 가지고 있습니다. 가상 DOM 재조정과 같은 기술을 사용하는 것은 프레임 예산을 잡아먹고, 가비지 컬렉터를 낭비하게 만듭니다.
그 대신 Svelte는 빌드 타임에 컴포넌트를 DOM으로 수술(surgically)할 수 있는 매우 효율적인 명령형 코드로 변환해줍니다. 결과적으로 우수한 성능 기반을 가진 거대한 어플리케이션을 작성할 수 있습니다.
Svelte의 첫 번째 버전은 가설을 테스트하기 위한 버전이었습니다. Svelte를 위해 만들어진 컴파일러는 훌륭한 유저 경험을 전달할 수 있는 단단한 코드를 생성할 수 있었습니다. 두 번째 버전은 코드를 정리하는 일처럼 조그마한 업그레이드 버전이었습니다.
Svelte의 세 번째 버전은 중요한 점검입니다. 지난 5~6개월간 우리의 목적은 훌륭한 개발자 경험을 제공하는 것이었습니다. 지금은 다른 프레임워크보다 훨씬 적은 코드(boilerplate)로 컴포넌트를 작성할 수 있게 되었습니다. 새로워진 튜토리얼을 시도해보면서 저희가 말하는 의미를 찾아보세요. 다른 프레임워크에 익숙한 상태라면, 이 튜토리얼을 보면서 신기해하실 것입니다.
이것을 가능하게 만들기 위해 우리는 가장 먼저 reactivity라는 모던 UI 프레임워크의 핵심적인 개념을 다시 생각했습니다.
보일러플레이트 없이 이미 알고있을 HTML, CSS, Javascript만으로 컴포넌트를 빌드할 수 있습니다.
Svelte는 앱을 빠르게 실행하고 속도를 유지할 수 있도록 코드를 가볍고 프레임워크 없는 순수한 JS로 컴파일합니다.
Svelte는 JavaScript 자체를 반응형으로 만들어주기 때문에 복잡한 상태 관리 라이브러리가 필요 없습니다.
// App.svelte
<script>
let name = 'world';
</script>
<h1>Hello {name}!</h1>이전에 개인 프로젝트용으로 잠시 둘러봤었지만 개념과 사용하는 이유를 알기 위해서 처음부터 천천히 보려고 한다.
처음 svelte를 보면 vue처럼 한 파일 안에 몰아넣었네라는 느낌이 든다.
그리고 번역체를 자연스럽게 바꾸는 것도 그렇고 영어는 정말 어렵다.