[Vue.js] Ch7 ECMAScript 2015

지금까지 HTML 파일에서 <script> 태그로 vue.js 라이브러리를 직접 참조하여 예제를 작성했다.

하지만 이 방법으로는 대규모 앱을 개발하기 힘들다. 대규모 앱을 개발하려면 SPA(Single Page Application) 구조여야 하는데, Vue.js 기반의 SPA 애플리케이션을 개발하려면 Vue Router, Vuex 등의 다양한 요소가 필요하다.

 

이들을 이용하기 위해서 ECMAScript2015나 Typescript 등을 사용해야 하는데, 이번 장에서는 ES2015 표기법에 대해 알아본다.

---

1. ES2015를 사용하기 위한 프로젝트 설정

Babel을 프로젝트에서 사용하기 위해 설정이 필요하다.

* Babel : 대표적인 트랜스파일러로서, ES2015, TypeScript 코드를 오래된 브라우저에서도 사용할 수 있는 하위 버전의 자바스크립트로 번역한다.

- npm init 명령어로 package 파일을 하나 만든다.

npm init 명령을 통해서 package.json 파일 생성

package.json 생성 완료

- yarn으로 babel-cli, babel-preset-env, babel-preset-stage-2 를 설치한다.

- 설치 완료가 되면 package.json 파일에 dependency가 추가된다.

Dependency 추가 완료

- yarn 패키저에 대한 자세한 사용법 : http://www.holaxprogramming.com/2017/12/21/node-yarn-tutorials 

 

- babel 명령문을 통해 ES2015 구문을 자바스크립트로 번역할 수 있다.

babel src -d build

---

2. let 과 const

 

2.1 let

ES2015가 등장하기 전까지의 var 키워드는 다음 두 가지 특징이 있다.

1. 호이스팅 : 실행컨텍스트가 만들어진 후에 var 키워드가 부여된 변수를 미리 생성하는 것

따라서, var 키워드로 변수를 중복 선언해도 오류가 발생하지 않는다.

2. 블록 단위의 스코프를 지원하지 않는다.

함수 단위의 스코프만 지원하고 {}로 묶여진 블록 내에서 선언한 변수는 별도의 스코프를 만들지 않는다.

 

ES2015에서는 이러한 문제를 해결하기 위해 let 키워드를 지원한다.

 

let 으로 변수 할당

트랜스파일한 결과

위와 같이 let 으로 msg 라는 변수를 두 번 할당한 것을 트랜스파일한 결과, _msg로 변경하여 이름 충돌을 피하도록 한것을 볼 수 있다.

 

2.2 const

const는 상수 기능을 제공한다. 즉 한번 값이 주어지면 다시 변경할 수 없다.

 

* var 는 변수의 중복 선언을 허용하지만, let과 const는 중복 선언을 허용하지 않는다.

 

3. 기본 파라미터와 가변 파라미터

 

3.1 기본 파라미터를 이용해 함수 파라미터의 기본값을 지정할 수 있다.

function addContact(name, mobile,
    home = "없음",
    address = "없음",
    email = "없음") {
    var str = `name=${name}, mobile=${mobile}, home=${home}, 
address=${address}, email=${email}`;
    console.log(str);
}

addContact("홍길동", "010-222-3331")
addContact("이몽룡", "010-222-3331", "02-3422-9900", "서울시");

3.2 가변 파라미터는 여러 개의 파라미터 값을 배열로 받을 수 있다.

function foodReport(name, age, ...favoriteFoods) {
    console.log(name + ", " + age);
    console.log(favoriteFoods);
}
// ...으로 시작하는 파라미터가 배열로 받아진다.

foodReport("이몽룡", 20, "짜장면", "냉면", "불고기");
foodReport("홍길동", 16, "초밥");

배열로 받아지는 ... 파라미터

4. 구조분해 할당(destructing assignment)

배열, 객체의 값들을 추출하여 여러 변수에 할당할 수 있는 기능을 제공한다.

let arr = [10,20,30,40];
let [a1,a2,a3] = arr; // 10,20,30이 순서대로 할당된다.
console.log(a1, a2, a3); // 10 20 30

let p1 = {name:"홍길동", age:20, gender:"M"};
let { name:n, age:a, gender } = p1;
console.log(n,a,gender);

구조분해 할당은 함수의 파라미터에도 사용할 수 있다.

function addContact({name, phone, email="이메일 없음", age=0}) {
    console.log("이름 : " + name);
    console.log("전번 : " + phone);
    console.log("이메일 : " + email);
    console.log("나이 : " + age);
}

addContact({
    name : "이몽룡", 
    phone : "010-3434-8989"
})

5. 화살표 함수 (Arrow function)

 

화살표 함수와 기본 함수 표현식의 차이점은 this 의 의미에 있다.

1) 기본 함수 표현식의 this

function Person(name, yearCount) {
    this.name = name;
    this.age = 0;
    var incrAge = function() {
            this.age++; // window 객체를 가르키게된다.
        }
        // var incrAge = () => {
        //     this.age++;
        // }
    for (var i = 1; i <= yearCount; i++) {
        incrAge();
    }
}
var p1 = new Person("홍길동", 20);
//--this.age는 0이 출력됨.
console.log(p1.name + "님의 나이 : " + p1.age);

window 객체로 바인됭 되는 this

자바스크립트에서 this 는 호출하는 문맥에 의해 좌우된다. 문맥을 넘어서서 this를 연결하려면 bind, apply, call 등의 함수 수준의 메서드를 이용해야 한다.

incrAge.apply(this);

2) 화살표 함수의 this

화살표 함수 내부에서 this로 그대로 사용한다.

var incrAge = () => {
      this.age++;
}

6. 새로운 객체 리터럴

객체의 속성을 작성할 때 변수명과 동일하다면 생략할 수 있다.

var name = "홍길동";
var age = 20;
var email = "gdhong@test.com";

//var obj = { name: name, age: age, email: email };
var obj = { name, age, email }; // 객체 속성명 생략가능
console.log(obj);

새로운 매서드 표기법 제공

let p1 = {
    name : "아이패드",
    price : 200000,
    quantity : 2,
    // 기존 메서드 표기법
    order : function() {
        if (!this.amount) {
            this.amount = this.quantity * this.price;
        }         
        console.log("주문금액 : " + this.amount);
    },
    // 새로운 메서드 표기법
    discount(rate) {
        if (rate > 0 && rate < 0.8) {
            this.amount = (1-rate) * this.price * this.quantity; 
        }
        console.log((100*rate) + "% 할인된 금액으로 구매합니다.");
    }
}
p1.discount(0.2);
p1.order();

7. 템플릿 리터럴

역따옴표로 묶여진 문자열에서 템플릿 대입문(${})을 이용해 동적으로 문자열을 끼워넣어 구성할 수 있다.

var d1 = new Date();
var name = "홍길동";
var r1 = `${name} 님에게 ${d1.toDateString() }에 연락했다.`; // 변수 뿐만 아니라 함수 호출 구문도 사용할 수 있다.
console.log(r1);

var product = "갤럭시S7";
var price = 199000;
var str = `${product}의 가격은
       ${price}원 입니다.`;
console.log(str);

8. 컬렉션

자바스크립트의 배열도 List 형태의 컬렉션이기는 하지만 set, map 형식의 데이터로 사용하기에는 불편함이 있다.

(필자는 그래서 수기로 group by function을 만든적이 있다.. ㅡㅜ)

 

ES2015 에서는 Set, Map, WeakSet, WeakMap 과 같은 컬렉션을 제공한다.

 

9. 클래스

자바스크립트에서는 클래스가 제공되지 않아 대부분 함수를 이용해 유사 클래스를 만드는 방법을 사용할 수 밖에 없었다.

ES2015에서는 클래스를 지원한다. 다른 프로그래밍 언어의 클래스와 유사하게 정적 메서드(Static 메서드), 인스턴스 메서드(Instance Method), 생성자(Constructor), 상속 모두 지원한다.

 

10. 모듈

자바스크립트에서는 <script> 태그로 js 파일을 참조하는 정도를 의미했지만 ES2015에서는 파일 단위로 import , export가 가능하다.

모듈 : 독립성을 가진 재사용 가능한 코드 블록

import calc2 from './utils/utility3'; // 해당 경로에있는 calc2 메서드 export 를 지정해준다.

console.log(calc2.add(4,5));
console.log(calc2.multiply(4,5));

11. Promise

ES2015에서는 Primise 객체를 지원해 비동기 처리를 좀 더 깔끔하게 수행할 수 있다.

var p = new Promise(function(resolve, reject) {
    setTimeout(function() {
        var num = Math.round(Math.random()*20);
        var isValid = num % 2;
        if (isValid) { resolve(num); }
        else { reject(num); }
    }, 2000);
});

p.then(function(num) {
    console.log("홀수 : " + num);
}).catch(function(num) {
    console.log("짝수 : " + num);
});

console.log("20까지의 난수중 홀수/짝수?");
console.log("결과는 2초후에 나옵니다.!!");

12. 전개 연산자 (Spread Operator)

가변 파라미터 (... 연산자)는 개별 값을 나열하여 함수의 인자로 전달하면 함수 내부에서 배열로 사용할 수 있도록 한다. 전개 연산자는 배열이나 객체를 ... 연산자와 함께 객체리터럴, 배열리터럴에서 사용하면 분해된 값으로 전달한다.

let obj1 = { name:"박문수", age:29 };
let obj2 = { ...obj1 };
let obj3 = { ...obj1, email:"mspark@gmail.com" };

console.log(obj2);
console.log(obj3);  
console.log(obj1 == obj2);      //false

let arr1 = [ 100, 200, 300 ];
let arr2 = [ "hello", ...arr1, "world"]; // 배열이 아니라, 독립적인 값,객체로 인식된다.
console.log(arr2);

100,200,300이 배열이 아닌, 값으로 들어간다

이와 같이 기존 객체의 속성이나 배열의 요소들을 포함하여 새로운 객체, 배열을 생성하고자 할 때 사용된다.

 

ES2015에 관한 내용은 대규모 웹 애플리케이션을 개발하기 위해 꼭 필요한 내용이므로 잘 알아두어야한다.

http://hacks.mozilla.or.kr/cateogry/es6-in-depth/ 

Mozilla 웹 기술 블로그