게시글

Svelte의 on:click 이벤트 처리 방법과 once, preventDefault, stopPropagation, passive, capture, self 등 이벤트 modifier의 종류와 역할을 예제 코드와 함께 정리한다.

Svelte 튜토리얼의 Keyed each blocks 정리. each 블록에서 배열의 첫 항목을 삭제할 때 컴포넌트 초기화 값이 의도와 다르게 유지되는 이유와, (thing.id)처럼 key를 지정해 해결하는 방법을 예제로 설명한다.

Svelte의 반응형 선언 문법을 알아본다. count가 바뀔 때마다 doubled 같은 변수를 자동 갱신하고 조건문과 블록에도 쓸 수 있으며, 배열은 push가 아닌 할당(assignment)이 있어야 반응성이 동작한다는 점을 예제로 설명한다.

Svelte에서 컴포넌트를 import해 중첩 사용하는 방법을 알아본다. 부모의 스타일이 Nested 컴포넌트에는 적용되지 않는 점, 컴포넌트명은 대문자로 시작해야 하는 규칙, @html 사용 시 XSS 공격 위험에 주의해야 한다는 점을 정리한다.

Svelte 공식문서 번역: Svelte 3 릴리스 글 Truly reactive. 가상 DOM 없이 빌드 타임에 컴파일하는 방식과, this.set이나 훅 대신 할당만으로 반응성이 동작하도록 언어 차원으로 옮긴 Svelte 3의 설계를 소개한다.

Svelte 공식문서 번역: Virtual DOM is pure overhead. 가상 DOM이 빠르다는 밈의 유래와 diffing 비용, 불필요한 재계산 문제를 짚고, 빌드 타임에 변경 지점을 아는 Svelte 컴파일러의 방식을 설명한다.

Svelte 공식문서 번역: Write less code. 같은 컴포넌트를 React, Vue, Svelte로 구현해 코드량을 비교하고, bind:value 바인딩과 할당 연산자 상태 갱신 등 Svelte가 보일러플레이트를 줄이는 설계를 소개한다.