이번 글에서는 Svelte의 트랜지션에 대해 알아보자. 트랜지션이란, 어떠한 이벤트가 발생하였을 때 화면에 출력하는 여러 가지 특수 효과를 말한다. 트랜지션과 애니메이션은 화면에 특수한 효과를 출력한다는 점은 같지만 트랜지션은 효과를 출력하기 위해 사전에 이벤트나 작업이 필요하며 애니메이션은 사전 작업 없이 자동으로 효과를 출력한다는 점이 다르다. 트랜지션은 화면에 출력하는 특수 효과이기 때문에 사용 방법이 애니메이션과 거의 동일하며 사용자 정의 트랜지션 효과도 설정할 수 있다. Transitions 기본 사용 방법 Svelte에서 트랜지션을 사용하는 방법은 아래와 같다. import { 트랜지션 효과 } from 'svelte/transition'; ... 트랜지션 효과는 아래와 같이 효과를 사용자가 ..

이번에는 Svelte에서 제공하는 애니메이션에 대해 알아보자. Svelte의 애니메이션은 내장 모듈인 Flip과 사용자 정의 애니메이션을 제공한다. 먼저, Flip 효과에 대해 알아보자. Flip Flip 애니메이션은 요소가 추가되거나 제거될 때 부드럽게 밀리고 접히는 애니메이션으로, 리스트를 표현하고자 할 때 사용하기 좋은 애니메이션이다. Flip을 사용하는 방법은 아래와 같다. import { flip } from 'svelte/animate' 아래의 예제는 Svelte로 만든 Todolist 애플리케이션으로 상단 Input 태그에 할 일을 적고 Enter키를 누르면 좌측에 할 일이 추가된다. 계획한 일을 완료하면 아이템 좌측에 체크박스를 선택하여 우측에 완료 리스트로 보낸다. 만약, 아이템을 삭제하..

이번 글부터는 Svelte에서 제공하는 효과에 대해 알아보자. 첫 번째로 알아볼 효과는 Motion으로 트위닝 효과와 스프링 효과를 제공한다. CSS로도 이러한 효과를 만들 수 있지만, Svelte의 Motion은 Writable Store를 사용하여 효과를 쉽게 적용할 수 있도록 기능을 제공한다. 아래의 예제를 통해서 어떻게 사용하는지 알아보자. 앞으로 4개의 게시글로 Svelte의 효과에 대해 알아볼 것이다. 다만, 실제 개발 (회사에서 또는 사이트)에서는 효과를 주기 위해 CSS의 애니메이션을 사용하기 때문에 개인 프로젝트나 프로토 타입 개발에서 빠르게 효과를 적용해야 할 때 주로 사용할 것 같다. 효과에 대해 자세히 알고 싶다면, Svelte의 효과보다는 CSS의 트랜지션이나 애니메이션을 학습하는..

Svelte 문법의 마지막인 Module Context와 Debug에 대해 알아보자. Module Context Svelte의 Module Context는 컴포넌트에서 제공하는 데이터나 메서드를 Export 하여 공유하는 기능으로 기본적인 사용 방법은 아래와 같다. 1. Export 하는 모듈 2. Import 하는 모듈 아래의 예제 코드를 살펴보자. 1) App.svelte stop all audio 2) AudioPlayer.svelte {title} {composer} / performed by {performer} 실행 결과는 아래와 같다. 위의 코드를 살펴보면 AudioPlayer.svelte 모듈 최상단에 {@debug user} Hello {user.firstname}! 실행 결과는 아래와 ..

이번에는 Svelte의 Context API에 대해 알아보자. Context API는 서로 다른 컴포넌트 간의 통신이 필요할 때 사용하기 유용한 기능이다. 일반적으로 컴포넌트 간의 통신은 상위 컴포넌트에서 하위 컴포넌트로 전달하는 Props를 사용한다. 하지만 컴포넌트의 깊이가 깊고, 최상위 컴포넌트의 데이터를 최하위 컴포넌트에게 전달해야 한다고 가정해보자. 컴포넌트의 깊이만큼 모든 하위 컴포넌트들이 Props를 정의해야 하는데, 중간의 컴포넌트 입장에서는 필요 없는 Props를 선언하여 불필요한 메모리 공간을 낭비하는 꼴이 된다. 또한 코드의 구조가 복잡해지기 때문에 장기적으로 볼 때는 좋은 구조라고 할 수 없다. 이런 경우에 사용하는 것이 바로 Context API다. Context API는 Svel..

이번에는 Svelte에서 제공하는 내장 요소들에 대해 알아보자. 특정 컴포넌트 내부에서 컴포넌트 자신을 재귀로 추가해야 하는 경우에 사용한다. 재귀로 컴포넌트 자신을 추가해야 하는 경우 일반적으로 2) File.svelte {name} 3) Folder.svelte {name} {#if expanded} {#each files as file} {#if file.type === 'folder'} {:else} {/if} {/each} {/if} Folder 컴포넌트를 보면 전달된 타입이 'folder'일 경우 를 사용해서 Folder 컴포넌트 자신을 재귀로 추가하는 것을 확인할 수 있다. 아래는 예제를 실행한 스크린 샷이다. 조건에 따라 DOM에 마운트 되어야 하는 컴포넌트를 달리 해야 하는 경우에 사용한..

이번 글에서는 Svelte의 Slot에 대해 알아보자. Slot이란 특정 컴포넌트에 전달할 요소 또는 자식 컴포넌트를 주입할 때 사용하는 것으로 Vue에서 Slot과 동일하다. 예제를 통해 기본적인 사용 방법에 대해 알아보자. 1) App.svelte Hello World !! 2) Box.svelte 실행 결과는 아래와 같다. 위의 예제와 같이 Box 컴포넌트에 태그를 전달하면 Box 컴포넌트 내에 있는 태그 위치에 전달된 요소가 주입된다. Slot Failbacks 때로는 Slot이 제대로 들어오지 못하는 경우가 있을 수 있다. 이 경우에는 태그 사이에 요소 또는 컴포넌트를 넣어 Slot이 안 들어왔을 경우에 출력하도록 기본 값을 설정할 수 있다. 위의 예제를 아래와 같이 변경하자. 1) App.sv..

이번 글에서는 규모가 큰 애플리케이션을 개발할 때 사용하기 좋은 Store에 대해서 알아보자. Store란 각자 다른 컴포넌트들이 같은 데이터를 접근하기 위해 사용하는 것으로, 애플리케이션의 규모가 커지거나 컴포넌트 간의 상호 작용이 필요할 경우 매우 유용하게 사용할 수 있는 객체를 말한다. Store는 여러 개의 컴포넌트들이 참조할 수 있으며, Store의 값이 수정될 때 참조하고 있는 컴포넌트에게 알려주는 구독 기능을 제공한다. 구독을 사용하는 컴포넌트는 개발자가 변경된 값을 화면에 출력하기 위해 DOM을 조작하지 않아도 자동으로 반영된다. 또한 구독 메서드를 사용하면 Svelte 내부 로직을 통해 값이 변경되기 때문에 성능 및 안전성이 높은 장점이 있다. Store의 기본 사용법은 아래와 같다. /..