꿀벌개발일지

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 옵션을 켜면 더 많은 기능을 ..

발생일: 2015.05.10 키워드: Flux, React, Stores, Actions, Components, 리액트, 플럭스, 스토어, 액션 문제: 이번에 영어사전 익스텐션을 Angular에서 Flux + React로 변경하려고 한다. Flux 아키텍처의 사용 패턴이 아직 명확하게 정리되진 않은 것 같아서, 어떤 패턴이 좋을 지 계속 살펴보고 있다. 여전히, 스토어의 역할을 어느 범위까지 잡을지, 어떤 범위까지의 작업을 액션으로 나눌지 좀 애매하다. 아직 좀 더 고민해봐야겠지만, 일단 지금까지 살펴본 내용으로, 아키텍처를 잡을 때 몇 가지 유용한 팁들을 정리해봤다. 해결책: Stores - 한 개의 스토어엔 한 가지 타입만 갖도록 한다. 애플리케이션 내에서는 해당 타입을 갖는 스토어는 한 개만 되도록..

발생일: 2015.04.15 키워드: IE8, getBoundingClientRect 문제: `Element#getBoundingClientRect()`로 엘리먼트의 사이즈를 가져와 처리하는 코드를 작성했는데, IE8에선 동작하지 않는다. 왜일까? 해결책: `getBoundingClientRect()` 의 width 와 height 속성은 IE9부터 지원한다. 또한, IE8 이하에서 getBoundintClientRect() 의 리턴된 rect 객체는 읽기 전용이기 때문에, 다른 속성을 할당하는 것만으로도 오류가 발생한다. rect.height = 100; //—> IE8에서 오류 발생 편의를 위해 아래와 같은 유틸리티를 만들어서 사용하는 방식으로 처리했다. var getBoundingClientRect..