Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1

$ hexo new "My New Post"

More info: Writing

Run server

1

$ hexo server

More info: Server

Generate static files

1

$ hexo generate

More info: Generating

Deploy to remote sites

1

$ hexo deploy

More info: Deployment

• http://www.2ality.com/2014/09/es6-modules-final.html 를 번역한 글입니다.

ES6의 module 문법 표준에 따르면 export 는 2가지 종류가 있다. named exports (모듈 당 여러 개의 export)와 default exports (모듈 당 하나의 export)가 그것이다.

named exports

하나의 module 파일이라도 이 중 일부만 필요로 하는 경우가 있을 수 있다. 예를 들어 하나의 함수 혹은 하나의 클래스 만 사용하고 싶은 경우이다. 이런 때 es6 module 문법은 다음과 같은 형식으로 이를 가능하게 한다.

1
2
3
4
5
6
7
8
9
10
11
12
13

//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

//------ main.js ------
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

또한 이런 형식도 가능하다.

1
2
3
4

//------ main.js ------
import * as lib from 'lib';
console.log(lib.square(11)); // 121
console.log(lib.diag(4, 3)); // 5

default exports

node 개발자는 변수 하나만 export 하는 등의 방식이 빈번히 사용되는데, front end 개발자의 경우는 constructor나 class를 export 하는 경우가 많다. 이런 경우 하나의 module이 하나의 export만 갖는 경우가 되는데 이런 때 사용할 수 있는 것이 default exports 이다.

1
2
3
4
5
6
7
8
9
10
11
12

//------ myFunc.js ------
export default function () { ... };

//------ main1.js ------
import myFunc from 'myFunc';
myFunc();
//------ MyClass.js ------
export default class { ... };

//------ main2.js ------
import MyClass from 'MyClass';
let inst = new MyClass();

es6에선 _가 default exports를 의미하며, each나 forEach는 named exports를 의미한다. 따라서 다음과 같이 default exports와 named exports를 동시에 얻는 방법도 가능하다.

1
2
3
4
5
6
7
8
9
10
11
12

//------ underscore.js ------
export default function (obj) {
    ...
};
export function each(obj, iterator, context) {
    ...
}
export { each as forEach };

//------ main.js ------
import _, { each } from 'underscore';
...

React를 사용하다 보면 immutable 이라는 단어를 많이 보게 됩니다.

pure function으로 previous state와 action으로 next state를 생성하는 과정에서 이전 상태의 일부 값을 변경하는 것이 아니라 완전히 새로운 객체를 생성해 내게 됩니다.

ReactElement 코드를 보면 다음과 같은 구문을 볼 수 있는데, 이는 Array를 복사한 새로운 Clone array를 만들어 내는 역할을 합니다.

var shadowChildren = props.children.slice(0);

이렇게 복사된 객체가 이전과 동일한지 아래와 같이 확인해 볼 수 있다.

참고) http://hacks.mozilla.or.kr/2015/09/es6-in-depth-symbols/

기존 JS는 다음과 같이 6가지 타입을 가지고 있었습니다.

• Undefined
• Null
• Boolean
• Number
• String
• Object

Symbol은 7번째로 추가된 (문자열이나 객채가 아닌) 어떠한 값을 갖는 새로운 타입 입니다.

다음 코드는 Symbol이 활용될 수 있는 경우를 나타내는 예제 입니다.

예제 에서는 object 에 annotation 용도로 flag를 설정하고자 합니다.

isMoving flag는 Symbol을 사용해 지정했고, isHaving flag는 일반적인 boolean property를 사용해 지정 했습니다.

결과를 비교해 보면 Object.keys() 에서 isMoving은 보이지 않지만 isHaving은 key로 나타납니다.

일반적으로 이렇게 property 삽입으로 변형된 array의 경우 Object.keys()나 for-in loop에 의도치 않게 key로 해석되어 나타나기 때문에 권장되는 방법이 아닙니다.

Symbol은 이런 경우 key로 해석되지 않기 때문에 안전하게 사용이 가능합니다.