Lake

ECMA Script

JavaScript의 표준 명세

Netspace에 탑재되었던 JavaScript 구현체를 ECMA(European Computer Manufacturer's Association)라는 단체에서 표준화한 것입니다.

이 표준은 1997년에 처음 제정되어 계속 발전하고 있는 중입니다.

ES2015, 그 이후

ES5의 다음 버전부터는 해당 버전의 공개된 연도를 버전 번호로 사용하고 있습니다.

즉, ES5의 다음 버전의 이름은 ES6가 아니라 ES2015입니다.

다만 ES2015라는 이름이 확정되기 전까지는 ES5의 다음 버전이라는 의미에서 ES6라는 이름이 널리 사용되었고,

아직까지도 ES6라는 이름이 사용되는 경우가 있습니다.

하지만 정식 명칭은 ES2015라는 사실을 기억하세요.

ES2015에서 엄청나게 많은 문법과 기능(클래스, 모듈, 분해대입, 템플릿 문자열, 블록 스코프, 반복자, 프록시 등등...)이 추가되고,

Node.js등 웹 브라우저 외에도 JavaScript를 구동할 수 있는 구동 환경의 종류가 많아지면서,

이제 JavaScript는 Python 등 다른 범용 프로그래밍 언어와 비교해도 전혀 뒤쳐지지 않는 범용 프로그래밍 언어가 되었습니다.

ES2015부터는 매년 새로운 버전의 ECMAScript가 공개되고 있습니다.

최신 명세는 이 곳에서, 브라우저 별 기능 개발 현황은 이 곳에서 확인해볼 수 있습니다.

ES2015 문법과 기능

변수 (let, const)

laker.tistory.com/46

화살표 함수 (Arrow Function)

laker.tistory.com/47

나머지 매개변수 (Rest Parameters)

laker.tistory.com/49

분해대입 (Destructuring Assignment)

laker.tistory.com/61

Symbol

laker.tistory.com/62

Symbol

심볼은 ES2015에서 도입된 새로운 원시 타입입니다.

Symbol 내장 함수를 통해 새 심볼을 생성할 수 있습니다.

const sym = Symbol();
console.log(typeof sym); // symbol
console.log(sym); // Symbol()

Symbol함수에 문자열을 넘겨서, 해당 심볼에 대한 설명을 포함한 심볼을 생성할 수 있습니다.
이 때 넘겨지는 문자열은 그저 심볼의 설명일 뿐이므로, 심볼의 비교 연산에 영향을 주지 않습니다.
즉, 어떤 문자열이 인수열에 들어오는 지와 상관없이 새로 생성된 심볼은 다른 모든 심볼과 다른 것으로 취급됩니다.

console.log(Symbol('my symbol')); // Symbol(my symbol)
console.log(Symbol('my symbol') === Symbol('my symbol')); // false
console.log(Symbol() === Symbol()); // false

심볼은 객체의 속성 키로 사용하기로 위해 만들어졌습니다. 아래와 같이 대괄호 표기법을 통해 심볼을 객체의 속성 키로 사용할 수 있습니다.

const mySymbol = Symbol('my symbol');

const obj = {
    [mySymbol]: 'hello'
};

console.log(obj); // { [Symbol(my symbol)]: 'hello' }

내장 심볼(well-known symbol)을 객체의 속성 키로 사용하면, 특정 상황에서의 객체의 동작 방식을 마음대로 바꿀 수 있습니다.

• Symbol.hasInstance : 객체가 instanceof 연산자의 피연산자로 왔을 때의 동작을 바꿉니다.
• Symbol.isConcatSpreadable : 객체가 Array.prototype.concat 메소드의 인수로 넘겨질 때의 동작을 바꿉니다.
• Symbol.iterator : 객체가 String.prototype.match 메소드의 인수로 넘겨질 때의 동작을 바꿉니다.
• Symbol.match : 객체가 String.prototype.match 메소드의 인수로 넘겨질 때의 동작을 바꿉니다.
• Symbol.replace : 객체가 String.prototype.replace 메소드의 인수로 넘겨질 때의 동작을 바꿉니다.
• Symbol.search : 객체가 String.prototype.search 메소드의 인수로 넘겨질 때의 동작을 바꿉니다.
• Symbol.species : Array.prototype을 상속받은 객체에 대해 Array.prototype.map 등의 메세드를 호출할 때, 반환되는 객체의 생성자를 지정합니다.
• Symbol.split : 객체가 String.prototype.split 메소드의 인수로 넘겨질 떄의 동작을 바꿉니다.
• Symbol.toPrimitive : 객체가 원시 타입의 값으로 변환되어야 할 때, 정확히 어떤 값으로 변환되어야 하는 지를 지정합니다.
• Symbol.toStringTag : Object.prototype.toString() 메소드를 객체에 대해 직접 호출할 때의 동작을 바꿉니다.
• Symbol.unscopable : with 블록 안에서 어떤 속성을 참조할 수 있는지를 지정합니다.

분해대입 (Destructuring Assignment)

ES2015에서 배열과 객체 안에 들어있는 값을 쉽게 추출해낼 수 있는 문법이 추가되었습니다.

배열의 분해대입

다음과 같이, 변수의 선언과 동시에 배열의 요소를 해당 변수에 대입할 수 있습니다.

const [a, b, c] = [1, 2, 3];

console.log(a, b, c); // 1 2 3

만약 요소의 순서와 일치하는 변수가 좌측 목록에 들어있지 않으면, 해당 요소는 무시 됩니다.

// 여기서 `2`, `4`는 무시됩니다.
const [a, , c] = [1, 2, 3, 4];

console.log(a, c); // 1 3

이미 선언된 변수에 대해서도 분해대입을 할 수 있습니다.

let a, b;
[a, b] = [1, 2];

console.log(a, b); // 1 2

배열이 중첩되어 있으면, 해당 배열에 대해서도 분해대입을 할 수 있습니다.
이 때에는 등호의 좌측에서도 배열이 중첩된 것처럼 써주면 됩니다.

const [a, b, [c, d]] = [1, 2, [3, 4]];

console.log(a, b, c, d); // 1 2 3 4

객체의 분해대입

다음과 같이, 변수의 선언과 동시에 객체의 속성을 해당 변수에 대입할 수 있습니다.

const {a: prop1, b: prop2} = {a: 1, b: 2};

console.log(prop1, prop2); // 1 2

좌측 객체 표기에서 속성값 부분을 생략하면, 속성 이름 부분이 곧 새 변수의 이름이 됩니다.

const {a, b} = {a: 1, b: 2};

console,log(a, b); // 1 2

만약 어떤 속성의 이름과 같은 이름을 갖는 변수가 좌측에 들어있지 않으면, 해당 속성은 무시됩니다.

// 여기서 `b`는 무시됩니다.
const {a} = {a: 1, b: 2};

console.log(a); // 1

이미 선언된 변수에 대해서도 분해대입을 할 수 있습니다.

let a, b;
// 문장이 여는 중괄호(`{`)로 시작되면 이는 '블록'으로 간주되므로,
// 아래와 같이 분해대입을 할 때는 식 전체를 괄호로 둘러싸주어야 합니다.
({a, b} = {a: 1, b: 2});

console.log(a, b); // 1 2

객체가 중첩되어 있으면, 해당 객체에 대해서도 분해대입을 할 수 있습니다.
이 때에는 등호의 좌측에서도 객체가 중첩된 것처럼 써주면 됩니다.

const {a, b: {c}} = {a: 1, b: {c: 2}};

console.log(a, c); // 1 2 

배열과 객체가 함께 중첩되어 있는 경우에서도 분해대입이 가능합니다.

const {
    arr: [
        a, b, {
            c
        }
    ]
} = {
    arr: [
          1, 2, {
            c : 3
        }  
    ]
};

console.log(a, b, c); // 1 2 3

분해대입의 기본값

분해대입 시, 만약 좌측 변수의 위치에 해당하는 값이 우측의 배열 혹은 객체에 존재하지 않으면 거기에는 대입이 일어나지 않습니다.

let a, b, c;

[a, b, c] = [1, 2];

console.log(c); // undefined

이 때에 좌측 변수에 기본으로 대입될 값을 미리 지정해둘 수 있습니다.

// `c` 위치에는 대입될 값이 없으므로, 기본값인 `3`이 대신 사용됩니다.
let [a, b, c = 3] = [1 ,2];

console.log(c); // 3

매개변수에서의 분해대입

함수의 매개변수에서도 분해대입을 할 수 있습니다.

function func({prop, array: [item1, item2, item3 = 4}) {
    console.log(prop);
    console.log(item1);
    console.log(item2);
    console.log(item3);
}

// 1, 2, 3, 4가 차례대로 출력됩니다.
func({prop: 1, array: [2, 3]});

나머지 매개변수 (Rest Parameters)

ES2015에서 도입된 나머지 매개변수(Rest Parameters) 문법을 통해 똑같은 기능을 더 깔끔한 문법으로 구현할 수 있기 때문에, arguments는 더 이상 사용되지 않는 기능이 되었습니다.

function sum(...ns) {
    let result = 0;
    for (let item of ns) {
        result += item;
    }
    return result;
}

sum(1, 2, 3, 4); // 10

위의 예제와 같이, 매개변수 앞에 ...을 붙여주면, 해당 매개변수에 모든 인수가 저장됩니다.
arguments와는 달리 나머지 매개변수는 실제 배열이기 때문에, 배열의 메소드를 활용할 수 있습니다.

function sum(...ns) {
    // `for...of` 루프 대신에 `reduce` 메소드를 사용해서 합계를 구할 수 있습니다.
    return ns.reduce((acc, itme) => acc + item, 0);
}

sum(1, 2, 3, 4); // 10

단, ... 문법은 마지막 매개변수에서만 사용할 수 있습니다.

function printGrades(name, ...grades) {
    console.log(`${name} 학생의 점수는 ${grades.join(', ')} 입니다`);
}

printGrades('Mary', 96, 78, 68); // Mary 학생의 점수는 96, 78, 68 입니다.

아래와 같이 마지막 매개변수가 아닌 매개변수에 ... 문법을 사용하려고 하면 에러가 납니다.

function printGrades(name, ...grades) {
    console.log(`${name} 학생의 점수는 ${grades.join(', ')} 입니다`);
}
// SyntaxError: Rest parameter must be last formal parameter

사실 arguments 객체는 더 많은 기능을 포함하고 있지만,
여기에서 소개하지 않은 기능은 '주인 없는 this'와 함께 예전 버전 JavaScript의 좋지 않은 부분 중 하나이므로 사용하지 않는 것이 좋습니다.
그래서 어떤 기능이 있는지 궁금하시다면 MDN 문서를 참고하세요

화살표 함수 (Arrow Function)

함수 정의를 위한 새로운 표기법인 화살표 함수 (Arrow Function)은 ES2015에서 도입이 되었습니다.

// 여기에서 x + y 는 ** 바로 반환됩니다. **
const add = (x, y) => x + y;

// 바로 반환시키지 않고 function 키워드를 통한 함수 정의처럼 여러 구문을 사용하려면 curly barces({...}) 로 둘러싸주어야 합니다,
// ‘=>’ 다음 부분을 중괄호로 둘러싸면, 명시적으로 ‘return’ 하지 않는 한 아무것도 반환되지 않습니다.
const add = (x, y) => {
    const result = x + y;
    return result;
}

// 매개변수가 하나밖에 없다면, 매개변수 부분의 괄호를 쓰지 않아도 무방합니다.
const negate = x => !x;

화살표 함수는 표기법이 간단하기 때문에 익명 함수를 다른 함수의 인수로 넘길 때 주로 사용됩니다.

[1, 2, 3, 4, 5].filter(x => x % 2 === 0);

일반적인 함수와 화살표 함수는 표기법에서만 다른 것이 아니고, 몇 가지 미묘한 차이점이 있습니다.

이에 대해서는 아래에서 자세히 다룹니다.

화살표 함수(Arrow Function) 자세히 알아보기

화살표 함수(Arrow function)는 ES2015에서 도입된 새로운 유형의 함수입니다.

화살표 함수는 (매개변수 목록) => {함수 내용}과 같은 문법을 통해 정의할 수 있습니다.

const add = (x, y) => {
    return x + y;
}

const negate = (x) => {
    return !x;
}

다만, 특정 조건을 만족하는 화살표 함수는 조금 더 간결한 문법으로 정의할 수도 있습니다.

• 만약 화살표 함수의 매개변수가 하나라면, 괄호를 생략할 수 있습니다.
• 만약 화살표 함수의 내부가 하나의 구문으로 이루어졌다면, 중괄호를 생략할 수 있습니다. 이 때, 이 구문의 결과값이 곧 함수의 반환값이 됩니다.

이 성질을 이용해 위 코드를 더 짧게 작성할 수 있습니다.

const add = (x, y) => x + y;
const negate = x => !x;

function 구문으로 정의되는 함수와 비교했을 때, 화살표 함수는 문법 측면에서만 다른 것이 아니라 특별한 성질을 갖고 있습니다.

• 화살표 함수는 생성자로 사용될 수 없습니다. 따라서 prototype 속성을 갖고 있지 않습니다. 그리고 스스로의 new.target을 가지지 않습니다.
• 화살표 함수는 스스로의 this, arguments, super를 가지지 않습니다.
• 화살표 함수 내부에서 yield 키워드를 사용할 수 없습니다. 즉, 제너레이터로 사용될 수 없습니다.

여기서 스스로의 this를 가지지 않는다는 말은 함수 내부에서 this를 사용할 수 없다는 말이 아닙니다. 화살표 함수 내부에서 this를 사용하면, 그 this는 함수가 정의된 스코프에 존재하는 this를 가리킵니다. 이는 new.target, arguments, super 모두 마찬가지 입니다.

function Person(name) {
    this.name = name;
    this.getName = () => {
        // 여기에서 사용된 `this`는 '함수가 정의된 스코프', 즉 'Person 함수 스코프'에 존재하는 `this`를 가리키게 됩니다.
        return this.name;
    }
}

const mary = new Person('mary');
mary.getName(); // 'mary'

이런 성질 떄문에, 화살표 함수 내부에 있는 this는 엄격 모드의 영향을 받지 않습니다.

// 주의!
// 화살표 함수는 생성자로 사용될 수 없지만,
// 함수의 이름을 대문자로 시작하도록 했습니다.
const Person = (name) => {
    this.name = name;
}

Person('mary');
console.log(window.name); // mary

화살표 함수를 통해 this를 다룰 때 주의해야 할 점에 대해서 조금 더 알아보겠습니다.

화살표 함수는 스스로의 this를 갖지 않는다고 했습니다. 이 때문에,
화살표 함수에 대해 bind, call, apply 메소드를 호출해도 아무런 효과가 없습니다.

function Person(name) {
    this.name = name;
    this.getName = () => {
        // 여기에서 사용된 `this`는 `함수가 정의된 스코프`,
        // 즉 'Person 함수 스코프'에 존재하는 `this`를 가리키게 됩니다.
        return this.name;
    }
}

const mary = new Person('mary');

// `this`를 바꿔보려고 해도, 아무런 효과가 없습니다.
mary.getName.call({name: 'john'}); // 'mary'

그리고, 화살표 함수 내부에서 this를 사용하면 함수가 정의된 스코프에 있는 this 를 가르킨다고 했습니다.
즉, 화살표 함수 내부의 this는 화살표 함수가 정의된 문맥에 의해 결정됩니다.
function 구문으로 정의된 함수에 쓰이는 this가 어떻게 호출되는지에 의해 결정되는 것과는 다른 동작 방식을 보입니다.

const mary = {
    name: 'mary',
    getName: () => {
        return this.name;
    }
};

// 위의 화살표 함수는 전역 스코프에서 정의되었기 때문에, `this`는 전역 객체를 가리킵니다.
// `mary`의 메소드로 사용된다고 해도, 이 사실이 변하지 않습니다.
// 브라우저 환경의 전역 객체인 `window`는 `name`이라는 속성에 빈 문자열을 갖고 있기 때문에, 이 값이 대신 반환됩니다.
mary.getName(); // ''

이처럼, 객체의 속성 값에 메소드를 직접 정의할 때에는 화살표 함수를 사용해서는 안됩니다.

그러면 어떨때 화살표 함수를 사용하는게 좋을까요?

화살표 함수의 편리함은 함수를 다른 함수의 인수로 넘겨야 할 때 발휘됩니다.
함수를 받아서 호출하는 쪽에서 어떻게 호출하든, this 때문에 문제가 생길 일이 없습니다.
화살표 함수의 this는 '어떻게 정의되었는지'에 따라 결정되기 때문이죠 !

아래 코드를 실행해보시고, getName 메소드를 일반적인 함수 (function () {...)로 바꾸어서 결과가 어떻게 나오는지 관찰해보세요.

function Person(name) {
    this.name = name;
    this.getName = () => {
        return this.name;
    }
}

const mary = new Person('mary');

function printResult(func) {
    console.log(func());
}

// 화살표 함수로 정의된 메소드는 다른 함수의 인수로 넘겨도 아무런 문제가 없습니다!
printResult(mary.getName);

정리

function 구문으로 생성되는 함수가 단순한 함수 이외에 생성자나 제너레이터 등의 여러 기능까지 떠맡고 있는 반면에,
화살표 함수는 오직 함수 혹은 메소드로 사용되도록 만들어졌습니다.
그리고 어떻게 호출되더라도 this가 변하지 않고 문법이 간결하기 떄문에,
함수를 값으로 다루어야 하는 경우 (특히 함수를 다른 함수의 인수로 넘겨야 하는 경우) 에는 화살표 함수가 일반 함수 보다 편리한 경우가 많습니다.

ES2015에서 도입이된 let과 const에 대해 알아보려고합니다.

let은 변수를 선언할 때 쓰는 키워드, const는 재대입이 불가능한 변수로 선언할 때 쓰는 키워드 입니다.

let

let의 사용방법은 다음과 같습니다.

let seven = 7;

위에서는 7이라는 값에 seven이라는 이름을 붙이기 위해서 다음과 같이 선언과 동시에 대입을 했습니다.

물론 변수의 선언이 끝난 이후에 대입을 하거나, 이미 값이 대입되어 있는 변수에 다른 값을 대입할 수도 있습니다.

let eight;
eight = 8;
let seve = 7;
seven = 77;
seven = 777;

const

const로 변수를 선언할 때는 반드시 선언 시에 값을 대입해주어야 합니다.

값 없이 선언만 하게 되면 에러가 발생합니다. 또한 추후에 다른 값을 대입할 수 없습니다.

const notAssigned; // Uncaught SyntaxError: Missing initializer in const declaration

const assigned = 1
assigned = 2; // Uncaught TypeError: Assignment to constant variable.

let과 const 모두 함꺼번에 여러 개의 변수를 선언하는 문법을 지원합니다.

let one = 1, two = 2, nothing;
const three = 3, four = 4;

let과 const로 선언한 이름은 다시 선언될 수 없습니다.

let seven = 7;
let seven = 77; // Uncaught SyntaxError: Identifier ‘seven’ has already been declared

let과 const 중 무엇을 쓸 것인가?
항상 let 보다 const를 사용하는 것이 좋습니다.
let을 사용하면 의도치 않게 다른 값이 대입되어 버리는 일이 생길 수 있기 때문입니다.
정말로 재대입이 필요한 경우에만 let을 사용하는 것이 좋은 습관입니다.

Cloud9

Cloud9은 브라우저만으로 코드를 작성, 실행 및 디버깅할 수 있는 클라우드 기반 통합 개발 환경(IDE)입니다.

+ 참고자료

Cloud9 환경 만들기

AWS 사이트에 접속하여 콘솔 로그인을 합니다.

로그인 후 AWS 서비스 찾기에서 Cloud9 검색하여 이동해줍니다.

Your environments 영역에서 Create environment 버튼을 클릭

Name과 Description에 이름과 내용을 넣고 Next step 버튼을 클릭

개인 취향에 맞게 원하는 세팅으로 변경하셔도 되지만

저는 기본 세팅 그대로 두고 Next step 버튼을 클릭해보겠습니다.

지금까지 세팅한 정보를 확인한 후에 Create environment 버튼을 클릭하여 설치를 마무리합니다.

로딩 창이 사라지면 위와 같은 화면이 보이실 거예요.

Welcom 페이지는 종료시키고 아래 블로그를 참고하여 테스트를 해보시면 됩니다.

Window에서 PuTTy 설치 및 키생성

윈도우에서 EC2 인스턴스에 접속시 PuTTY가 필요합니다.

위 사이트를 접속하여 PuTTY를 다운받아봅시다.

사이트에 접속하여 Download it here. 클릭

Package files에서 PC환경에 맞게 다운로드를 합니다.

다운로드가 완료되면 바로 설치를 진행해봅시다.

PuTTYgen을 사용하여 프라이빗 키 변환

시작 메뉴에서 PuTTYgen을 선택합니다.

Type of key to generate(생성할 키 유형)에서 RSA를 선택합니다.

이전 버전의 PuTTYgen을 사용하는 경우 SSH-2 RSA를 선택합니다.

Load를 선택합니다.

기본적으로 PuTTYgen에는 확장명이 .ppk인 파일만 표시됩니다.

.pem 파일을 찾으려면 모든 유형의 파일을 표시하는 옵션을 선택합니다.

인스턴스를 시작할 때 지정한 키 페어의 .pem 파일을 선택하고 열기를 선택합니다. 

.pem 파일을 가져왔다는 알림이 PuTTYgen에 표시됩니다. 확인을 선택합니다.

Save private key(프라이빗 키 저장)을 선택하여 PuTTY에서 사용할 수 있는 형식으로 키를 저장합니다.

PuTTYgen에서 암호 없이 키 저장에 대한 경고가 표시됩니다. 예를 선택합니다.

키 페어에 사용한 것과 동일한 키 이름을 지정하고 저장을 선택합니다.

PuTTY가 자동으로 .ppk 파일 확장자를 추가합니다.

이제 개인 키가 PuTTY에 사용하기에 올바른 형식으로 되어 있으므로

PuTTY의 SSH 클라이언트를 사용하여 인스턴스에 연결할 수 있습니다.

PuTTY를 사용하여 인스턴스 접속

PuTTY를 시작합니다.

시작 메뉴에서 PuTTY를 선택합니다.

Amazon EC2 콘솔을 사용하여 인스턴스의 퍼블릭 DNS를 가져올 수 있습니다.

Amazon Linux 2 또는 Amazon Linux AMI의 경우 사용자 이름은 ec2-user입니다.

Host Name(호스트 이름) 상자에 user_name@public_dns_name를 입력합니다.

(DNS 대신에 퍼블릭 IP를 넣으셔도 접속이 가능합니다.)

Category > Connection으로 이동하여

180을 입력하여 3분마다 keepalive 데이터를 전송하도록 PuTTY를 구성합니다.

Category > Connection > Auth로 이동하여 Browse... 버튼을 클릭합니다.

조금전에 생성한 .ppk 파일을 선택한 다음 열기를 선택합니다.

Session으로 이동하여 세션이름 입력 후 Save 버튼을 클릭합니다.

이 인스턴스에 처음 연결한 경우 PuTTY에서 연결하려는 호스트를 신뢰할 수 있는지

묻는 보안 알림 대화 상자가 표시됩니다. 예를 눌러줍니다.

드디어 접속 완료 !!

+ 참고자료