전체 글787

• 

  [JavaScript]URL 사용 방법 URL 객체란? URL 객체는 디스크의 파일을 가리키는 객체입니다. 사용자가 이미지 또는 pdf와 같은 파일을 선택하여 웹 페이지에 미리보기를 보여줘야 하는 경우 URL 객체를 사용할 수 있습니다. URL 객체 사용 방법 URL 객체는 전역 객체로 URL 처리를 지원하는 여러 함수가 포함되어 있습니다. ▶ URL 생성 URL 객체의 createObjectURL() 함수를 사용하여 File 또는 Blob 객체를 가리키는 URL을 생성할 수 있습니다. 함수의 인수로 파일 객체를 전달합니다. File 또는 Blob 객체는 생성된 고유한 URL에 매핑되고 URL.createObjectURL() 함수는 URL을 string으로 반환합니다. 다음 예제는 업로드한 이미지 파일을 표시하는 예제입니다. input 엘리먼.. JavaScript/JavaScript 문법 2022. 2. 4.

• 

  [JavaScript]예외 처리(Exception Handling) 예외 처리란? 예외 처리는 프로그램에서 발생할 수 있는 오류를 대응하는 방법을 의미합니다. 프로그램에서 발생하는 오류는 프로그래밍 언어에 따라 다를 수 있으며, JavaScript는 다음과 같은 이유로 오류가 발생할 수 있습니다. 구문 오류(SyntaxError): 세미콜론 또는 대괄호 누락으로 발생하는 오류입니다. 범위 오류(RangeError): 값이 표현할 수 있는 범위를 벗어나는 경우 발생하는 오류입니다. 참조 오류(ReferenceError): 존재하지 않는 변수에 값을 할당하는 경우 발생하는 오류입니다. 타입 오류(TypeError): 값이 예상한 결과와 다른 경우 발생하는 오류입니다. URIError: endcodeURI() 또는 decodeURI() 함수에 의해 발생하는 오류입니다. 그 외.. JavaScript/JavaScript 문법 2022. 2. 3.

• 

  [React]Electron에 React 적용 #2. 파일 업로드 이번 포스팅은 Electron에 React를 적용하여 파일 업로드하는 방법을 소개합니다. 다음은 예제에 사용될 폴더 구조입니다. FileUpload 폴더가 존재하며, FileUpload에는 A, B 폴더 그리고 MainImage.jpeg 파일이 존재합니다. A 폴더에는 AA 폴더 그리고 AImage.jpeg 파일이 존재합니다. AA 폴더는 빈 폴더입니다. B 폴더에는 BImage.jpge 파일이 존재합니다. 목차 기존 JavaScript 파일 업로드의 문제점 Electron 폴더 업로드 선택한 폴더의 하위 파일 또는 폴더 참고자료 기존 JavaScript 파일 업로드의 문제점 기존 JavaScript의 파일 업로드는 input 태그에 type='file'로 설정하여 파일 업로드를 구현할 수 있습니다. 하.. React/Electron 2022. 1. 31.

• 

  [React]Electron에 React 적용 #1. 환경설정 및 배포 Electron이란? Electron은 OS 제약이 없으며 데스크톱에서 사용 가능한 JavaScript 기반의 응용 프로그램입니다. 단순하게 설명하자면, 웹을 응용 프로그램처럼 사용하는 개념입니다. JavaScript 기반이므로 Augular, React, jQuery, Vue 등 개발자가 원하는 웹 프레임워크를 사용할 수 있으며, JavaScript와 Node에 익숙하다면 쉽게 개발할 수 있습니다. Electron의 장점 부트스트랩을 사용할 수 있으므로 Java Swing, C# WFT와 Winform에 비해 큰 공수를 들이지 않아도 됩니다. 특정 OS에 종속되지 않습니다. JavaScript, Node에 익숙하다면 접근하기 쉽습니다. Electron의 단점 응용 프로그램이 무겁습니다.(RAM과 CPU.. React/Electron 2022. 1. 28.

• 

  [JavaScript]파일 입출력 - FileReader 객체 FileReader란? FileReader는 type이 file인 input 태그 또는 API 요청과 같은 인터페이스를 통해 File 또는 Blob 객체를 편리하게 처리할 수 있는 방법을 제공하는 객체입니다. abort, load, error와 같은 이벤트에서 발생한 프로세스를 처리하는데 주로 사용되며, File 또는 Blob 객체를 읽어서 result 속성에 저장합니다. JavaScript 개발자는 result 속성을 통해 데이터를 접근할 수 있습니다. 이번 포스팅은 FileReader 객체에 대해 소개하며, 예제는 이전 포스팅을 참고해주세요. 목차 비동기로 동작하는 FileReader FileReader 사용 방법 언제 File 또는 Blob를 읽어야 하는지 FileReader 객체의 주요 속성 비동.. JavaScript/JavaScript 문법 2022. 1. 25.

• 

  [JavaScript]파일 업로드 구현 이번 포스팅은 JavaScript에서 파일 업로드 구현하는 방법을 소개합니다. HTML input 태그 작성 html 파일에서 input 태그를 작성 후 type = 'file'로 설정하고 input 태그의 id를 지정합니다. 하나 이상의 파일을 업로드해야 하는 경우 multiple='multiple' 속성을 추가합니다. 또한 이미지 유형에 대해 업로드하는 경우 accept 속성을 accept='image/*'와 같이 작성하며 파일 확장자를 jpg만 허용하는 경우 accept='.jpg'로 작성합니다. JavaScript에서 이벤트 핸들러를 구현 const fileInput = document.getElementById("fileUpload"); // 또는 const fileInput = $("#file.. JavaScript/JavaScript 문법 2022. 1. 25.

• 

  [JavaScript]exceljs 사용방법 및 엑셀 다운로드(내보내기) 이번 포스팅은 exceljs 라이브러리를 사용하여 엑셀 다운로드(내보내기)하는 방법을 소개합니다. exceljs를 사용하는 이유 JavaScript에서 엑셀 다운로드를 지원하는 다양한 라이브러리가 존재하지만, exceljs 라이브러리는 엑셀의 모든 셀을 접근하여 커스텀할 수 있다는 장점이 있습니다. font, border, fill 등... 특정 행의 셀마다 스타일을 설정할 수 있으며 이미지도 엑셀로 내보낼 수 있습니다. 자세한 사용 방법은 exceljs 공식 문서에서 확인할 수 있습니다. 엑셀 다운로드 구현 방법 예제는 react에서 구현하였지만, JavaScript를 사용하는 다른 웹 프레임워크에서도 사용할 수 있습니다. ※ 주의사항 exceljs의 주의사항으로 행과 셀은 0이 아닌 1부터 시작합니다.. JavaScript/JavaScript 문법 2022. 1. 25.

• 

  [C#]List 특정 값 존재하는지 체크하는 방법 이번 포스팅은 C#의 List에서 특정 값이 존재하는지 체크하는 방법을 소개합니다. 목차 Contains() 함수 Exists() 함수 FindIndex() 함수 데이터 형식이 객체인 List Contains() 함수 Contains() 함수 구문은 다음과 같습니다. public bool Contains (T item); item은 List 에서 찾을 객체(또는 값)이며, item이 클래스의 객체 또는 배열과 같은 참조 타입에 대해서 값은 null이 될 수 있습니다. item이 존재하면 Contain() 함수는 True를 반환하고 그렇지 않으면 False를 반환합니다. 다음은 Contains() 함수 사용 예제입니다. class Program { static void Main(string[] args) .. C# 2022. 1. 24.

• 

  [JavaScript]배열 복사 방법 JavaScript에서 기존 배열의 값을 유지하고 새로운 배열로 복사 후 값을 변경해야 하는 경우가 존재합니다. 여기서 배열을 잘못된 방법으로 복사하면 새로운 배열의 값을 변경했는데 기존 배열의 값도 변경되는 문제가 발생합니다. 다음은 잘못된 방법으로 배열을 복사 후 값을 변경하는 예제입니다. let arrA = [1, 2, 3]; let arrB = arrA; arrB[0] = 10; console.log(arrA); // [10, 2, 3] console.log(arrB); // [10, 2, 3] 배열 arrB의 0번째 위치의 값을 변경했는데 배열 arrA의 0번째 위치의 값도 변경되었습니다. 이러한 원인은 배열이 값 형식이 아닌 참조 형식이기 때문입니다. 이번 포스팅에서는 JavaScript에서 .. JavaScript/배열 2022. 1. 19.

• 

  [C#]Mutable과 Immutable(가변과 불변) 가변(Mutable)과 불변(Immutable) 가변(Mutable)은 "변경할 수 있는"을 의미하며, 불변(Immutable)은 "변경할 수 없는"을 의미하는 단어입니다. 이 단어는 프로그래밍 언어에서도 동일한 의미를 가집니다. 변경 가능한 타입은 인스턴스가 생성된 후 값이 변경될 수 있지만, 변경 불가능한 타입은 인스턴스가 생성된 후 값을 변경할 수 없는 타입입니다. C#에는 불변 클래스인 string과 가변 클래스인 StringBuilder가 존재하는데, 이번 포스팅에서는 string과 StringBuilder 클래스로 불변과 가변에 대해 설명합니다. string string은 변경할 수 없는 타입입니다. 문자열 변수는 스택(Stack)에 생성되며, 힙(Heap)에 생성되는 문자열 주소를 참조합니다.. C# 2022. 1. 18.

• 

  [C#]인덱서 사용 방법 인덱서란? 인덱서(Indexers)는 클래스의 멤버로 클래스의 값을 배열처럼 접근할 수 있도록 해주는 문법입니다. 이번 포스팅에서는 인덱서 사용 방법을 소개합니다. 목차 인덱서를 사용하지 않는 경우 인덱서 정의 방법 인덱서를 사용하지 않는 경우 다음 예제처럼 배열은 인덱스를 사용하여 해당 위치의 값을 접근할 수 있습니다. class Program { static void Main(string[] args) { int[] numArray = { 1, 2, 3, 4 }; Console.WriteLine("0번째 인덱스의 값: " + numArray[0]); Console.WriteLine("2번째 인덱스의 값: " + numArray[2]); } } 실행 결과 다음은 클래스 인스턴스에서 객체를 배열처럼 사용.. C# 2022. 1. 17.

• 

  [C#]열거형 사용 방법 열거형이란? 열거형(Enum)은 미리 정의된 상수들이 나열된 집합입니다. 예를 들어 요일이라는 열거형은 월, 화, 수, 목, 금, 토, 일만 될 수 있으며, 성별이라는 열거형은 알 수 없음, 남자, 여자만 될 수 있습니다. 이번 포스팅에서는 열거형에 대해 소개합니다. 목차 열거형의 필요성 열거형 특징 열거형에서 사용 가능한 함수 열거형의 필요성 다음은 열거형을 사용하지 않은 예제입니다. Person 클래스에는 Name과 Gender 속성이 존재하며, Gender의 값은 다음과 같이 정의됩니다. 0: 성별을 알 수 없음 1: 남자 2: 여자 0, 1, 2가 아닌 값은 잘못 입력된 값 public class Person { public string Name { get; set; } public int Gen.. C# 2022. 1. 17.