Svelte는 HTML·CSS·자바스크립트로 작성한 선언적인 컴포넌트를 컴파일해 웹 사용자 인터페이스를 만드는 프레임워크이다. 작성한 컴포넌트와 브라우저에서 실행되는 결과물 사이에 컴파일 단계가 있다는 점이 중요한 특징이다.
분야 | 컴파일 기반 UI 프레임워크 |
|---|
컴파일과 실행
컴파일러는 컴포넌트의 화면 구조와 동작을 실행 가능한 자바스크립트와 스타일로 변환한다. 컴파일을 사용한다는 사실을 브라우저에서 자바스크립트가 필요 없다는 뜻으로 해석해서는 안 된다. 실행할 코드의 양과 성능은 실제 컴포넌트와 의존성에 따라 달라진다.
컴포넌트 단위
버튼, 메뉴, 검색 입력 등 독립적으로 이해할 수 있는 화면 단위를 작성하고 서로 조합한다. 스타일과 이벤트 처리를 컴포넌트에 연결할 수 있으며 TypeScript를 사용하는 구성도 가능하다. 컴포넌트가 늘어날수록 상태의 소유 위치와 공유 방법을 함께 설계한다.
버전별 반응형 모델
Svelte 문서는 runes 기반 API와 레거시 API를 구분한다. 서로 다른 버전의 예제를 섞으면 상태 선언과 갱신 규칙을 오해하기 쉽다. 프로젝트가 사용하는 모드에 맞춰 공식 문서를 읽고 새 API의 이름만 기존 코드에 대입하지 않는다.
SvelteKit과의 관계
Svelte가 UI 컴포넌트 작성과 렌더링을 담당한다면 SvelteKit은 이를 웹 애플리케이션으로 구성하는 프레임워크이다. 작은 위젯에는 Svelte를 직접 사용할 수 있고, 라우팅·데이터 로딩·배포 구조가 필요한 서비스에는 SvelteKit을 함께 검토할 수 있다.
참고 자료