![]()
얼마 전에 Svelte v5가 릴리즈 되었다.수정된 부분은 꽤나 많지만, 제일 눈여겨본 것은 export let의 deprecated와 props 변경이었다. 전체 변경사항은 아래에서 확인할 수 있다.https://svelte.dev/docs/svelte/v5-migration-guide 보이는 바와 같이 $props() 를 통하여 속성들을 내려줄수 있게 되었다. 별거 아닌거같아 보이지만, 이는 재사용 가능한 컴포넌트 작성에 아주 큰 이점을 안겨준다. 만약 button, a 등의 element를 재사용 가능하게 컴포넌트화 할 시에 기존에는 $$restProps 를 통하여 내려줄 수 밖에 없었다.근데 위와 같은 방식을 사용하게 되면 Type 안정성이 떨어진다. restProps를 사용하게 되면 해당 엘리..
![]()
SvelteKit은 번들링 도구로 vite를 사용한다. vite에서의 환경변수 설정에 대한 가이드는 아래와 같다. svelte에서 vite dev로 실행 시, 위 패턴에 대한 환경변수들을 자동으로 로드 해준다. 하지만 어째서인지 node adapter를 사용한 경우, 배포 환경에서는 제대로 작동하지 않았다. 분명 .env와 .env.production에 환경변수를 제대로 설정했음에도 말이다. SvelteKit의 Node servers 공식 문서를 확인해보았다.https://svelte.dev/docs/kit/adapter-node Node servers • Docs • SvelteTo generate a standalone Node server, use adapter-node. Usage Install..
스벨트는 다양한 환경에 배포 가능하도록 어댑터를 지원해준다. 개인적으로 node, cloudflare 가 유용했다. 어댑터를 변경하려면 svelte.config.js의 어댑터를 변경해준 뒤, 모듈만 설치해주면 된다. 노드 어댑터의 경우는 빌드 후 node build 커맨드로 간단하게 실행할 수 있으며, cloudflare는 pages, worker 둘 다 지원해준다. 깃허브 프로젝트를 연동 후, 간단하게 실행해 볼 수 있었다. 서버리스 애플리케이션 배포에 아주 편리했다.
스벨트는 vite에 의존해서 돌아가기 때문에, vite에서 사용되는 파일 네이밍 양식 을 그대로 사용할 수 있다. https://vitejs.dev/guide/env-and-mode.html#env-files ViteNext Generation Frontend Toolingvitejs.dev 스벨트에서 환경변수는 public/private, static/dynamic으로 구분된다. Public은 서버 컴포넌트가 아닌 파일에서도 불러올 수 있는 환경변수들이다. public 환경변수를 사용하고 싶을 때는 접두사로 PUBLIC_ 을 붙여줘야만 한다.public이 붙지 않은 모든 환경변수는 private 취급되며 서버 컴포넌트에서만 불러올 수 있고, 외부에 노출되지 않는다. 스벨트를 typescript와 사용..
