전체 글787

• 

  [C#]LINQ 내부 조인(Inner Join) - Join 메서드 내부 조인이란? 내부 조인은 두 개 이상의 데이터 집합에서 일치하는 데이터만 반환합니다. 만약, 일치하는 데이터가 없는 경우 반환되는 데이터는 존재하지 않습니다. 즉, 내부 조인은 두 개 이상의 데이터 집합에서 일치하는 결과를 추출하고 싶은 경우 사용됩니다. 다음 예시를 통해 알아봅시다. 두 개의 데이터 집합(Employee, Department)이 존재합니다. Employee 데이터 집합의 부서 코드가 Department 데이터 집합의 부서 코드에 존재하는 데이터를 추출하려고 합니다. 부서 코드 2000은 Department 데이터 집합의 부서 코드에 존재하지 않으므로 나랑두 사원은 결과에 포함되지 않습니다. Join 메서드 C#의 Linq에서 제공하는 Join() 메서드를 사용하여 두 개의 데이터 집.. C#/LINQ 2022. 8. 6.

• 

  [Svelte]input 태그 포커싱 처리 input 태그 포커싱 Svelte에서 특정 컴포넌트 렌더링 후 또는 특정 조건에 의해 input 태그를 포커싱 처리하는 작업이 필요할 수 있습니다. 예를 들어, "input 태그 활성화" 버튼을 클릭하면 input 태그 활성화됨과 동시에 포커싱 처리되어야 합니다. isInputElementView = true}> input 태그 활성화 isInputElementView = false}> input 태그 비활성화 {#if isInputElementView} {/if} [실행 결과] "input 태그 활성화" 버튼을 클릭하면 input 태그가 활성화되지만, 포커싱 처리되지 않습니다. 방법 1. bind:this Svelte에서 제공하는 bind 지시자에 this를 적용하면, DOM 요소를 참조할 수 있습니.. Svelte 2022. 8. 5.

• 

  [Svelte]Action과 use 지시자 Action과 use 지시자 Svlete에서 DOM 요소가 DOM에 추가될 때 실행되는 함수를 액션(Action)이라고 합니다. 주로 DOM 요소의 속성을 변경하는 경우 사용됩니다. 예를 들어, 특정 DOM 요소를 포커싱 처리하거나 style을 적용하는 작업에서 액션을 사용할 수 있습니다. DOM 요소에 액션을 적용하기 위해서는 use 지시자를 사용합니다. use 지시자에는 DOM에 추가될 때 실행되는 함수를 지정하고 함수의 인자로 DOM 노드가 전달됩니다. 예제 1. input 태그 포커싱 및 placeholder 다음 예제는 "input 태그 활성화" 버튼을 클릭하면, input 태그가 DOM에 그려지면서 포커싱 및 placeholder가 설정되어야 합니다. "input 태그 비활성화" 버튼을 클릭하.. Svelte 2022. 8. 5.

• 

  [Svelte]문자열을 HTML로 표현 문자열을 html로 표현 Svelte 컴포넌트에서 문자열 형태의 html을 HTML 영역에 표시하면, 문자열이 출력됩니다. {markup} [실행 결과] Svelte에서 문자열 형태의 html을 html로 표현하고 싶다면, 컴포넌트의 HTML 영역에서 @html 문법을 사용합니다. {@html markup} [실행 결과] 다음 소스 코드는 textarea에서 입력받은 문자열을 html로 표현합니다. {@html strValue} [실행 결과] 크로스 사이트 스크립트 공격자가 웹 애플리케이션의 취약점을 이용하여 악성 html, javascript 코드를 삽입하여 비정상적인 기능을 수행하도록 하는 공격 기법입니다. textarea에 악성 html 코드를 삽입하여 웹 애플리케이션이 비정상적으로 동작할 수 있는.. Svelte 2022. 8. 5.

• 

  [Svlete]스토어 데이터 세션 스토리지(sessionStorage)에 저장 스토어 데이터 세션 스토리지에 저장 Svelte의 스토어는 서로 관계없는 컴포넌트 간에 데이터를 공유할 수 있다는 장점이 존재하지만, 웹 페이지를 새로고침 하면 스토어의 모든 데이터가 소실됩니다. 다음은 스토어 numValue의 데이터를 변경하는 과정을 보여줍니다. 새로고침 버튼을 클릭하면 스토어 numValue의 데이터가 유지되지 않고 초깃값 1로 설정됩니다. 따라서, 웹 페이지를 새로고침 했을 때마다 스토어의 데이터를 유지할 필요가 있습니다. 스토어의 데이터를 유지하기 위해 JavaScript에서 제공하는 세션 스토리지(sessionStorage)를 사용합니다. 세션 스토리지 세션 스토리지는 현재 브라우저에 데이터를 저장할 수 있는 웹 스토리지입니다. 새로고침 후에도 세션 스토리지에 등록된 데이터가 .. Svelte 2022. 8. 5.

• 

  [Svelte]사용자 정의 스토어 구현 방법 사용자 정의 스토어 쓰기 가능 스토어, 읽기 전용 스토어, 상속 스토어 외에도 사용자가 스토어를 정의할 수 있습니다. 사용자 정의 스토어는 컴포넌트에서 스토어의 값을 변경하는 set() 함수와 update() 함수를 직접 호출하지 않고 사용자 정의 스토어에서 호출합니다. 스토어의 값을 변경하는 복잡한 계산식이 존재하는 경우 또는 데이터 검증 후 스토어의 값을 변경해야 하는 경우 컴포넌트가 아닌 사용자 정의 스토어에서 코드를 구현할 수 있습니다. 사용자 정의 스토어 구현 방법을 설명하기 전에 사용자 정의 스토어를 사용하지 않은 소스 코드를 살펴봅시다. ExampleStore.js 파일에는 쓰기 가능한 numValue 스토어가 존재합니다. [스토어 - ExampleStore.js] import {writab.. Svelte 2022. 8. 5.

• 

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

• 

  [C#]LINQ 데이터 그룹화 - GroupBy 메서드 GroupBy 메서드 C# Linq에서 제공되는 GroupBy() 메서드는 SQL에서 사용할 수 있는 Group By 절과 동일한 작업을 수행합니다. 즉, GroupBy() 메서드에 전달된 키(또는 프로퍼티)를 기준으로 데이터를 그룹화합니다. 주로 다음 예시처럼 합계, 최솟값, 최댓값, 평균, 개수를 구하기 위해 데이터를 그룹화합니다. - 특정 연도의 매출 - 부서별 인원수 - 각 반별로 평균 점수 계산 예제에 사용되는 클래스 이번 포스팅에서 사용되는 Student 클래스입니다. public class Student { public string ID { get; set; } // 학생을 식별하는 키 public string Name { get; set; } // 학생의 이름 public int Grade.. C#/LINQ 2022. 8. 4.

• 

  [C#]LINQ 누적기 함수 - Aggregate 메서드 Aggregate 메서드 C#의 Linq는 집계 함수를 제공합니다. 그중 Aggregate() 메서드는 누적 연산을 수행합니다. 메서드 오버로드 System.Linq의 Enumerable 클래스에 정의된 Aggregate() 메서드를 확인할 수 있으며, 세 가지 오버로드된 버전이 존재합니다. public static TSource Aggregate( this IEnumerable source, Func func); public static TAccumulate Aggregate( this IEnumerable source, TAccumulate seed, Func func); public static TResult Aggregate( this IEnumerable source, TAccumulate se.. C#/LINQ 2022. 8. 3.

• 

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