재주껏 하는 Front-End(29)
-
13. Module Context, Debug
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}! 실행 결과는 아래와 ..
2020.11.27 -
12. Context API
이번에는 Svelte의 Context API에 대해 알아보자. Context API는 서로 다른 컴포넌트 간의 통신이 필요할 때 사용하기 유용한 기능이다. 일반적으로 컴포넌트 간의 통신은 상위 컴포넌트에서 하위 컴포넌트로 전달하는 Props를 사용한다. 하지만 컴포넌트의 깊이가 깊고, 최상위 컴포넌트의 데이터를 최하위 컴포넌트에게 전달해야 한다고 가정해보자. 컴포넌트의 깊이만큼 모든 하위 컴포넌트들이 Props를 정의해야 하는데, 중간의 컴포넌트 입장에서는 필요 없는 Props를 선언하여 불필요한 메모리 공간을 낭비하는 꼴이 된다. 또한 코드의 구조가 복잡해지기 때문에 장기적으로 볼 때는 좋은 구조라고 할 수 없다. 이런 경우에 사용하는 것이 바로 Context API다. Context API는 Svel..
2020.11.24 -
11. Special Elements
이번에는 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에 마운트 되어야 하는 컴포넌트를 달리 해야 하는 경우에 사용한..
2020.11.12 -
10. Slot
이번 글에서는 Svelte의 Slot에 대해 알아보자. Slot이란 특정 컴포넌트에 전달할 요소 또는 자식 컴포넌트를 주입할 때 사용하는 것으로 Vue에서 Slot과 동일하다. 예제를 통해 기본적인 사용 방법에 대해 알아보자. 1) App.svelte Hello World !! 2) Box.svelte 실행 결과는 아래와 같다. 위의 예제와 같이 Box 컴포넌트에 태그를 전달하면 Box 컴포넌트 내에 있는 태그 위치에 전달된 요소가 주입된다. Slot Failbacks 때로는 Slot이 제대로 들어오지 못하는 경우가 있을 수 있다. 이 경우에는 태그 사이에 요소 또는 컴포넌트를 넣어 Slot이 안 들어왔을 경우에 출력하도록 기본 값을 설정할 수 있다. 위의 예제를 아래와 같이 변경하자. 1) App.sv..
2020.10.29 -
9. 스토어
이번 글에서는 규모가 큰 애플리케이션을 개발할 때 사용하기 좋은 Store에 대해서 알아보자. Store란 각자 다른 컴포넌트들이 같은 데이터를 접근하기 위해 사용하는 것으로, 애플리케이션의 규모가 커지거나 컴포넌트 간의 상호 작용이 필요할 경우 매우 유용하게 사용할 수 있는 객체를 말한다. Store는 여러 개의 컴포넌트들이 참조할 수 있으며, Store의 값이 수정될 때 참조하고 있는 컴포넌트에게 알려주는 구독 기능을 제공한다. 구독을 사용하는 컴포넌트는 개발자가 변경된 값을 화면에 출력하기 위해 DOM을 조작하지 않아도 자동으로 반영된다. 또한 구독 메서드를 사용하면 Svelte 내부 로직을 통해 값이 변경되기 때문에 성능 및 안전성이 높은 장점이 있다. Store의 기본 사용법은 아래와 같다. /..
2020.10.07 -
8. 컴포넌트 생명 주기
이번 글에서는 Svelte 컴포넌트의 생명 주기에 대해서 알아보도록 하겠다. 컴포넌트 기반의 UI 프레임워크들은 컴포넌트를 효과적으로 관리하기 위해 생명 주기를 적용하고 있으며, 생성부터 소멸까지의 과정에 필요한 작업들을 정의하기 위해 생명 주기 이벤트를 제공한다. 아래는 VueJS의 컴포넌트 생명 주기를 나타낸 것이다. Svelte 역시 컴포넌트 생명 주기에 대한 이벤트들을 제공한다. 단, 다른 UI 프레임워크들과 달리 아직 많이 세분화되지 않았는데 차후에 버전이 올라가면 좀 더 세분화되지 않을까 생각한다. 아래는 Svelte의 생명 주기를 나타낸 것이다. 이제 Svelte에서 제공하는 생명 주기에 대해 알아보자. onMount onMount 이벤트는 컴포넌트가 DOM에 렌더링 된 후에 실행되는 이벤트..
2020.09.22 -
7. 바인딩
이번 글에서는 바인딩에 대해서 알아보자. 바인딩이란 컴포넌트의 데이터 모델 변수와 HTML 요소 또는 컴포넌트와 연결하는 작업을 말한다. 전통적인 웹 방식에서는 오직 DOM 객체로 요소에 접근하여 value를 설정해야 했지만, 최근의 UI 프레임워크들은 이러한 과정들을 자동으로 수행하여 연결해준다. 양방향 바인딩 Svelte와 같은 반응형 UI 프레임워크들은 컴포넌트들에 데이터를 전달할 때 상위 컴포넌트가 하위 컴포넌트에게 전달하는 하양식 구조를 가지고 있다. ReactJS의 경우 양방향 바인딩을 공식적으로 지원하지 않아 단방향 두 개를 구성하여 비슷하게 흉내를 내는 식으로 구현한다. ReactJS가 이런 엄격한 규칙을 정한 이유는 거대한 프로젝트에서 유지보수성이 용이하다는 큰 장점이 있기 때문이며, 이..
2020.09.14 -
6. 이벤트 처리
이번 글에서는 Svelte의 이벤트 처리에 대해 알아보자. 이벤트 등록 Svelte는 모든 구성 요소에 이벤트 설정이 가능하며, 아래의 방법으로 이벤트 리스너를 등록할 수 있다. 이벤트 리스너 동작} /> 간단한 사용 예제를 살펴보자. 하나의 태그를 추가하고 태그 내에서 마우스를 움직이면 마우스 커서 좌표를 출력하는 코드이다. The mouse position is {m.x} x {m.y} 실행 결과는 아래와 같다. 어렵지 않게 마우스 이벤트와 이벤트 리스너를 등록하여 원하는 기능을 구현할 수 있다. 간단한 기능이라면 아래와 같이 이벤트 핸들러를 ES6의 화살표 함수를 통하여 구현할 수도 있다. m = {x: e.clientX, y: e.clientY}}> The mouse position is {m.x..
2020.09.08