전체 글787

• 

  [Svelte]await 블록 및 Promise 처리 Svelte에서 Promise 처리 이번 포스팅은 Svelte에서 제공하는 await 블록을 사용하여 Promise를 처리하는 방법을 소개합니다. JSON 구조의 데이터를 Response 하는 jsonplaceholder 사이트를 이용하여 스벨트 애플리케이션에서 API 요청할 것이며 다음 사진처럼 버튼을 클릭하면 Response 받은 JSON 데이터를 웹 페이지에 출력합니다. 순서 1. 버튼 생성 및 API 요청 먼저, HTML 영역에 버튼을 생성합니다. 그리고 버튼을 클릭하면 jsonplaceholder API에 데이터를 요청(request) 하기 위해 script 영역에 fetch() 함수를 사용합니다. script 영역에 toDoList라는 변수는 response 받은 데이터를 할당받는 배열입니다... Svelte 2022. 7. 17.

• 

  [Svelte]스벨트에서 반복문 사용하는 방법 지난 포스팅에서는 Svelte에서 반복문을 수행할 수 있는 {#each} 문에 대해 알아보았습니다. [Svelte]반복문 #each 반복 렌더링 배열처럼 순회할 수 있는 항목을 순회하여 각 요소를 HTML 요소에 렌더링 하는 것을 반복 렌더링이라고 말합니다. 예를 들어, 카테고리 항목들이 배열로 구성되어 있는 경우 배열을 developer-talk.tistory.com 이번 포스팅에서는 스벨트에서 반복문을 수행하는 몇 가지 팁을 소개합니다. 예제 1. 객체로 구성된 배열 가장 기본적인 방법부터 소개하겠습니다. 배열의 요소가 객체로 구성된 경우 점 표기법 또는 대괄호 표기법으로 객체의 프로퍼티를 접근할 수 있으며, 별칭 뒤에 쉼표를 추가하여 인덱스를 추출할 수 있습니다. {#each list as item.. Svelte 2022. 7. 16.

• 

  [Svelte]반복문 #each 반복 렌더링 배열처럼 순회할 수 있는 항목을 순회하여 각 요소를 HTML 요소에 렌더링 하는 것을 반복 렌더링이라고 말합니다. 예를 들어, 카테고리 항목들이 배열로 구성되어 있는 경우 배열을 순회하여 HTML 요소에 렌더링 할 수 있습니다. {#each category as list} {list.name} {/each} [실행 결과] Svelte에서 반복문은 {#each 배열 as 요소}로 시작하며 {/each}로 끝납니다. 이번 포스팅을 통해 Svelte에서 반복문을 사용하는 다양한 예제들을 알아보겠습니다. Svelte의 반복문 Svelte에서 반복문을 시작하려면 #{each}를 사용하고 반복문을 종료하려면 {/each}를 사용합니다. {#each}문은 JavaScript의 for..in 루프와 유사한.. Svelte 2022. 7. 16.

• 

  [Svelte]if 조건문 조건부 렌더링 React, Svelete, Angular 등 특정 조건에 따라 HTML 요소를 표시하거나 표시하지 않아야 하는 경우가 있습니다. 특정 조건에 따라 HTML 요소를 표시하는 것을 조건부 렌더링이라고 말하며 Svelte에서도 조건문 블록을 사용하여 조건부 렌더링을 구현할 수 있습니다. {#if num === 0} num은 0입니다. {:else if num < 0} num은 0보다 작습니다. {:else} num은 0보다 큽니다. {/if} if문 Svelte에서 조건문은 {#if 조건문}으로 시작하며 {/if}로 끝납니다. 다른 프로그래밍 언어와 유사하게 동작합니다. {#if 조건문} {/if} 다음 예제는 num이 0인 경우 "num은 0입니다."라는 문구가 HTML 영역에 렌더링 되고 .. Svelte 2022. 7. 16.

• 

  개발자의 자기 개발 어느덧 내 나이 30살, 3년 차 개발자가 되었고 블로그를 운영한 지 1년 2개월이 되었다. 내가 블로그를 시작한 근본적인 이유는 돈이지만 프로그래밍이라는 주제는 다른 주제에 비해 돈이 안된다. 다른 주제 또는 다른 부업을 선택했다면 지금보다 더 나은 수익을 창출했을 가능성이 있지만 후회하지 않는다. 공부를 시작한 계기 블로그를 시작하기 전에 공부를 해야겠다고 다짐했던 시기가 있었는데 바로 입사하고 1년 지났을 때로 기억한다. 그 당시 업무가 많아서 저녁 11시에 퇴근했는데, 퇴근하는 길에 고도 비만인 남성분이 열심히 러닝하고 있었다. 누군가는 "운동하는구나..."라고 생각하거나 신경 안 쓸 수 있지만 나는 그 사람을 보고 전율이 돋았다. 나는 열심히 살고 있는가? 이 질문이 뇌리에 스쳤고 집에 가자마자.. 일상/개발이야기 2022. 7. 14.

• 

  [C#]LINQ 교집합 구하는 방법 - Intersect 메서드 Intersect 메서드 LINQ의 Intersect() 메서드는 두 컬렉션에서 동일한 요소를 추출합니다. 예를 들어 다음 소스 코드를 봅시다. int[] intArrayA = { 0, 2, 4, 5 }; int[] intArrayB = { 1, 2, 3, 5 }; int 타입의 배열인 intArrayA와 intArrayB가 존재합니다. intArrayA와 intArrayB에 모두 존재하는 요소는 2, 5입니다. 배열을 그림으로 나타내면 다음과 같습니다. 오버로드된 두 가지 버전 LINQ의 Intersect() 메서드는 오버로드된 두 가지 버전이 존재합니다. public static IEnumerable Intersect( this IEnumerable first, IEnumerable second); .. C#/LINQ 2022. 7. 14.

• 

  [C#]LINQ 차집합 구하는 방법 - Except 메서드 Except 메서드 LINQ의 Except() 메서드는 첫 번째 데이터에는 존재하지만 두 번째 데이터에는 없는 요소를 반환합니다. 예를 들어 다음 소스 코드를 봅시다. int[] intArrayA = { 0, 2, 4, 5 }; int[] intArrayB = { 1, 2, 3, 5 }; int 타입의 배열인 intArrayA와 intArrayB가 존재합니다. 첫 번째 데이터인 intArrayA에는 존재하지만 두 번째 데이터인 intArrayB에 없는 요소는 0, 4입니다. 배열을 그림으로 나타내면 다음과 같습니다. 오버로드된 두 가지 버전 LINQ의 Except() 메서드는 오버로드된 두 가지 버전이 존재합니다. public static IEnumerable Except( this IEnumerable.. C#/LINQ 2022. 7. 13.

• 

  [C#]인스턴스 비교 - ReferenceEquals 메서드 ReferenceEquals 메서드 C# 최상위 클래스인 Object에 존재하는 ReferenceEquals() 메서드는 매개변수로 전달된 두 개의 객체가 동일한 인스턴스인지 확인하기 위해 사용됩니다. ReferenceEquals() 메서드는 재정의할 수 없으며 두 개의 객체가 동일한 인스턴스라면 true를 반환하고 그렇지 않으면 false를 반환합니다. 참조 형식에서 값이 할당되는 과정을 모르신다면 아래 포스팅을 참고해주세요. 값 형식과 참조 형식에서 값이 할당되는 과정을 이해하셔야 ReferenceEquals() 메서드를 이해할 수 있습니다. [C#]값 형식(Value Types)과 참조 형식(Reference Types) 값 형식(Value Types)과 참조 형식(Reference Types) C.. C# 2022. 7. 13.

• 

  [C#]LINQ 특정 타입 추출하는 방법 - OfType 메서드 LINQ의 OfType 메서드 LINQ의 OfType() 메서드는 특정 타입의 데이터를 추출하기 위해 사용되는 메서드입니다. 예를 들어 List의 타입이 Object인 경우 string, int, boolean 등.. 모든 타입의 값을 가질 수 있습니다. 해당 List 객체에서 string 타입의 값만 추출하고 싶은 경우 OfType() 메서드를 사용할 수 있습니다. 다음 예제는 OfType() 메서드를 사용하여 string 타입의 값을 추출하는 방법입니다. class Program { static void Main(string[] args) { // Object 타입인 List 객체는 모든 타입의 값을 가질 수 있습니다. List allTypeList = new List() { "C Sharp", 10.. C#/LINQ 2022. 7. 12.

• 

  [Java]폴더(디렉토리) 생성 방법 폴더(디렉토리) 생성 Java에서 폴더를 생성하는 방법은 간단합니다. File 클래스에 정의되어 있는 mkdir() 메서드를 사용하면 됩니다. 다음 소스 코드는 D드라이브에 Directory폴더를 생성하는 예제입니다. public static void main(String args[]) { File file = new File("D:\\Directory"); if (file.mkdir() == true) { System.out.println("디렉토리가 생성되었습니다."); } else { System.out.println("디렉토리를 생성하지 못했습니다."); } } mkdir() 메서드는 폴더가 성공적으로 생성되면 true를 반환하고 그렇지 않으면 false를 반환합니다. 하지만 폴더가 이미 존재하는.. Java 2022. 7. 12.

• 

  [C#]LINQ 인덱스 가져오는 방법 Select 메서드 System.Linq 네임스페이스에 존재하는 Select() 메서드는 오버로드된 두 가지 버전이 존재합니다. // 첫 번째 버전 public static IEnumerable Select( this IEnumerable source, Func selector); // 두 번째 버전 public static IEnumerable Select( this IEnumerable source, Func selector); 첫 번째 버전으로는 인덱스를 가져올 수 없으므로 이번 포스팅은 두 번째 버전에 대해 설명합니다. Select() 메서드의 첫 번째 매개 변수는 Select() 메서드가 IEnumerable 인터페이스의 확장 메서드라는 것을 의미합니다. this IEnumerable sourc.. C#/LINQ 2022. 7. 12.

• 

  [React]파일 업로드 구현 파일 업로드 구현 파일 업로드 버튼을 외부 라이브러리에서 제공하는 버튼 컴포넌트를 사용하고 싶은데 해당 라이브러리에서 파일 업로드 기능을 지원하지 않을 수 있습니다. 외부 라이브러리 대신 input 태그를 사용하면 파일 업로드 기능을 사용할 수 있지만 디자인이 마음에 들지 않습니다. 디자인 때문에 컴포넌트를 제작하기에는 얼마만큼의 시간이 소모될지 모릅니다. 하지만, DOM 엘리먼트를 접근할 수 있는 Ref를 활용한다면 외부 라이브러리의 버튼 컴포넌트를 사용하여 파일 업로드 기능을 구현할 수 있습니다. 이번 포스팅은 외부 라이브러리에서 제공하는 버튼 컴포넌트에서 파일 업로드 기능을 사용할 수 있는 방법을 소개합니다. JavaScript 파일 업로드 JavaScript에서 파일 업로드를 구현해야 하는 경우 .. React/React 문법 2022. 7. 11.