꿀벌개발일지

발생일: 2015.05.14 키워드: Module, 모듈, import, export, module.exports, export default 내용: ES6에는 언어 레벨에서 모듈을 정의할 수 있는 방법을 제공한다. `import`와 `export` 키워드로 외부 모듈을 가져오거나 설정할 수 있으며, 비동기 모델을 포함하고 있다. (모듈이 로드될 때까지 실행되지 않는다) 하지만, 2015년 5월 현재, 모든 브라우저에 구현되어 있지 않다. ES6의 모듈 시스템을 사용하려면, ES6 Module Transpiler, Babel, Traceur 등과 같은 트랜스파일러를 사용해야 한다. 먼저, 모듈을 정의하는 `export` 문법은 아래와 같다. export name1, name2, ..., nameN; ex..

http://ohgyun.com/586 에 이어서... Immutable은 React와 효과적으로 동작할 수 있다. React 에선, `shouldComponentUpdate()`메서드를 오버라이드하면, 컴포넌트를 다시 렌더링할 것인지를 판단할 때 훅으로 동작한다. 렌더링 전에 이전 값을 캐시해뒀다가(momoize) 비교하면, 불필요한 렌더링을 효과적으로 걸러낼 수 있을 것이다. 기본값은 아래처럼 true 이다. 여기에 정말 값이 변경되었는지를 추가하면 좀 더 효율적으로 처리할 수 있는데, 대략 아래와 같은 코드일 것이다. 이 코드를 사용하는 믹스인이 바로 PureRenderMinxin 이다. 이 믹스인은 `shouldComponentUpdate()`를 오버라이드 했고, 현재/이전 값을 비교해서 값이 동..

http://ohgyun.com/585 에 이어서... 근데, 이걸 왜 사용해야 하나? 아직까진 자바스크립트에는 멀티스레드 개념이 없고, 동시성에 대한 처리도 필요없다. 하지만, 프로세서는 갈수록 빨라지고, 여러 개의 코어가 동시에 처리할 수 있게 되었다. 자바스크립트에서도 언젠가 멀티스레딩을 도입하게 되지 않을까? 이런 관점에서 Immutability 는 미래에 여러 문제를 해결할 수 있을 거라 본다. 그래. 미래는 미래로 두고, 지금 있는 문제점을 확인해보자. Mutable Object 는 시간과 값이 섞여있다. 예를 들면, 아래와 같은 식이다. 위 코드처럼, 시간이 지나면서 값을 변경하는데, 이전으로 돌아가도 값을 되돌릴 수 없다. 이 부분이 중요한 개념인데, Immutable data 는 이런 복..

발생일: 2015.05.13 키워드: React, Immutable, Pure Render Mixin, immutable-js 문제: Facebook의 Immutable-js 모듈에 대해 살펴보다가, 리액트 컨퍼런스(React.js Conf 2015)에서 Immutable 의 저자(Lee Byron)의 발표 영상을 봤다. 어떤 관점에서 라이브러리를 만들었고, 어떻게 구현했는지, 왜 필요한지에 대해 아주 잘 설명하고 있는 영상이다. 발표자의 말이 너무 빨라서 (ㅠ_ㅠ) 중간 중간 메모하며 들었는데, 내용을 정리해두면 다른 사람들도 도움을 얻을 것 같아 좀 더 손봤다. (주의: 오역이 많을 수 있다.ㅎㅎ) 해결책: 사이트: http://facebook.github.io/immutable-js/ 문서: htt..

발생일: 2015.05.12 키워드: class, 클래스, class expression, 클래스 선언, 클래스 표현식 내용: ES6에서는 `class` 키워드로 프로토타입 기반의 상속을 간편하게 구현할 수 있다. 아래 코드를 보면 이해할 수 있다. // 클래스를 선언할 수 있다. class Shape { // 기본적으로 클래스의 body는 strict mode 로 실행된다. // 생성자 constructor(width, height) { this.width = width; this.height = height; } // 멤버 메서드 getArea() { return 0; } // 스태틱 메서드 static getType() { return 'Shape'; } // 클래스 문법으로 스태틱 멤버를 정의할 ..

발생일: 2015.05.10 키워드: Object Literals, Object Shorthand, 객체 리터럴 내용: ES6에는 객체를 좀 더 간결하게 작성할 수 있는 구문이 추가됐다. 글로 설명하는 것보다는 아래 코드를 보는 게 훨씬 이해하기 쉽다. // 변수명으로 객체를 생성 (Chrome 42+) var a = 'foo'; var b = 'bar'; var obj = { a, b }; obj.a; //-> 'foo' obj.b; //-> 'bar' // ES5의 getter 와 setter 도 여전히 동작한다. var obj = { get firstChar() { return this.name[0]; } }; obj.name = 'foo'; obj.firstChar; //-> 'f' // 메서드도..

발생일: 2015.05.10 키워드: arrow function expression, fat arrow function 내용: ES6에서는 익명함수를 화살표(`=>`)로 축약해 표현할 수 있다. Arrow Function Expression 또는 Fat Arrow Function 이라고 부르며, 문법은 아래와 같다. ([param] [, param]) => { statements } param => expression param: 매개변수, 컴마로 구분하고 괄호로 싸서 호출한다. 파라미터가 한 개인 경우엔, 괄호를 생략해도 좋다. statements or expression 여러 구문은 중괄호(brace, { })로 감싸준다. 한 개의 표현식이라면 중괄호를 생략해도 된다. 코드 샘플을 보면 이해하기 쉽다..

발생일: 2015.05.11 키워드: const 내용: ES6에는 읽기 전용의 변수를 선언하는 용도로 `const` 키워드가 추가되었다. `let`과 마찬가지로 블럭 스콥으로 동작한다. 아래 코드를 보면 `const`의 동작 방식을 이해할 수 있다. // 읽기 전용으로 정의한다. const foo = 'foo'; foo = 'bar'; //-> 타입 에러가 발생한다. (Uncaught TypeError: Assignment to constant variable.) // 블럭 스콥으로 동작한다. (function () { const foo = 'outside'; if (true) { const foo = 'inside'; console.log(foo); //-> 'inside' } console.log(f..

발생일: 2015.05.11 키워드: let 내용: ES6에 변수를 선언하는 용도로 `let` 키워드가 추가됐다. 자바스크립트의 변수의 스콥은 기본적으로 함수 단위인데, `let`은 블럭 범위 내에서의 변수를 선언한다. 아래 코드를 보면 `let`의 동작 방식을 이해할 수 있다. // 블럭 스콥으로 동작한다. var x = 3; if (true) { let x = 5; console.log(x); //-> 5 } console.log(x); //-> 3 // for 구문에서 유용하게 사용할 수 있다. function iter() { for (let i = 0; i undefined } iter(); /..

발생일: 2015.05.10 키워드: EcmaScript 6, ES6 Transpiler, 6to5, Experimental JavaScript, Babel, Traceur 내용: ES6의 표준화 작업이 2015년 6월 경 마무리될 예정이라고 한다. 아직 표준화가 완료되지 않았지만, V8과 SpiderMonkey 등의 자바스크립트 엔진에서 이미 많은 부분을 구현하고 있다. 초기에는 node.js 나 io.js 에 ES6를 위한 컴파일 옵션이 존재했지만, 현재는 옵션 없이도 제공하는 기능들이 많다. 2015년 5월 현재 브라우저에서는 Firefox(Gecko)에서의 구현이 가장 빠른 것 같다. 크롬에서도 여러 기능을 제공하고 있으며, Expreimental JavaScript 옵션을 켜면 더 많은 기능을 ..