This Week in Svelte, Ep. 112 — Changelog, Storybook for Svelte Part 1
- Svelte 컴파일러는 중복된 클래스 필드 선언 시 오류를 발생시켜 코드의 안정성을 높입니다. 🚨
- SVG 속성에 대한 타입 정의가 추가되어 개발 경험을 개선하고 잠재적 오류를 줄입니다. 🖼️
- 컴포넌트 옵션이 컴파일 모듈에서 무시되도록 변경되어 Vit 플러그인과의 호환성 문제가 해결되었습니다. 🔌
- 코드베이스 전반에 흩어져 있던 불필요한 주석(TODO)들이 제거되어 코드의 가독성과 유지보수성이 향상되었습니다. ✅
await
구문 내에서 또 다른 await
구문을 사용하는 것이 허용되어 유연성이 증가했지만, 실제 사용 사례는 제한적일 수 있습니다. ⏳
- CSS 스타일이 컴포넌트 마운트 시점에 적용되도록 변경되어 스타일 관련 문제를 해결하고 사용자 정의 요소의 스타일링을 개선합니다. 💅
- 사용되지 않는 코드(
parser.Template untrimmed
)가 제거되어 코드베이스를 정리하고 잠재적인 혼란을 줄입니다. ✂️
- 커스텀 엘리먼트로 컴파일할 때 스타일이 항상 주입되도록 수정되어, 커스텀 엘리먼트의 스타일링이 일관성 있게 적용됩니다. 🏷️
- Firefox에서 이벤트 객체가 가비지 컬렉션되는 문제로 인해 이벤트가 두 번 처리되는 버그가 수정되었습니다. 🦊
- SVG 및 MML 엘리먼트에 바인딩 가능한 차원 속성 타입이 추가되어 타입 안정성을 높이고 개발 편의성을 개선합니다. 📐
- SvelteKit 2.27.0 버전에서는 서버에서 클라이언트로 데이터를 로드하는 새로운 방식인 Remote Functions가 도입되었습니다. 🚀
- Remote Functions는 Telefunk에서 영감을 받았으며, 서버와 클라이언트 간의 데이터 흐름을 간소화합니다. 💡
- Remote Functions를 사용하려면
kit.experimental.remoteFunctions
옵션을 활성화해야 합니다. ⚙️
- Remote Functions는 비동기 함수를 사용하여 데이터를 쿼리하고, 컴포넌트 내에서 직접 사용할 수 있습니다. 📡
- Remote Functions는
await
구문과 함께 사용하여 템플릿 내에서 직접 데이터를 가져올 수 있습니다. ✨
- Remote Functions는 에러, 로딩, 현재 값 등의 상태를 제공하여 개발자가 UI를 효과적으로 관리할 수 있도록 돕습니다. 📊
- Remote Functions는 캐싱 기능을 제공하여 페이지 내에서 동일한 쿼리를 여러 번 호출해도 성능 저하 없이 데이터를 재사용할 수 있습니다. 📦
- SvelteKit은 Form을 통해 프로그레시브 인핸스먼트를 지원하며, JavaScript가 활성화되지 않은 환경에서도 폼 제출이 가능하도록 합니다. 📝
- Form을 사용하면 JavaScript 활성화 여부에 관계없이 폼 데이터를 처리하고 서버에서 데이터를 수정할 수 있습니다. ⚙️