본문 바로가기
반응형

Language189

[ES6+] Promise 메서드 사용하기 (ft. all/allSettled/race) Promise 메서드에 대해 알아보기 전에 만약 Promise를 모른다면 아래 링크를 통해 대략적으로 이해하고 오자. [ES6+] Promise란? - 비동기 처리를 위한 객체 [ES6+] Promise란? - 비동기 처리를 위한 객체 ES6부터 정식으로 지원해주기 시작한 Promise 객체에 대해 알아보자. Promise란 말 그대로 '약속(프로미스)'을 의미하는데, 이는 최종 결과를 반환한다기보다는 미래의 어떤 시점에 결과를 제공하겠 mine-it-record.tistory.com Promise 자체에서 제공하는 메서드에 대해 알아볼 건데, 전체적으로 알아보면 내용이 길어지니 알아두면 좋을 메서드에 대해서만 알아보고자 한다. 1. Promise.all Promise.all은 매개변수로 주어진 배열의 .. 2022. 7. 26.
[ES6+] Array.from() - 유사 배열을 가지고 새로운 배열 만들기 Array.from() 메서드는 제목 그대로 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운 Array 객체를 만들어주는 메서드이다. ▷ 구문 Array.from(arrayLike[, mapFn[, thisArg]]) arrayLike: 배열로 변환하고자 하는 유사 배열 객체나 반복 가능한 객체. mapFn: 배열의 모든 요소에 대해 호출할 맵핑 함수 (배열의 map 메서드와 동일하다 생각하면 된다.) thisArg: mapFn 실행 시에 this로 사용할 값 유사 배열이란 length 속성과 인덱싱 된 요소를 가진 객체를 의미하며, 반복 가능한 객체는 Map, Set 등 객체의 요소를 얻을 수 있는 객체를 의미한다. (Set을 A.. 2022. 7. 26.
[JavaScript] Array.isArray() - 배열(Array)이 맞는지 판별/확인하기 Array.isArray() 메서드는 제목 그대로 배열인지 확인하기 위한 메서드이다. 배열인지를 확인할 때 instanceof나 typeof 대신에 Array.isArray()를 사용하는 것이 더 정확한 결과를 얻을 수 있다. ▷ 구문 Array.isArray(obj) obj: 검사할 객체 ▷ 예제 1) Array.isArray() true/false 판별 // 모두 true 반환 Array.isArray([]); Array.isArray([1]); Array.isArray(new Array()); Array.isArray(new Array('a', 'b', 'c', 'd')); Array.isArray(new Array(3)); // Array.prototype은 스스로도 배열입니다 Array.isAr.. 2022. 7. 13.
[ES6+] at() - 문자열/배열의 특정 인덱스 위치에 있는 값 가져오기 (ft. 음수) 배열 또는 문자열에서 특정 인덱스에 위치한 값을 가져오는 방법은 매우 간단한데, 좀 더 복잡하게 뒤에서부터 몇 번째 같은 경우처럼 처리하기 난감한 상황들이 간혹 존재한다. (대체적으로 "전체 길이 - 1"로 처리를 해왔었던 것 같다.) 하지만 드디어 스크립트에서도 양수와, 음수를 가지고 특정 인덱스에 접근하는 걸 도와주는 메서드가 생겼다. 각각 String.prototype.at() 와 Array.prototype.at()이며, 한번 알아가 보도록 하자. ▷ 구문 .at(index) index: 반환할 배열 요소의 인덱스(위치)이다. 음수 인덱스를 전달할 때 배열 끝에서 상대 인덱싱을 지원한다. (즉, 음수를 사용하는 경우에는 배열의 끝에서부터 역으로 위치를 계산해서 가져온다.) 예제를 통해 알아보자. .. 2022. 7. 13.
[TypeScript] Type VS Interface TypeScript에서 Type Alias와 Interface의 각각의 특징을 통해 공통점과 차이점에 대해 알아보자. 1. 선언 type PositionType = { x: number; y: number; }; interface PositionInterface { x: number; y: number; } // object const obj1: PositionType = { x: 10, y: 1, }; const obj2: PositionInterface = { x: 20, y: 2, }; 일반적으로 객체 타입을 선언하는 거에 있어서 둘이 동일한 방법으로 사용할 수 있다. 선언 부분에서의 둘의 차이점은 인터페이스는 당연하겠지만 객체에서만 사용이 가능하다는 점과, Index Signature의 사용 유무.. 2022. 6. 8.
[TypeScript] 인터페이스(interface) (ft. Intersection) javascript에는 지원하지 않던 인터페이스에 대해 알아보자. Typescript에서 인터페이스는 타입 체크를 한다거나, 클래스에 사용한다거나 등의 역할을 가지고 있다. 몇 가지 특징과 사용법에 대해 알아보자. 1. 타입 체크용 인터페이스 여기서의 인터페이스는 typescipt에서 제공하는 type 이랑 동일한 역할을 한다. interface Point { x: number; y: number; } function printCoord(pt: Point) { console.log("The coordinate's x value is " + pt.x); console.log("The coordinate's y value is " + pt.y); } let point: Point = { x: 100, y: .. 2022. 6. 8.
[TypeScript] 클래스(Class) 기존에 모던 javascript에서도 클래스가 있다는 것을 알고 있을 것이다. (모른다면 아래 게시글을 보고 어느 정도 익혀 오자) [ES6+] 클래스(Class)문법에 대하여 [ES6+] 클래스(Class)문법에 대하여 ES6부터는 자바스크립트 또한 Class문법을 사용할 수 있게 되었다. 자바스크립트에서의 Class는 함수라는 것을 알아두고 클래스(Class)문법에 대해 하나씩 알아가보자. 1. 클래스(Class) 정의 1-1. 클래 mine-it-record.tistory.com 이번 게시글에서는 Typescript가 지원하는 클래스는 역시 기반이 Javascript이기 때문에 Typescript에서 만의 고유한 확장 기능에 대해서만 정리하고자 한다. 1. 클래스 정의와 접근제한자 우선 접근 제한자.. 2022. 6. 8.
[JavaScript] element.(after/before) - 특정 element 앞뒤로 요소 추가 및 이동하기 after(), before() 메서드는 말 그대로 특정 element의 앞뒤로 요소를 추가하거나 이동시켜주는 메서드이다. 이전 게시글에서 element.insertAdjacentElement() 메서드에 대해 정리했었는데, [JavaScript] element.insertAdjacentElement() - 특정 element를 기준으로 노드 삽입하기 및 이동하기 (ft. insertAd insertAdjacentElement() 메서드는 특정 element를 기준으로 앞뒤, 자식으로의 처음, 마지막 위치로 노드 삽입을 하게 도와주는 메서드이다. ▷ 구문 targetElement.insertAdjacentElement(position, element) po.. mine-it-record.tistory.c.. 2022. 6. 7.
[JavaScript] element.insertAdjacentElement() - 특정 element를 기준으로 노드 삽입하기 및 이동하기 (ft. insertAdjacentHTML, insertAdjacentText) insertAdjacentElement() 메서드는 특정 element를 기준으로 앞뒤, 자식으로의 처음, 마지막 위치로 노드 삽입 또는 이동을 하게 도와주는 메서드이다. ▷ 구문 targetElement.insertAdjacentElement(position, element) position: 상대적인 위치를 나타내는 문자열로, 다음 문자열 중 하나만 사용 가능하다.(대소문자 구분을 하지 않는다.) beforebegin: targetElement의 앞 afterbegin: targetElement 자식 요소의 첫 번째 위치 beforeend: targetElement 자식요소의 마지막 위치 afterend: targetElement의 뒤 element: 특정 elemet를 기준으로 poisiton에 알.. 2022. 6. 7.
반응형
TOP