Svelte33

• 

  [Svelte]상속 스토어 구현 방법 상속 스토어(derived store) Svlete에서 지원하는 상속 스토어는 하나 이상의 스토어에서 값을 가져오는 스토어를 의미합니다. 상속 스토어 구현 방법을 설명하기 전에 상속 스토어를 사용하지 않은 소스 코드를 살펴봅시다. ExampleStore.js 파일에는 읽기 전용인 DataList 스토어와 쓰기 가능인 strValue, numValue 스토어가 존재합니다. [스토어 - ExampleStore.js] import {readable, writable} from 'svelte/store' export const DataList = readable([ {id: 1, name: 'AAAAA', number: 100}, {id: 2, name: 'ABBBB', number: 200}, {id: 3, .. Svelte 2022. 8. 4.

• 

  [Svelte]스토어 구독 방법 스토어 구독 방법 Svelte에는 구독이란 개념이 존재하며, Youtube의 구독과 동일합니다. Youtube에서 특정 채널을 구독하고 해당 채널에 동영상이 업로드되면 알림을 받습니다. Svelte에서 컴포넌트는 사용자이며, 채널은 스토어입니다. 컴포넌트가 스토어를 구독하고 스토어의 값이 변경되면 스토어를 구독하는 컴포넌트에게 변경된 값이 전달됩니다. 컴포넌트에서 스토어를 구독하는 방법은 두 가지입니다. 첫 번째 방법은 subscribe() 함수를 사용하는 방법이고 두 번째 방법은 자동 구독 표기법인 달러 $ 기호를 사용합니다. 예제 코드 다음 사진은 이번 포스팅에서 사용되는 컴포넌트와 스토어입니다. App.svelte 컴포넌트는 Child.svelte의 부모 컴포넌트이며, Child.svelte는 자식.. Svelte 2022. 8. 4.

• 

  [Svelte]쓰기 가능 스토어 초기화 및 새로운 값 할당 쓰기 가능 스토어 Svelte의 컴포넌트가 스토어의 값을 변경할 수 있으면, 해당 스토어는 쓰기 가능 스토어라고 말합니다. 아래 포스팅에서 스토어의 개념과 쓰기 가능 스토어를 구현하는 방법을 간략하게 설명했습니다. [Svelte]스토어 사용 방법 - 쓰기 가능(writable) 스토어(Store)란? 부모-자식 컴포넌트 간 데이터를 공유하는 방법으로 props를 사용할 수 있으며, 부모-자식 컴포넌트 구조가 아닌 컴포넌트 간에 데이터를 공유하는 방법으로 콘텍스트(Context)가 존 developer-talk.tistory.com 이번 포스팅은 쓰기 가능 스토어의 값을 초기화하는 방법과 새로운 값을 할당하는 방법을 설명합니다. 초깃값 설정 초깃값을 설정하기 전에 쓰기 가능 스토어를 생성합니다. 스토어는 .. Svelte 2022. 8. 4.

• 

  [Svelte]스토어 사용 방법 - 읽기 전용(readable) 스토어(store)란? 지난 포스팅에서 스토어의 개념과 쓰기 가능 스토어를 생성는 방법을 알아보았습니다. [Svelte]스토어 사용 방법 - 쓰기 가능(writable) 스토어(Store)란? 부모-자식 컴포넌트 간 데이터를 공유하는 방법으로 props를 사용할 수 있으며, 부모-자식 컴포넌트 구조가 아닌 컴포넌트 간에 데이터를 공유하는 방법으로 콘텍스트(Context)가 존 developer-talk.tistory.com 스토어는 컴포넌트 간 데이터를 공유하는 방법으로 컴포넌트 계층구조와 상관없이 데이터를 공유할 수 있습니다. 스토어는 컴포넌트가 아니므로 .svelte 확장자가 아닌 .js 확장자를 사용하여 스토어 파일을 생성할 수 있으며, 컴포넌트는 스토어에 값을 등록하거나 변경할 수 있습니다. 스벨.. Svelte 2022. 8. 3.

• 

  [Svelte]스토어 사용 방법 - 쓰기 가능(writable) 스토어(Store)란? 부모-자식 컴포넌트 간 데이터를 공유하는 방법으로 props를 사용할 수 있으며, 부모-자식 컴포넌트 구조가 아닌 컴포넌트 간에 데이터를 공유하는 방법으로 콘텍스트(Context)가 존재합니다. Svelte에서 컴포넌트 간에 데이터를 공유하는 또 다른 방법으로 스토어(Store)가 존재하는데, 스토어는 콘텍스트처럼 서로 관련 없는 컴포넌트 간에 데이터를 공유하는 방법입니다. 예를 들어, 다음 그림처럼 구성된 컴포넌트 구조에서 A_1 컴포넌트의 데이터를 C_2 컴포넌트로 props로 전달하고자 합니다. A_1 컴포넌트의 데이터를 C_2 컴포넌트로 전달하기 위해서는 최상위 컴포넌트인 App 컴포넌트와 C_1 컴포넌트를 거쳐야 합니다. 따라서, A_1 컴포넌트의 데이터를 전달하는 과정을.. Svelte 2022. 8. 3.

• 

  [Svelte]콘텍스트를 사용하여 데이터 전달 콘텍스트(Context)의 필요성 콘텍스트를 소개하기 전에 props를 사용하여 데이터를 전달하는 방법의 문제점을 알아봅시다. 부모 컴포넌트에서 자식 컴포넌트에게 데이터를 전달하는 경우 props를 사용하는 것이 가장 좋으나 컴포넌트 구조가 복잡한 경우 데이터 전달이 어렵습니다. 예를 들어, 컴포넌트 구조가 App > B > C로 구성되어 있다고 가정하고 props를 사용하여 App 컴포넌트의 데이터를 C 컴포넌트에게 전달하는 경우 B 컴포넌트를 거쳐야 한다는 단점이 있습니다. [최상위 컴포넌트 - App.svelte] [중간 컴포넌트 - B.svelte] [최하위 컴포넌트 - C.svelte] Double 자식 컴포넌트의 numValue = {numValue} 위 예시처럼 최상위 컴포넌트에서 최하위 컴.. Svelte 2022. 8. 2.

• 

  [Svelte]이벤트 처리 방법 Svelte에서 이벤트 처리 방법 Svelte에서는 on 지시자를 사용하여 DOM 이벤트 또는 사용자 정의 이벤트를 처리할 수 있습니다. 예를 들어, button 태그에서 click 이벤트가 발생하거나 textarea 태그에서 change 이벤트가 발생하는 경우 이벤트를 처리하기 위한 로직을 구현할 수 있습니다. 다음 예제는 버튼을 클릭하면, 콘솔에 "Hello"를 출력합니다. [App.svelte] console.log('Hello')}> Hello 출력 이벤트를 처리하는 로직은 위 예제처럼 HTML 영역에서 익명 함수로 구현하거나 아래 예제처럼 이벤트를 처리하는 함수를 script 영역에 구현 후 이벤트 핸들러에 함수를 전달합니다. Hello 출력 [실행 결과] 컴포넌트에 이벤트 전달 Svelte에서.. Svelte 2022. 8. 2.

• 

  [Svelte]슬롯(slot)이란? 슬롯(slot)이란? 부모 컴포넌트가 자식 컴포넌트에게 콘텐츠를 전달하는 것을 슬롯(slot)이라고 말합니다. 예를 들어 ~ 태그 사이에 다른 HTML 태그를 작성할 수 있는 것처럼 Hello! Name: 홍길동 Age: 20 컴포넌트 사이에도 HTML 태그를 작성할 수 있으며, HTML 태그가 아닌 다른 컴포넌트가 중첩될 수 있습니다. Hello! Name: 홍길동 Age: 20 부모 컴포넌트에게 전달받은 콘텐츠를 으로 표시할 수 있으며, 를 기본 슬롯이라고 부릅니다. Svelte의 슬롯(slot)은 React의 합성(Composition)과 유사합니다. 합성 (Composition) vs 상속 (Inheritance) – React A JavaScript library for building user.. Svelte 2022. 8. 2.

• 

  [Svelte]부모 컴포넌트의 값 변경 props 전달의 문제점 svelte에서 부모 컴포넌트가 자식 컴포넌트에게 값을 전달하는 방법 중 가장 대표적인 방법으로 props가 존재합니다. 다음 예제는 부모 컴포넌트인 App.svelte가 자식 컴포넌트인 Child.svelte에 cValue라는 이름의 props를 전달합니다. [부모 컴포넌트 - App.svelte] 부모 컴포넌트의 pValue = {pValue} [자식 컴포넌트 - Child.svelte] Double 자식 컴포넌트의 cValue = {cValue} [실행 결과] 실행 결과에서 확인할 수 있듯이 자식 컴포넌트에서 cValue라는 props의 값을 변경하면, 부모 컴포넌트에 영향이 없다는 것을 볼 수 있습니다. bind로 props 전달 Svelte에서 자식 컴포넌트가 부모 컴포.. Svelte 2022. 8. 2.

• 

  [Svelte]DOM 요소 참조 방법 DOM 요소 참조 방법 이전 포스팅에서 bind 지시자를 사용하여 Form 요소의 value를 매핑하고 그룹화하는 방법을 소개하였습니다. [Svelte]bind 지시자 사용 방법 및 Form 요소 바인딩 bind 지시자 Svelte에서는 다양한 지시자를 제공합니다. 그중 bind 지시자는 html의 기본 태그 또는 컴포넌트의 변수에 값을 바인딩하기 위해 사용됩니다. 값을 바인딩하기 위해서는 bind 지시문을 사 developer-talk.tistory.com bind 지시자는 Form 요소의 value를 매핑하고 그룹화하는 방법 이외에도 DOM 요소를 참조하기 위해 사용할 수 있습니다. HTML 요소 또는 컴포넌트에 bind:this={변수명}를 작성하면 script 영역에서 해당 변수를 통해 HTML .. Svelte 2022. 8. 2.

• 

  [Svelte]bind 지시자 사용 방법 및 Form 요소 바인딩 bind 지시자 Svelte에서는 다양한 지시자를 제공합니다. 그중 bind 지시자는 html의 기본 태그 또는 컴포넌트의 변수에 값을 바인딩하기 위해 사용됩니다. 값을 바인딩하기 위해서는 bind 지시문을 사용하며, 다음 예제처럼 script 영역에 선언된 변수와 input 태그를 바인딩할 수 있습니다. {textValue} [실행 결과] bind:value 지시자가 input 태그에 입력된 값을 textValue라는 변수에 할당되고 ~ 태그 사이에 변수 textValue의 값을 출력합니다. React는 input 태그와 state 변수의 값을 동기화하기 위해 onChange 이벤트 핸들러 함수에서 state의 값을 변경했는데, Svelte는 onChange 이벤트 핸들러 함수를 구현하지 않고 scri.. Svelte 2022. 7. 30.

• 

  [Svelte]props 전달 방법 Props React 및 Vue.js와 같은 다른 프레임워크에서도 사용되는 Props는 컴포넌트 간 데이터를 전달하는 방법 중 한 가지 방법으로 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 경우 사용됩니다. 이번 포스팅은 부모 컴포넌트인 App.svelte가 자식 컴포넌트인 Child.svelte에게 데이터를 props로 전달하는 방법을 살펴봅시다. export 사용 부모 컴포넌트인 App.svelte는 import 키워드를 사용하여 자식 컴포넌트인 Child.svelte를 Child로 명시하였으며, script 영역에 선언된 변수 num을 Child 컴포넌트에 number라는 이름의 props로 전달합니다. 아래 소스 코드에서 알 수 있듯이 부모 컴포넌트에서 전달하는 props의 이름과 변수명은.. Svelte 2022. 7. 30.