svelte-core-bestpractices은(는) 무엇을 하나요?
빠르고, 견고하며, 현대적인 Svelte 코드를 작성하기 위한 지침입니다. Svelte 프로젝트에서 컴포넌트나 모듈을 작성/편집하거나 분석할 때 이 스킬을 로드하세요. 반응성, 이벤트 처리, 스타일링, 라이브러리 통합 등을 다룹니다.
반응성 (Reactivity)
$:문법을 사용한 반응성 선언은 종속성이 변경될 때만 재실행됩니다. 불필요한 재실행을 피하기 위해 종속성을 최소화하세요.- 반응성 문장 (
$: { ... }) 내부에서는 부수 효과(side effect)를 최소화하고, 가능하면 반응성 선언 ($: value = ...)을 사용하세요. - 배열이나 객체의 변이는 반응성을 트리거하지 않습니다. 대신 새로운 참조를 할당하거나
array = array와 같이 재할당하세요. $store구문을 사용하여 스토어 값을 구독하고, 컴포넌트가 파괴될 때 자동 구독 해제를 활용하세요.
이벤트 처리 (Event Handling)
on:click과 같은 네이티브 DOM 이벤트를 사용하며, 필요 시event.preventDefault()등을 호출하세요.- 컴포넌트 간 통신에는
createEventDispatcher를 사용하여 커스텀 이벤트를 발행하세요. - 이벤트 수식어 (e.g.,
on:click|preventDefault)를 적절히 활용하여 코드를 간결하게 유지하세요.
스타일링 (Styling)
- Svelte의 스코프된 CSS를 기본으로 사용하며, 스타일이 컴포넌트 외부로 누출되지 않도록 하세요.
- 전역 스타일이 필요한 경우
:global(...)선택자를 사용하되 과도하게 사용하지 마세요. - CSS 변수와
style속성을 사용하여 동적 스타일링을 구현하세요.
라이브러리 통합 (Integration with Libraries)
- 외부 라이브러리를 통합할 때는
onMount라이프사이클 훅 내에서 초기화하는 것이 안전합니다. onDestroy에서 리소스 정리(cleanup)를 수행하여 메모리 누수를 방지하세요.tick함수를 사용하여 DOM 업데이트 후 동기화가 필요한 시점을 처리하세요.
성능 (Performance)
- 불필요한 반응성 계산을 피하고,
$:블록 내에서 비용이 많이 드는 연산을 최소화하세요. - 리스트 렌더링 시 고유한
key를 제공하여 DOM 재사용을 최적화하세요. - 조건부 렌더링에는
{#if}블록을 사용하고,{#each}내에서 복잡한 템플릿 로직을 피하세요.
추가 팁
- Svelte의 공식 문서와 함께 이 스킬을 참고하여 최신 모범 사례를 유지하세요.
- 컴포넌트를 작고 재사용 가능하게 유지하고, 단일 책임 원칙을 따르세요.
- TypeScript와 함께 Svelte를 사용하는 경우, 타입 안전성을 최대한 활용하세요.