Javascript203

• 

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

• 

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

• 

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

• 

  [JavaScript]if문 간결화 if...else문은 JavaScript뿐만 아니라 모든 프로그래밍 언어에 존재합니다. if...else문이 안 좋은 문법은 아니지만, 남발해서 사용한다면 코드의 가독성을 저하시키는 단점이 있습니다. 이번 포스팅에서는 JavaScript에서 if...else문을 심플하게 작성할 수 있는 방법들을 소개합니다. 삼항 조건 연산자로 if...else문 한 줄로 처리 삼항 연산자( ? : )를 사용하여 if...else문을 한 줄로 작성할 수 있습니다. // if...else문 if (num === 10) { return true; } else { return false; } // 삼항 연산자 num === 10 ? true : false; 삼항 연산자는 사용 방법은 다음과 같습니다. 조건문 ? true인 경우.. JavaScript/Tip 2022. 1. 7.

• 

  [JavaScript]객체 배열 정렬하는 방법 JavaScript에서 배열을 정렬하는 경우는 종종 있으며, 정렬해야 하는 기준은 객체의 특정 속성일 수 있습니다. 이번 포스팅에서는 객체를 요소로 가지는 배열을 정렬하는 방법에 대해 소개합니다. 다음은 객체를 요소로 가지며 정렬되지 않은 배열입니다. let pens = [ {color: 'red', price: 5000, brand: 'monami'}, {color: 'blue', price: 3000, brand: 'paker'}, {color: 'green', price: 4000}, {color: 'black', price: 1000, brand: 'abc'}, {color: 'yellow', price: 2000}, ] 배열 pens는 객체를 요소로 가지며, 모든 객체는 "color"와 "pri.. JavaScript/JavaScript 문법 2022. 1. 3.

• 

  [JavaScript]Map 객체 정렬하는 방법 Map이란? Map은 Key-Value 형식의 컬렉션입니다. let mapObj = new Map([['key', 'Value1'], [2, 2], [new Date(), 'Value3']]); for(let key of mapObj.keys()) { console.log(key); // key, 2, 3 } 객체와 다르게 모든 타입을 키로 사용할 수 있으며, 객체에서 사용할 수 없는 유용한 기능들이 많습니다. 이번 포스팅에서는 Map 컬렉션 정렬 방법을 소개합니다. 목차 Map 객체와 일반 객체(Object) 차이점 Map 객체 정렬하는 방법 Map 객체와 일반 객체(Object) 비교 Map 객체는 일반 객체와 몇 가지 차이점을 제외하고는 일반 객체와 유사한 데이터 구조를 갖습니다. 1. get(),.. JavaScript/객체 2022. 1. 3.

• 

  [JavaScript]배열인지 확인하는 방법 JavaScript에서 배열을 typeof 연산자로 체크하면 object가 반환됩니다. typeof [] // 'object' typeof 연산자는 JavaScript에서 원시 타입만 체크 가능하므로 배열은 체크할 수 없습니다. 이번 포스팅에서는 JavaScript의 변수 또는 객체가 배열인지 확인하는 방법과 사용하면 안 되는 방법들을 소개합니다. 목차 Array.isArray Object.prototype.toString.call Lodash의 isArray constructor의 문제점 instanceof의 문제점 Array.isArray ECMAScript 5(ES5)에서 도입된 Array.isArray() 함수를 사용하여 배열인지 확인할 수 있습니다. 불리언 값을 반환하며, 현재 배열을 확인하는 .. JavaScript/배열 2022. 1. 3.

• 

  [JavaScript]Symbol이란? Symbol이란? ECMAScript 2015부터 심볼(Symbol)이라는 새로운 원시 타입이 도입되었습니다. Symbol은 고유하고 변경할 수 없는 식별자를 생성하며, 한 번 생성하면 복사할 수 없습니다. Symbol의 사용 목적은 객체의 고유한 프로퍼티 키를 만들기 위해 사용됩니다. 이번 포스팅에서는 Symbol의 다양한 예제와 사용 방법을 통해 Symbol이 무엇인지 설명합니다. 목차 Symbol 사용 방법 Symbol을 생성하는 또 다른 방법 객체의 속성으로 사용하기 객체의 키 이름 충돌 방지 Symbol 사용 방법 다음은 Symbol을 생성하는 예제입니다. const name = Symbol('nameDescription'); const sym = Symbol(); Symbol은 위 예제처럼 S.. JavaScript/기초 2021. 12. 31.

• 

  [JavaScript]프로토타입(Prototype)이란? 객체(Object) JavaScript의 프로토타입을 설명하기 전에 객체에 대해 살펴봅시다. JavaScript는 배열, 문자열 심지어 함수도 객체로 간주합니다. 다음 예제는 배열 생성 후 요소 추가, 삭제 그리고 요소의 개수를 출력합니다. const array = [1, 2, 3]; array.push(4); console.log(array); console.log(array.length); array.pop(); console.log(array); 실행 결과 array라는 변수를 대괄호로 초기화했으므로 array는 배열로 정의됩니다. 따라서 push()와 pop() 함수 그리고 length 프로퍼티를 사용할 수 있습니다. 그렇다면, 변수를 빈 객체로 초기화 후 push() 함수를 사용하면 어떻게 동작.. JavaScript/객체 2021. 12. 27.

• 

  [JavaScript]소수점 반올림하는 방법 이번 포스팅에서는 JavaScript에서 소수점 반올림하는 방법들을 소개합니다. 목차 toFixed() 함수 Math.round() 함수 Math.floor() 함수 Math.ceil() 함수 toPrecision() 함수 toFixed() 함수 toFixed() 함수는 인수로 전달된 소수 자릿수로 반올림된 숫자를 문자열 타입으로 반환합니다. 다음은 toFixed() 함수 사용 예제입니다. (123.678).toFixed(); // 124 (123.678).toFixed(1); // 123.7 (123.678).toFixed(2); // 123.68 (123.678).toFixed(3); // 123.678 (123.678).toFixed(4); // 123.6780 typeof (123.678).toF.. JavaScript/JavaScript 문법 2021. 12. 24.