게시글

Svelte에서 커스텀 버튼 컴포넌트를 만들 때 필요한 $$restProps로 나머지 속성을 하위 컴포넌트에 전달하는 방법과 createEventDispatcher의 dispatch로 on:click 커스텀 이벤트를 연결하는 방법을 정리한다.

Svelte 5 프로젝트를 sv CLI로 생성하고 TypeScript와 SMUI(Svelte Material UI)까지 설치하는 방법. 구버전 degit template 방식과의 차이도 함께 정리했다.

React, Vue와 달리 Svelte가 인라인 핸들러를 권장하는 이유를 알아본다. Virtual DOM 없이 컴파일되기에 메모리 불이익이 없고, 인라인 핸들러는 $$invalidate 코드로 변환되어 할당 연산자 없이도 데이터 갱신이 이루어진다.

Svelte each 블록에서 배열 항목 삭제 시 li 전체가 다시 렌더링되는 문제를 key를 지정해 변경된 요소만 렌더링하도록 개선하는 방법과, 값이 바뀔 때마다 내용을 파괴하고 재생성하는 Key 블록을 알아본다.

Svelte의 bind:this로 DOM 요소를 변수에 바인딩해 querySelector 없이 input에 포커스를 주는 방법과, 체크박스에 bind:group을 사용해 선택된 값들을 배열로 모으는 입력요소 바인딩을 예제로 알아본다.

Svelte의 style은 해당 컴포넌트 안에서만 유효하며, svelte-로 시작하는 Style Hash 클래스로 유효범위가 만들어진다. 전역 스타일이 필요할 때 :global 선택자를 쓰는 방법과 미사용 CSS가 번들에서 빠지는 점을 알아본다.

Svelte는 태스크가 끝난 뒤 화면이 갱신되므로 값 할당 직후 DOM을 읽으면 이전 값이 나온다. DOM 업데이트 완료 후 Promise를 반환하는 tick 함수를 await해서 갱신된 DOM에 접근하는 방법을 예제로 알아본다.

Svelte 라이프사이클 중 onMount와 onDestroy를 토글 예제로 알아본다. onMount는 컴포넌트가 연결될 때, onDestroy는 해제 직전에 실행되며, onMount의 return 함수가 onDestroy 역할을 한다는 점도 다룬다.

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가 보일러플레이트를 줄이는 설계를 소개한다.