ECMAScript 6 (15) 썸네일형 리스트형 Babel, Webpack을 이용해 ES6 개발환경 구축해보기 Babel, Webpack을 이용해 ES6 개발환경 구축해보기이번 포스팅은 ECMAScript6의 마지막 포스팅이다.마지막인 만큼 화이팅! 현재 브라우저는 ES6를 완벽하게 지원하지 않기 떄문에 따로 개발환경을 구축해야 하는데 바로 Babel과 Webpack을 이용한다.#1 Babel CLI 설치Babel은 트랜스파일러로서 ES6를 ES5 이하의 버전으로 트랜스파일링하는 역할을 한다. npm을 사용하여 Babel CLI를 로컬로 설치한다.설치가 완료된 후 package.json 파일은 아래와 같다. (불필요한 파일들은 삭제!) { "name": "es6-project", "version": "1.0.0", "devDependencies": { "babel-cli": "^6.26.0" } }#2 .babe.. 모듈 모듈#1 모듈이란?모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 뜻한다. 모듈은 세부 사항을 캡슐화 하고 공개가 필요한 API만을 외부에 노출한다. 모듈은 애플리케이션에 분리되어 개별적으로 존재하다가 애플리케이션의 로드에 의해 비로소 애플리케이션의 일원이 된다. 또한 기능별로 분리되어 작성되므로 코드의 단위를 명확히 분리하여 애플리케이션을 구성할 수 있고 재사용성이 좋아 개발의 효율성과 유지보수성을 높일 수 있다. ES6의 모듈은 단 두 개의 키워드 export와 import를 제공한다.#2 export모듈은 독립적인 파일 스코프를 갖기 때문에 모듈 안에 선언한 모든 것들은 기본적으로 해당 모듈 내부에서만 참조가 가능하다. 만약 모듈 안에 선언한 항목을 외부에 공개하여 다른 .. 제너레이터 제너레이터ES6에서 도입된 제너레이터는 함수 블록을 한 번에 실행하지 않고 실행을 일시 중지 했다가 필요한 시점에 다시 시작할 수 있는 함수다.제너레이터는 제너레이터 객체를 반환하며 반환된 객체는 순회 가능한 값이다.즉, 제너레이터는 순회 가능한 값을 생성하는 함수이며, 이터러블의 구현과 비동기 함수의 호출 차단 등에 유용하다.#1 제너레이터 함수 생성제너레이터 함수는 function* 키워드로 선언한다. 그리고 하나 이상의 yield 구문을 포함한다. // 제너레이터 함수 선언 : 함수 선언식 function* getFunc() { var index = 0; while (index < 3) { yield index++; } } 제너레이터 함수는 일반 함수처럼 함수 선언식, 함수 표현식, 메소드로 선언할.. Symbol Symbol1997년 자바스크립트가 ECMAScript로 처음 표준화횐 이래로 JS는 6개의 타입(자료형)을 가지고 있다. ● 기본 자료형 : Boolean, null, undefined, Number, String ● 객체형 : Object Symbol은 ES6에서 새롭게 추가된 7번째 타입이라고 할 수 있다.Symbol은 애플리케이션 전체에서 유일하며 변경 불가능한 기본 자료형 값이며 주로 객체의 프로퍼티 키로 사용한다.#1 Symbol 생성Symbol은 Symbol() 함수로 생성한다. 이때 생성된 Symbol은 객체가 아니라 값이다. let mySymbol = Symbol(); console.log(mySymbol); // Symbol() console.log(typeof mySymbol); //.. 이터레이션 프로토콜 & for-of 루프 이터레이션 프로토콜 & for-of 루프#1 이터레이션 프로토콜ES6에는 이터러블과 이터레이터를 정의한 이터레이션 프로토콜이 추가되었다.* 이터러블 : 이터러블은 순회 가능한 자료구조이다. Symbol.iterator를 프로퍼티 키로 사용한 메소드를 구현하는 것에 의해 순회 가능한 자료구조인 이터러블이 된다. * 이터레이터 : Symbol.iterator를 프로퍼티 키로 사용한 메소드는 이터레이터를 반환한다. 이터레이터는 순회 가능한 자료구조인 이터러블의 요소를 탐색하기 위한 포인터로서 next() 메소드를 갖는 객체이다. next() 메소드는 value, done 프로퍼티를 갖는 객체를 반환하며 이 메소드를 통해 이터러블 객체르 순회할 수 있다. 이터레이션 프로토콜은 이터레이터의 next() 메소드를 .. 프로미스 프로미스자바스크립트는 비동기 처리를 위해 하나의 패턴으로 콜백 함수를 사용한다. ES6에서 비동기 처리를 위한 패턴으로 프로미스를 도입했다.#1 콜백 헬콜백 헬은 비동기 처리를 위해 콜백 패턴을 사용하면 처리 순서를 보장하기 위해 여러 개의 콜백 함수가 네스팅(중첩)되어 복잡도가 높아지는 현상을 말한다. 콜백 헬은 코드의 가독성을 나쁘게 하며 실수를 유발하는 원인이 된다. 아래는 콜백 헬이 발생하는 전형적인 사례이다. step1(function(value1) { step2(value1, function(value2) { step3(value2, function(value3) { step4(value3, function(value4) { step5(value4, function(value5) { // va.. 클래스 -2 클래스 -2저번 클래스 -1편에 이어 -2편을 포스팅하도록 하겠습니다. #5 호이스팅클래스는 let, const와 같이 호이스팅되지 않는 것처럼 동작한다. 즉, class 선언문 이전에 클래스를 참조하면 참조 에러가 발생한다. const qoo = new Qoo(); // ReferemceError : Qoo is not defined class Qoo {} 자바스크립트는 ES6의 class를 포함하여 모든 선언을 호이스팅한다. 하지만 클래스는 스코프의 선두에서 class의 선언문에 도달할 때까지 "일시적 사각지대"에 빠진다. 따라서 class 선언문 이전에 클래스를 참조하면 참조 에러가 발생하는 것이다. ES6의 class도 함수이다. 다만, function 키워드로 선언한 함수 선언식고 ㅏ같은 방식으.. 클래스 -1 클래스 -1 ES6의 클래스는 기존 프로토타입 기반 객체지향 프로그래밍보다 클래스 기반 언어에 익숙한 프로그래머가 보다 빠르게 학습할 수 있는 단순명료한 새로운 문법을 제시하고 있다.사실 클래스도 함수이다. 그럼 바로 클래스에 대해 알아보자. #1 클래스 정의 ES6의 클래스는 class 키워드를 사용하여 정의한다.Person 생성자를 클래스로 정의해 보자. class Person { constructor(name) { this._name = name; } sayHi() { console.log(`Hi! ${this._name}`); } } const me = new Person('Lee'); me.sayHi(); // Hi! Lee console.log(me instanceof Person); // t.. 이전 1 2 다음
