풀스택 웹 개발 프레임워크 스벨트키트 1.0 출시

풀스택 웹 개발 프레임워크 스벨트키트 1.0 출시: 최정인 / 기사승인 : 2022-12-21 12:28:45

해외 테크 매체 인포월드가 스벨트키트(SvelteKit) 1.0 배포 소식을 보도했다. 스벨트키트 1.0은 스벨트 UI 컴포넌트 프레임워크로 풀 스택 웹 애플리케이션을 개발한다.

스벨트키트는 주요 배포 버전을 12월 14일에 공개하며, 모든 스벨트 애플리케이션을 개발하는 데 사용할 것을 추천한다고 밝혔다. 스벨트 개발팀은 스벨트로 사용자 인터페이스를 개발하는 것이 DOM으로 직접 작업하기보다 쉽다고 말했다. 스벨트는 뷰(Vue)나 리액트(React)등의 프레임워크와 다른 접근법을 사용한다. 스벨트는 앱 개발 과정에서 브라우저 작업을 서버의 컴파일 단계로 옮긴다.

스벨트키트는 서버 렌더링 창을 로드한 후 기본적으로 클라이언트 측 탐색 창을 띄워 창 전환 속도를 높이고, 창 사이 일정 상태를 유지하며 데이터 소모량을 줄이는 것을 기본 설정으로 한다. 스벨트키트는 모든 화면을 띄울 때 제3자 스크립트를 재실행하지 않는다. 스벨트키트에서 한 프로그래밍 언어는 HTML을 생성하는 데 사용하고 하나는 클라이언트 측 상호작용을 처리한다. 자바스크립트가 실행되는 곳이라면 스벨트키트를 실행할 수 있으므로 개발자는 앱을 전통적 Node.js 서버로 사용하거나 서버리스(serverless) 함수를 사용할 수 있다.

사용법은 스벨트키트 문서와 상호작용 가능한 튜토리얼을 참고할 수 있다. 애플리케이션 개발에 개인화 데이터 이용 시 성능이 저하되고 배치가 변환되는 효과 없이 브라우저에서 데이터를 가져올 수 있다. 스벨트키트는 REPL로 동적 데이터를 렌더링하는 동안 화면을 프리렌더(prerender)해 보여준다. 두 렌더 사이 변환은 단 한 줄의 코드로 구현된다. 이러한 접근방식으로 개발한 앱을 전이적(trasitional) 앱이라고 부른다.

스벨트키트 프레임워크 자체는 플랫폼 의존성이 없으며 다만 스벨트키트 명령줄 인터페이스(CLI)는 로컬 기기에서 Node.js 설치가 필요하다. 스벨트키트는 바이트(Vite)를 빌드 도구로 사용하며 빠른 모듈 리로딩(hot module reloading)과 타입스크립트를 바로 실행할 수 있게 지원한다. 스벨트키트 프로젝트를 시작하면 코드 분석 목적으로 타입스크립트, ES린트(ESLint)를 추가할 것인지, 코드 서식 설정 목적으로 프리티어(Prettier)를 추가할지, 브라우저 테스트에 플레이라이트(Playwright)를, 단위 테스트 목적으로 빗테스트(Vitest)를 추가할지 물어본다.

만약 앱 전체가 프리렌더할 수 있거나 단일 페이지로 구성됐다면, 어댑터 스태틱(adapter-static)으로 스벨트키트를 깃허브 페이지스(GitHub Pages)를 포함한 모든 종류 서버의 정적 웹사이트 생성기로 변환할 수 있다.

한편, 스벨트는 추후 기술 로드맵에서 증분 정적 생성(incremental static generation), 배포 지역과 런타임에 관한 개별적 관리, 이미지 최적화 등의 기능을 개발한다고 밝혔다.