전체 글787

• 

  [Svelte]생명주기(Lifecycle) - onDestroy 함수 onDestroy 함수 Svelte의 생명주기 함수인 onDestroy() 함수는 컴포넌트가 DOM에서 제거될 때 호출됩니다. 컴포넌트가 DOM에서 제거될 때 실행되어야 하는 소스 코드 또는 함수를 인자로 전달합니다. 다음 예제는 "Child 컴포넌트 활성화" 버튼을 클릭하면 Child 컴포넌트가 DOM에 활성화되고 "Child 컴포넌트 비활성화" 버튼을 클릭하면 Child 컴포넌트가 DOM에 비활성화됩니다. Child 컴포넌트가 DOM에서 제거될 때, 생명주기 함수인 onDestroy() 함수가 호출되면서 콘솔에 문구를 출력합니다. [부모 컴포넌트 - App.svelte] handleClick(true)}> Child 컴포넌트 활성화 handleClick(false)}> Child 컴포넌트 비활성화 {.. Svelte 2022. 8. 8.

• 

  [Svelte]생명주기(Lifecycle) - onMount 함수 onMount 함수 Svelte의 생명주기 함수인 onMount()는 컴포넌트가 DOM에 추가될 때 호출됩니다. 컴포넌트가 DOM에 추가될 때, 최초 한 번만 실행해야 하는 작업을 작성할 수 있습니다. onMount() 함수는 주로 아래 작업을 처리하기 위해 사용됩니다. - API 요청하여 데이터 가져오기 - 데이터 처리하기 - DOM 요소 접근하기(포커싱 처리 등...) 다음 예제들을 통해 onMount() 함수 사용 방법을 알아봅시다. 예제 1. API 요청 다음 예제는 jsonplaceholder API에서 제공하는 데이터를 가져와서 화면에 표현합니다. {#each toDoList as toDo} {toDo.id}. {toDo.title} {/each} onMount() 함수에서 async 키워드를.. Svelte 2022. 8. 8.

• 

  [Svelte]7가지 이벤트 수정자 이벤트 수정자 Svelte에서 이벤트 리스너는 다음 방식으로 추가할 수 있습니다. 함수 선언문 함수 표현식 화살표 함수 { console.log('익명 함수'); console.log(event); }}> 익명 함수 DOM API 내부적으로 addEventListener() 함수가 호출됩니다. addEventListener() 함수에는 세 가지 매개변수가 존재합니다. - 첫 번째 매개변수는 이벤트 타겟(해당 이벤트가 동작하는 타겟) - 두 번째 매개변수는 리스너(해당 이벤트가 동작하면 호출되어야 하는 함수) - 세 번째 매개변수는 option(이벤트 수정자)으로 생략 가능 Svelte에서 addEventListener() 함수에 이벤트 수정자를 전달하기 위해서는 on 지시자를 사용합니다. preventD.. Svelte 2022. 8. 8.

• 

  [Svelte]DOM 적용 후 실행되는 tick 함수 tick 함수 svelte에서 제공하는 tick() 함수는 props 또는 state가 DOM에 적용되자마자 Promise 객체를 반환합니다. 쉽게 설명하자면, script 영역에 선언된 변수의 값이 변경된 후 컴포넌트 또는 DOM 요소가 DOM에 바로 적용되지 않습니다. 추가적으로 처리해야 하는 작업이 필요한지 체크 및 적용 후 DOM에 적용합니다. 따라서, 추가적으로 처리해야 하는 작업이 필요한지 체크하는 과정에서 DOM 요소를 접근하는 경우 여러 문제가 발생합니다. 예를 들어, 다음과 같이 "input 태그 활성화" 버튼을 클릭하면 조건문에 의해 input 태그가 활성화됩니다. input 태그 활성화됨과 동시에 input 태그와 바인딩된 변수를 사용하여 포커싱 처리하려고 했으나 TypeError가 .. Svelte 2022. 8. 8.

• 

  [C#]LINQ 데이터가 비어있는 경우 - DefaultIfEmpty 메서드 DefaultIfEmpty 메서드 C#의 Linq는 DefaultIfEmpty() 메서드를 제공합니다. DefaultIfEmpty() 메서드를 호출하는 시퀀스 또는 데이터 집합이 비어 있지 않으면 시퀀스 또는 데이터 집합이 가지고 있는 데이터가 반환되며, 데이터가 존재하지 않으면 해당 타입의 Default 값이 반환됩니다. System.Linq 네임스페이스에 존재하는 DefaultIfEmpty() 메서드는 두 가지 오버로드된 버전이 존재합니다. public static IEnumerable DefaultIfEmpty( this IEnumerable source); public static IEnumerable DefaultIfEmpty( this IEnumerable source, TSource defa.. C#/LINQ 2022. 8. 8.

• 

  [C#]LINQ 단일 값 가져오기 - Single, SingleOrDefault 메서드 Linq 단일 값 가져오기 C#의 Linq는 단일 값을 가져올 수 있는 기능을 제공합니다. - Single() 메서드 - SingleOrDefault() 메서드 이번 포스팅은 두 가지 함수 사용 방법을 소개합니다. Single 메서드 C#의 Linq에서 제공하는 Single() 메서드는 데이터 집합에서 유일한 단일 요소를 반환하거나 특정 조건을 만족하는 단일 요소를 반환합니다. Single() 메서드는 오버로드된 두 가지 버전이 존재합니다. public static TSource Single(this IEnumerable source); public static TSource Single( this IEnumerable source, Func predicate); 첫 번째 Single() 메서드는 단순히.. C#/LINQ 2022. 8. 7.

• 

  [C#]LINQ 마지막 요소 가져오기 - Last, LastOrDefault 메서드 마지막 요소 가져오기 C#의 Linq는 데이터 집합에서 마지막 요소를 가져올 수 있는 기능을 제공합니다. - Last() 메서드 - LastOrDefault() 메서드 이번 포스팅은 두 가지 함수 사용 방법을 소개합니다. Last 메서드 C#의 Linq에서 제공하는 Last() 메서드는 데이터 집합에서 마지막 요소를 반환합니다. Last() 메서드는 오버로드된 두 가지 버전이 존재합니다. public static TSource Last( this IEnumerable source); public static TSource Last( this IEnumerable source, Func predicate); 첫 번째 Last() 메서드는 단순히 데이터 집합의 마지막 요소를 반환합니다. 두 번째 Last().. C#/LINQ 2022. 8. 7.

• 

  [C#]LINQ 첫 번째 요소 가져오기 - First, FirstOrDefault 메서드 첫 번째 요소 가져오기 C#의 Linq는 데이터 집합에서 첫 번째 요소를 가져올 수 있는 기능을 제공합니다. - First() 메서드 - FirstOrDefault() 메서드 이번 포스팅은 두 가지 함수 사용 방법을 소개합니다. First 메서드 C#의 Linq에서 제공하는 First() 메서드는 데이터 집합에서 첫 번째 요소를 반환합니다. First() 메서드는 오버로드된 두 가지 버전이 존재합니다. public static TSource First( this IEnumerable source); public static TSource First( this IEnumerable source, Func predicate); 첫 번째 First() 메서드는 단순히 데이터 집합의 첫 번째 요소를 반환합니다... C#/LINQ 2022. 8. 7.

• 

  [C#]LINQ 특정 인덱스의 값 가져오기 - ElementAt, ElementAtOrDefault 메서드 특정 인덱스의 값 가져오기 C#의 Linq는 데이터 집합에서 특정 인덱스의 값을 가져오는 기능을 제공합니다. - ElementAt() 메서드 - ElementAtOrDefault() 메서드 이번 포스팅은 두 가지 함수 사용 방법을 소개합니다. ElementAt 메서드 C#의 Linq에서 제공하는 ElementAt() 메서드는 데이터 집합에서 특정 인덱스의 값을 반환합니다. public static TSource ElementAt(this IEnumerable source, int index); ElementAt() 메서드는 System.Linq의 Enumerable 클래스에 정의되어 있으며, IEnumerable 인터페이스의 확장 메서드입니다. ElementAt() 메서드를 호출하는 데이터 집합이 nul.. C#/LINQ 2022. 8. 7.

• 

  [C#]LINQ 크로스 조인(Cross Join) 크로스 조인(Cross Join) 크로스 조인은 첫 번째 데이터 집합의 각 요소를 두 번째 데이터 집합의 각 요소와 결합하는데 사용됩니다. 크로스 조인된 결과는 데카르트 곱을 반환하므로 카티전 조인이라고 말합니다. 크로스 조인은 Join 조건이 존재하지 않습니다. 첫 번째 데이터 집합의 요소가 3개, 두 번째 데이터 집합의 요소가 2개 존재한다면 크로스 조인의 결과는 3 x 2로 총 6개의 요소를 가지는 데이터 집합이 반환됩니다. 예를 들어, 두 개의 데이터 집합(Employee, Department)이 존재합니다. 크로스 조인 결과로 총 6개의 요소를 가지는 데이터 집합이 반환됩니다. 샘플 데이터 이번 포스팅에서는 사용자 정의 클래스인 Employee, Department 타입의 데이터 집합을 사용합니.. C#/LINQ 2022. 8. 7.

• 

  [C#]LINQ 왼쪽 조인(Left Join) 왼쪽 조인이란? 왼쪽 조인(Left Join) 또는 왼쪽 외부 조인(Left Outer Join)은 두 번째 데이터 집합에 일치하는 데이터가 있는지 관계없이 첫 번째 데이터 집합의 모든 데이터가 반환되는 Join입니다. 예를 들어, 두 개의 데이터 집합(Employee, Department)이 존재합니다. 첫 번째 데이터 집합이 Employee인 경우 "나랑두" 사원의 부서 코드는 Department에 존재하지 않습니다. 하지만, 왼쪽 조인은 두 번째 데이터 집합인 Department에 일치하는 부서 코드가 없더라도 첫 번째 데이터 집합인 Employee의 모든 데이터가 반환되어야 합니다. 첫 번째 데이터 집합이 Department인 경우 이번에는 반대로 첫 번째 데이터 집합을 Department로 설정.. C#/LINQ 2022. 8. 6.

• 

  [C#]LINQ 그룹 조인 - GroupJoin 메서드 그룹 조인이란? 그룹 조인이랑 두 개 이상의 데이터 집합에서 일치하는 키를 기준으로 그룹화된 데이터를 반환합니다. C#의 Linq에서 키를 기준으로 그룹화된 데이터를 구하기 위해 GroupJoin() 메서드를 사용할 수 있습니다. GroupJoin() 메서드는 Join() 메서드와 GroupBy() 메서드의 기능이 하나로 합쳐진 메서드입니다. 예를 들어, 두 개의 데이터 집합(Employee, Department)이 존재합니다. 데이터 집합 Employee에는 부서 코드가 1000인 사원이 2명, 2000인 사원이 4명, 3000인 사원이 1명입니다. 하지만, 데이터 집합 Department의 부서 코드에는 3000인 데이터가 없으므로 Employee와 Department를 그룹 조인하면, 다음과 같은 .. C#/LINQ 2022. 8. 6.