전체 글787

• 

  [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.

• 

  [C#]LINQ 데이터 개수 구하기 - Count 메서드 Count 메서드 C#의 LINQ에서 제공되는 Count() 메서드는 컬렉션과 같은 데이터 집합의 요소 개수 또는 특정 조건을 만족하는 요소 개수를 구하기 위해 사용됩니다. 메서드 오버로드 System.Linq 네임스페이스의 Enumerable 클래스에 정의된 Count() 메서드는 오버로드된 두 가지 버전의 메서드가 존재합니다. public static int Count( this IEnumerable source, Func predicate); public static int Count(this IEnumerable source); Count() 메서드 구문을 통해 IEnumerable 인터페이스의 확장 메서드라는 것을 알 수 있으며, 항상 int 타입의 값을 반환합니다. 그리고 두 가지 버전의 차이.. C#/LINQ 2022. 7. 31.

• 

  [C#]LINQ 평균 구하기 - Average 메서드 Average 메서드 C#의 LINQ에서는 집계 함수를 제공합니다. 그중 Average() 메서드는 컬렉션과 같은 집합에서 숫자 타입인 값의 평균을 계산하기 위해 사용됩니다. 메서드 오버로드 System.Linq의 Enumerable 클래스를 살펴보면 Average() 메서드가 오버로드된 다양한 버전의 메서드를 확인할 수 있습니다. Average() 메서드는 숫자 타입인 값의 평균을 계산하므로 nullable 또는 double, float, decmial 타입의 값을 반환할 수 있습니다. 그리고 Func 대리자를 매개변수로 가지는 메서드와 가지지 않는 메서드가 존재합니다. 이번 포스팅에서 Func 대리자를 매개변수로 가지는 메서드와 가지지 않는 메서드 사용 방법을 예제를 통해 설명하며, Func 대리자에.. C#/LINQ 2022. 7. 31.

• 

  [C#]LINQ 최소값, 최대값 구하기 - Min, Max 메서드 Min, Max 메서드 C#의 LINQ에서는 집계 함수를 제공합니다. 그중 Min() 메서드는 컬렉션과 같은 데이터 집합에서 최솟값을 구하기 위해 사용되며, Max() 메서드는 최댓값을 구하기 위해 사용됩니다. 메서드 오버로드 System.Linq의 Enumerable 클래스를 살펴보면 Min() 메서드와 Max() 메서드는 오버로드된 다양한 버전의 메서드가 존재한다는 것을 확인할 수 있습니다. 반환 타입은 숫자 타입이 아닐 수 있으며, Func 대리자를 매개변수로 가질 수 있습니다. 오버로드된 Min() 메서드와 Max() 메서드의 개수는 동일합니다. Func 대리자에 대한 내용은 아래 포스팅에서 확인할 수 있습니다. [C#]람다식, 람다표현식(Lambda expression) 람다식(Lambda ex.. C#/LINQ 2022. 7. 31.

• 

  [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.

• 

  [C#]LINQ 합계 구하기 - Sum 메서드 Sum 메서드 C#의 LINQ에서는 집계 함수를 제공합니다. 그중 Sum() 메서드는 컬렉션과 같은 데이터 집합에서 숫자 타입인 값의 합계를 계산하기 위해 사용됩니다. 이번 포스팅은 Linq에서 Sum() 메서드를 사용하는 다양한 예제를 소개합니다. 예제 1. int 타입의 List 합계 다음 예제는 Sum() 메서드를 사용하여 int 타입의 List에서 모든 요소의 합계를 계산합니다. class Program { static void Main(string[] args) { List intList = new List() { 5, 10, 15, 20, 25 }; int sum = intList.Sum(); Console.WriteLine("sum: " + sum); } } [실행 결과] sum: 75 참고.. C#/LINQ 2022. 7. 28.