프로그래밍/JavaScript 17

TypeScript - 소개

출처 : https://poiemaweb.com/typescript-introduction TypeScript - Intro & Install | PoiemaWeb TypeScript 또한 AltJS의 하나로써 자바스크립트(ES5)의 Superset(상위확장)이다. C#의 창시자인 덴마크 출신 소프트웨어 엔지니어 Anders Hejlsberg(아네르스 하일스베르)가 개발을 주도한 TypeScript는 Microsoft에서 2012년 발표한 오픈소스로 정적 타이핑을 지원하며 ES6(ECMAScript 2015)의 클래스, 모듈 등과 ES7의 Decorator 등을 지원한다. TypeScript는 ES5의 Superse poiemaweb.com 이 포스팅의 위 출처의 게시글을 공부하며 필기 하듯이 써놓은 내..

ECMA6 - 제너레이터

출처 : https://poiemaweb.com/es6-generator Generator | PoiemaWeb ES6에서 도입된 제너레이터(Generator) 함수는 이터러블을 생성하는 함수이다. 제너레이터 함수를 사용하면 이터레이션 프로토콜을 준수해 이터러블을 생성하는 방식보다 간편하게 이터러블을 구현할 수 있다. 또한 제너레이터 함수는 비동기 처리에 유용하게 사용된다. poiemaweb.com 이 포스팅의 위 출처의 게시글을 공부하며 필기 하듯이 써놓은 내용이므로, 정확한 내용은 위의 출처에서 보는 것이 좋다. 1. 제너레이터란? ES6 에서 도입된 제너레이터 함수는이터러블을 생성하는 함수이다. 제너레이터 함수를 사용하면 이터레이션 프로토콜을 준수해 이터러블을 생성하는 방식보다 간편하게 이터러블을 ..

ECMA6 - iteration & for ... of

출처 : https://poiemaweb.com/es6-iteration-for-of Iteration & for...of | PoiemaWeb ES6에서 도입된 이터레이션 프로토콜(iteration protocol)은 데이터 컬렉션을 순회하기 위한 프로토콜(미리 약속된 규칙)이다. 이 프로토콜을 준수한 객체는 for...of 문으로 순회할 수 있고 Spread 연산자)의 피연산자가 될 수 있다. 이터레이션 프로토콜에는 이터러블 프로토콜(iterable protocol)과 이터레이터 프로토콜(iterator protocol)이 있다. poiemaweb.com 이 포스팅의 위 출처의 게시글을 공부하며 필기 하듯이 써놓은 내용이므로, 정확한 내용은 위의 출처에서 보는 것이 좋다. 1. 이터레이션 프로토콜 E..

ECMA6 - Symbol

출처 : https://poiemaweb.com/es6-symbol Symbol | PoiemaWeb Symbol은 ES6에서 새롭게 추가된 7번째 타입이다. Symbol은 애플리케이션 전체에서 유일하며 변경 불가능한(immutable) 원시 타입의 값이다. 주로 객체의 프로퍼티 키(property key)로 사용한다. poiemaweb.com 이 포스팅의 위 출처의 게시글을 공부하며 필기 하듯이 써놓은 내용이므로, 정확한 내용은 위의 출처에서 보는 것이 좋다. 1. Symbol이란? 자바스크립트는 6개의 타입을 가지고 있었다. - 원시타입 : Boolean, null, undefined, Number, String - 객체타입 : Object 심볼은 ES6에서 새롭게 추가된 7번째 타입으로 변경 불가능..

ECMA6 - Promise

출처 : https://poiemaweb.com/es6-promise Promise | PoiemaWeb Promise는 비동기 처리가 성공(fulfilled)하였는지 또는 실패(rejected)하였는지 등의 상태(state) 정보를 갖는다. Promise는 Promise 생성자를 통해 인스턴스화한다. Promise 생성자는 비동기 작업을 수행할 콜백함수를 인자로 전달받는데 이 콜백함수는 resolve와 reject 콜백함수를 인수로 전달받는다. poiemaweb.com 이 포스팅의 위 출처의 게시글을 공부하며 필기 하듯이 써놓은 내용이므로, 정확한 내용은 위의 출처에서 보는 것이 좋다. 1. 프로미스란? 자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 하지만 전통적인 콜백 패턴..

ECMA6 - Module

출처 : https://poiemaweb.com/es6-module Module | PoiemaWeb 모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 모듈은 세부 사항을 캡슐화하고 공개가 필요한 API만을 외부에 노출한다. ES6 모듈은 단 두 개의 키워드 export와 import를 제공한다. poiemaweb.com 이 포스팅의 위 출처의 게시글을 공부하며 필기 하듯이 써놓은 내용이므로, 정확한 내용은 위의 출처에서 보는 것이 좋다. 1. Introduction 모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 모듈은 세부사항을 캡슐화하고 공개가 필요한 API만을 외부에 노출한다. 일반적으로 모듈은 파일 단위로 분리되어 있으며 애플..

ECMA6 - Class

출처 : https://poiemaweb.com/es6-class Class | PoiemaWeb 자바스크립트는 프로토타입 기반(prototype-based) 객체지향형 언어다. 비록 다른 객체지향 언어들과의 차이점에 대한 논쟁들이 있긴 하지만, 자바스크립트는 강력한 객체지향 프로그래밍 능력들을 지니고 있다. 프로토타입 기반 프로그래밍은 클래스가 필요없는(class-free) 객체지향 프로그래밍 스타일로 프로토타입 체인과 클로저 등으로 객체 지향 언어의 상속, 캡슐화(정보 은닉) 등의 개념을 구현할 수 있다. 하지만 클래스 기반 언어에 익숙한 프로그래 poiemaweb.com 이 포스팅의 위 출처의 게시글을 공부하며 필기 하듯이 써놓은 내용이므로, 정확한 내용은 위의 출처에서 보는 것이 좋다. 자바스크립..

ECMA6 - 디스트럭처링

출처 : https://poiemaweb.com/es6-destructuring Destructuring | PoiemaWeb 디스트럭처링(Destructuring)은 구조화된 객체(배열 또는 객체)를 Destructuring(비구조화, 파괴)하여 개별적인 변수에 할당하는 것이다. 배열 또는 객체 리터럴에서 필요한 값만을 추출하여 변수에 할당하거나 반환할 때 유용하다. poiemaweb.com 이 포스팅의 위 출처의 게시글을 공부하며 필기 하듯이 써놓은 내용이므로, 정확한 내용은 위의 출처에서 보는 것이 좋다. 디스트럭처링은 구조화된 배열 또는 객체를 Destructuring 하여 개별적인 변수에 할당하는 것이다. 배열 또는 객체 리터럴에서 필요한 값만을 추출하여 변수에 할당하거나 반환할 때 유용하다. ..

ECMA6 - Enhanced Object property

출처 : https://poiemaweb.com/es6-enhanced-object-property Enhanced Object property | PoiemaWeb ES6에서는 객체 리터럴 프로퍼티 기능을 확장하여 더욱 간편하고 동적인 객체 생성 기능을 제공한다. poiemaweb.com 이 포스팅의 위 출처의 게시글을 공부하며 필기 하듯이 써놓은 내용이므로, 정확한 내용은 위의 출처에서 보는 것이 좋다. 1. 프로퍼티 축약 표현 ES5에서 객체 리터럴의 프로퍼티는 프로퍼티 이름과 프로퍼티 값으로 구성된다. 프로퍼티의 값은 변수에 할당된 값일 수도 있다. ES6에서는 프로퍼티 값으로 변수를 사용하는 경우, 프로퍼티 이름을 생략 할 수 있다. 이때 프로퍼티 이름은 변수의 이름으로 자동 생성된다. 2. 프..

ECMA6 - Extended Parameter Handling

출처 : https://poiemaweb.com/es6-extended-parameter-handling Extended Parameter Handling | PoiemaWeb Rest 파라미터는 Spread 연산자(...)를 사용하여 파라미터를 작성한 형태를 말한다. Rest 파라미터를 사용하면 인수를 함수 내부에서 배열로 전달받을 수 있다. poiemaweb.com 이 포스팅의 위 출처의 게시글을 공부하며 필기 하듯이 써놓은 내용이므로, 정확한 내용은 위의 출처에서 보는 것이 좋다. 1. 파라미터 기본값 ES5에서는 파라미터에 기본값을 설정할 수 없었다. 따라서 적절한 인수가 전달되었는지 함수 내부에서 확인할 필요가 있었다. 반면 ES6엣는 파라미터에 기본값을 설정하여 함수 내에서 수행하더 파라미터 ..