블로그 이미지
윤영식
Frontend Application Architecter, Full Stacker, KnowHow Dispenser and Bike Rider

Publication

Statistics Graph

Recent Comment

2016.04.08 18:54 Angular/Concept

Angular2 또는 최신 라이브러리를 읽기 위해서는 ES2015 (ES6)에 대한 기본적인 이해가 필요하다. 모질라의 Depth in ES6 번역글과 S65 페북모임에서 얻은 지식을 한 페이지로 정리해 본다. 






let 과 const


기본 var는 함수에 대한 scope(스코프)만을 갖는다. for, {} 블록에 대한 스코프가 없다. var의 대체제가 let 이다. 

  - let은 블럭을 기준으로 스코프를 결정한다. block-scoped

  - 글로벌 let은 없다. 즉 window.xxx 접근이 안된다. 어디간의 블럭안의 스코프에 속한다. 

  - for (let x...) 루프구문에서 x 변수를 새로 바인딩 한다. 

  - let 변수를 선언 전에 참조하는 것은 에러이다. 

  - let, var 충돌시에는 ES2015 모듈패턴을 사용해서 let으로 전환한다. 


const는 최초 값을 할당한 후 재 할당 할 수 없다. 단, 객체의 속성은 가능하다. 변수 중에 불변의 값을 갖는 것은 모두 const로 할당한다. 재 할당이 안된다는 것 외에는 let과 완전히 동일하므로 애플리케이션 상태 관리의 복잡도를 단순화 시켜줄 수 있다. 




class


이제는 OOP(Object Oriented Programming)를 위한 접근이 훨씬 쉬워졌다. Java의 OOP에 익숙한 개발자라면 import, class, super, extends, implements(TypeScript 지원)등을 통해 이전 Prototypal Inheritance의 이해 없이도 쉽게 JavaScript를 이용한 OOP가 가능해 진것이다

class Parent {

   contructor(params) { ... }

   static XXX() { ... }

   YYY() { ... }

   get ZZZ() { ... }

   set ZZZ(value) { ... }

}




Arrow Function


event 또는 XHR 콜백 펑션을 등록할 때 간혹 내부에 this를 사용하면 Global scope를 참조하게 된다. 이때 var that = this; 한 후 that을 넘겨 사용하기도 하는데 이제는 더 이상 그럴 필요가 없다. 자신 Execution Context를 만들지 않고 (function 보다 가볍다) 화살표 함수를 감싸는 외부 스코프의 this 값을 바로 쓸 수 있는 방법이 => 화살표 함수이다. 

$('.button').click(function (event) {

  ...

});


변경

$('.button').click(event => {

  ...

});


한 줄일 경우는 {}을 사용하지 않고 자동 return 구문이 된다. 만일 여러 줄일 경우는 {} 으로 감싼다. 단, 한 줄로 비어있는 객체를 return하고 싶다면 어떻게 해야할까?

arrs.map( item => ({}) ); // 성공

arrs.map( item => {} ); // bug




iterable 과 for~of 구문


배열을 순회(loop)하기 위한 방법으로 ES5의 myArray.forEach(function (value) { ....});를 사용한다. 기존 for ~ in 루프는 확장 속성들도 순회하기 때문에 성능상 이점이 없다. 배열에 만일 myArray.name = 'dowon'을 넣으면 name도 순회하고 prototype chain도 순회한다. 또는 가끔 무작위 순서로 순회하기도 한다. 쇗!! 이에 대한 해결로 for ~ of가 나왔다. 

for (var value of myArray) {

  console.log(value);  // 값이다. for ~ in 처럼 속성의 key가 아니다

}


Array, Map, Set은 순회를 위한 iterator 메소드를 제공한다. 사용자가 원하는 객체에 iterator 객체를 제공할 수 있다. 

  - 어떤 객체든 myObject[Symbol.iterator]() 메소드를 추가하면 자바스크립트에서 해당 객체를 순회할 수 있다. 

  - Duck Typing의 예로 iterator가 있으므로 해당 객체도 순회가 가능하다는 방식이다. 

  - myObject['iterator'] = function () {...} 라고 했고 만일 iterator() 가 이미 있다면 문제가 될 것이다. 이를 위해 제 7원소 Symbol을 사용해 어떤 코드의 key와도 충돌하지 않게 만든다. 

  - [Symbol.iterator]() 메소드를 제공하는 겍체를 이터러블 객체 (iterable object)라고 한다. 

Iterable is a simple representation of a series of elements that can be iterated over. current state만 있고, Iterator제공하는 메소드 하나를 가진다. 

Iterator is the object with iteration state. hasNext(), next()를 통해 다음 엘러먼트로 이동한다. 


iterator는 next를 제공해야 하므로 Symbol을 이용할 경우 다음과 같이 한다. value를 계속 0 만 주무로 무한루프이다. 

var myIterator = {

  [Symbol.iterator]: function() {

    return this;

  },

  next: function() {

    return { done: false, value: 0 } 

  }

}



형식

for ( VAR of ITERALBE ) {

  STATEMENT

}

동등한 코드 

var $iterator = ITERABLE[Symbol.iterator]();

var $result = $iterator.next();

while (!$result.done) {

  VAR = $result.value;

  STATEMENT

  $result = $iterator.next();

}




Collection 


자바스크립트의 Object는 key-value 쌍의 컬렉션이다. 즉 속성을 추가하고 값을 할당할 수 있고 이런 속성의 집합을 객체라 한다. 일반 객체로 해결할 수 없는 자료구조에서 Map, Set을 도입한다. 

  - 속성 key를 객체로 사용하고 싶을 경우 (객체는 key는 문자열만 가능, 단 ES2015에는 Symbol이라는 새로운 타입이 존재한다)

  - 일반 객체는 iterable 하지 않기에 for~of 구문이나, ... 구문을 사용할 수 없다. 


Set은 중복을 제거할 때 사용한다. Value 를 추가하고 삭제하며 동일 Value는 포함 될 수 없기 때문이다. 

  - new Set, new Set(Iterable) : 새로운 set 만들기

  - size, has, add, delete, forEach, clear

  - 다양한 이터레이터를 리턴: keys, values, entries (Map과의 호환성을 제공)

  - set[Symbol.iterator]() 구문은 set안의 값들을 순회할 수 있는 새로운 이터레이터를 리턴한다. 

var uniqueWords = new Set(words);

for (var word of uniqueWords) {

  console.log(word);

}


Map은 key-value 쌍으로 이뤄진다. 순회시 분해(destructuring)을 사용할 수 있다. 

for (var [key, value] of addressMap) {

  console.log(key, ': ', value);


Set, Map의 대용이 없어지지않고 남아있으면 Garbage Collector가 메모리를 회수 할 수 없다. 이애 해결을 위해 WeakSet, WeakMap을 사용한다. 




Symbol


심볼은 ES2015의 7번째 타입이다. 프로그램에서 이름 충돌을 피하고자 객체 속성 키(symbol-keyed property)를 사용하고 싶을 경우 사용한다. 

  - Object.property 처럼 dot(.)로 접근할 수 없고 Object[] 형식으로 접근할 수 있다. 

  - if( MY_SYMBOL in element) 처럼 속성을 참조하거나, delete element[MY_SYMBOL] 처럼 속성을 제거할 수 있다. 

  - MY_SYMBOL은 실행 스코프안에서만 모든 행위가 가능해서 충돌을 걱정할 필요없이 캡슐화를 할 수 있다. 

var MY_SYMBOL = Symbol();

var myObj = {};

myObj[MY_SYMBOL] = "dowon";


사용방법

  - Symbol() 호출: 일반적인 사용 형태, Symbol('name') 과 같이 파라미터를 주는 것은 디버깅을 위한 용도이다. 

  - Symbol.for(string): 심볼을 공유하고 싶을 경우 사용

  - Symbol.iterator: 특정 객체에 대해 Duck Typing으로 iterator를 만들고 싶을 경우 사용 

  - core.js 폴리필을 첨부해야 사용이 가능하다


기본 6가지 타입

  - Undefined

  - Null

  - Boolean

  - Number

  - String

  - Object 




Generator, 2


자바스크립트의 co-routine 이다. 함수가 끝나기전에 자신의 스코프 밖으로 나올 수 없다. 그러나 제너레이터 함수(generator-function)를 만들면 가능해 진다.

  - 제너레이터 함수는 function* 키워드로 시작한다. 

  - 제너레이터 함수안에는 yield 구문이 존재한다. 함수의 return은 한번 실행되지만 yield는 여러번 수행 가능하다. yield는 제너레이터의 실행을 멈췄다가 다음에 다시 시작할 수 있게 만든다. 

function* mygen(name) {

  yield 'hi ' + name;

  yield 'Have a great day';

}


> var iter = myget('dowon');

 [object Generator]

> iter.next();

  'hi dowon'

> iter.next();

  'Have a great day'


제너레이터 함수를 호출하면 제너레이터 객체(generator object)를 전달 받는다. yield첫번째에  실행이 멈춘 상태의 객체이다. .next()를 호출하면 다음 yield까지만 수행한다. yield 구문이 실핼될 때, 제너레이터의 스택 프레임(stack frame: 로컬 변수, 인자, 임시 값, 제너레이터 코드의 실행 위치)은 스택에서 제거된다. 


제너레이터를 통해 이터레이터를 만들 수 있다. 

> Symbol을 통해 만들기: 실행

class RangeIterator {

  constructor(start, stop) {

    this.value = start;

    this.stop = stop;

  }


  [Symbol.iterator]() { return this; }


  next() {

    var value = this.value;

    if (value < this.stop) {

      this.value++;

      return {done: false, value: value};

    } else {

      return {done: true, value: undefined};

    }

  }

}


// 'start'에서 'stop'까지 더해나가는 새로운 이터레이터를 리턴합니다.

function range(start, stop) {

  return new RangeIterator(start, stop);

}


// 수행 

for ( let value of range(0, 5)) {

 console.log(value);

}


> Generator를 통해 만들기: 실행

 - Symbol과 동일한 역할을 하는 이유는 Generator는 .next() 코드와 [Symbol.iterator]() 코드를 내장하고 있기 때문이다. 그냥 루프 처리만 작성하면 된다. 

function* range(start, stop) {

  for (let i=start; i < stop; i++) {

    yield i;

  }

}


// 수행 

for ( let value of range(0, 5)) {

 console.log(value);

}


제너레이터는 객체를 이터러블하게 만들때, 엄청나게 큰 결과를 처리, 복잡한 루프 구문을 리팩토링, 이터러블을 다루는 도구등으로 사용한다. (이부분은 경험이 없어서 이해가 힘들다. 다음기회로..) 제너레이터의 동작은 동기적으로 싱글-쓰레드 환경에서 실행된다. yield에서 멈추고 .next()에서 수행되는 된다. 만일 for ~ of 구문의 경우 iterator 스팩에 따라 수행이 된다.  




Proxy


자바스크립트 스팩 레벨에서 특정 객체에 대한 hooking을 가능케 한다. 

  - 첫번째 인자는 후킹할 객체이다. 

  - 두번째 인자는 후킹을 위한 설정이다. 보통 스팩에서 정의한 14가지 내부 메소드(internal method)를 재정의한다. 

var obj = new Proxy(<후킹할 객체>, <핸들러>);


내부 메소드는 [[ ]] 로 감싼다. 내부 메소드는 가려져 있기때문에 개발자가 호출할 수 없다. 

  - 속성 값 가져오기: obj.[[Get]](key, receiver) 는 obj.prop 또는 obj[key] 사용시 호출된다. 여기서 receiver는 속성 조회를 처음 시작했던 대상 객체이다. 

  - 속성 값 할당: obj.[[Set]](key, value, receiver) 는 obj.prop = value 또는 obj[key] = value 사용시 호출된다.  

    예) obj.prop += 2 같은 할당문의 경우 [[Get]] 호출 후 [[Set]]을 호출한다. (++, -- 도 동일)

  - obj.[[HasProperty]](key): 속성이 존재하는지 테스트 

  - obj.[[GetPrototypeOf]](): obj의 프로토타입을 반환. obj.__proto__ 또는 Object.getPrototypeOf(obj) 사용시 호출된다. 

  - functionObj.[[Call]](thisValue, arguments): functionObj() 또는 x.method() 사용시 호출된다. 

  - constructorObj.[[Construct]](arguments, newTarget): 생성자를 실행. new Date(2017,1,1) 사용시 호출된다.  


핸들러 만들기

  - set시에 무조건 Error 발생시킴

  - get시에 Reflect를 통해 기본 동작을 수행하고 추가 작업을 수행할 수 있음

var target = {};

var handler = {

  set: function (target, key, value, receiver) {

    throw new Error('not settting value');

  }

  get: function (target, key, receiver) {

    // default action 

    var result = Reflect.get(target, key, receiver);

    // custom action 

  }

}

var proxy = new Proxy(target, handler); 


> proxy.name = 'hi';

  Error: not settting value


프락시를 이용하면 어떤 객체에 대한 접근을 관찰하거나 로그를 남길 때 유용하다. 




디스트럭쳐링(Destructuring)


배열 또는 객체의 속성값을 일괄처리로 변수에 할당 받을 수 있는 방법이다. 객체나 배열을 XHR을 통해 JSON형태의 포멧으로 받을 경우 해체를 통해 값을 간편하게 변수로 받아 사용할 수 있다. 이는 코드의 가독성과 간결성을 유지해 줄 수 있다. 해체시 Default Value를 할당 할 수 있다. 배열의 경우는 인덱스 순서에 따라 하나씩 변수에 값을 할당 받지 않고 한번에 변수에 값을 할당 받는다. 

var first = myArray[0];

var second = myArray[1];


이것은 하기와 동일하다


let [first, second] = myArray;


또는 다차원 배열의 해체도 가능하다 


let [foo, [[bar], baz]] = [1, [[2], 3]]; 


또는 선택해서 받을 수 있다. 


let [ , , third] = [1, 2, 3];


또는 Rest 패턴을 통해 배열의 요소를 다른 배열로 받을 수도 있다.


let [first, ...second] = [1, 2, 3, 4, 5];


또는 함수에서 배열 리턴값을 해체한다 


function myArrayFunc() {

  return [1, 2, 3, 4];

}

let [a, b, c, d] = myArrayFunc();


객체를 해체할 수 있다. 객체 해체시에는 반드시 let, const 또는 var를 써야한다. 객체의 경우 이름이 같으면 변수 alias를 사용하지 않아도 된다. 

let myObj = { name: 'dowon' };


// myObj.name을 받아 myName 이라는 변수에 할당한다.

let { name: myName } = myObj;


좀 더 복잡한 객체의 해체도 가능하다, second = 'kangnam'이라는 default value를 할당했다. 


let complicateObj = {

  arrProps: [

    'dowon',

    { address: 'seoul'}

  ]

}

let { arrProps: [first, { second = 'kangnam' }] } = complicateObj;


이터레이션 프로토콜과 함께 사용할 수 있다


for (let [key, value] of map) {

   console.log(key, value);

}


또는 함수에서 객체 리턴값을 해체한다


function myObjFunc() {

  return {

    name: 'dowon',

    address: 'seoul'

  }

}

let { name, address } = myObjFunc();


또는 continuation passing style 사용도 가능하다. k 라는 callback에 값 1, 2를 주면 foo = 1, bar = 2 각 해체되어 할당된다. 


function returnMultipleValue(k) {

  k(1, 2);

}

returnMultipleValue(( foo, bar ) => ..... ); 


또는 ES2015의 import 구문에서 사용한다


import { Component } from 'angular2/core'; 


함수의 파라미터가 객체일때 파라미터를 해체하는 구문을 사용할 수 있다. 기존에는 파라미터 객체를 받아서 함수 내부에서 다시 변수에 할당하는 방식이 있을 경우 파로 파라미터 객체 해체를 통해 코드 간결성을 유지할 수 있다.

function myFn({ a, b, c, d }




Rest Parameter 와 Default Parameter


함수 파라미터의 해체(Destructuring)외에 함수 문법의 표현을 간결하게 해주는 두가지가 Rest/Default Parameter 이다. 함수의 파라미터를 가져올 때 기존엔 parameters를 통해 접근을 했다면 ES2015에서는 Rest Parameter로 접근한다. Rest Parameter는 함수의 마지막에 정의한다. 

function myFunc(first, ...myParams) {

  for (let param of myParams) {

    console.log(param);

  }

}


myFunc('hi', 'dowon', 'great', 'day');


... 점(Dot) 3개이후 파라미터 명칭을 설정하면 나머지 파라미터가 배열 객체로 넘어온다. 


함수의 파라미터 값이 undefined인지 검증하는 코드를 함수안에 넣는데 undefined일 경우 기본 값을 할당할 수 있다. 

function myFunc( first = 'dowon', second = 'hi') {

  console.log(first, second);

}


myFunc('Yun');


arguments 객체를 코드를 읽기 어렵게 만들고 JavaScript VM의 성능 최적화하는 것도 어렵게 만든다고 하니 앞으로는 Rest Parameter를 사용하자.




템플릿 문자열 (Template String)


백틱(Backtick) ` ` 을 이용해 문자열을 만드는 방법이 새롭게 생겼다. Angular2에서 template 정의시 많이 사용한다. 이에 더불어 문자 맵핑 채워넣기 (string interpolation) 을 백틱안에서 ${ } 를 사용해 넣을 수 있다. 

  - cross-iste scripting에 대한 공격을 피하려면 기존 처럼 신뢰할 수 없는 데이터에 대한 처리를 직접해주어야 한다. 

  - 다국어 처리도 직접한다

  - 루프문이 없다. 

let name = 'dowon';

let myStr = `Hi ${name}. Have a great day!`;


태그된 템플릿 (Tagged Template)은 백틱앞에 붙이는 사용자 정의 함수라 할 수 있다. 즉, 이 함수를 통해 템플릿 문자열을 커스터 마이징 할 수 있다. 태그 함수의 인자에는 어떤 것이 와도 되고, 리턴 값도 마찬가지이다. 

function SaferHTML(templateData) {

  var s = templateData[0];

  for (var i = 1; i < arguments.length; i++) {

    var arg = String(arguments[i]);


    // 대입문의 특수 문자들을 이스케이프시켜 표현합니다.

    s += arg.replace(/&/g, "&amp;")

            .replace(/</g, "&lt;")

            .replace(/>/g, "&gt;");


    // 템플릿의 특수 문자들은 이스케이프시키지 않습니다.

    s += templateData[i];

  }

  return s;

}


SaferHTML`<p>${name} hi</p>` 처럼 말이다. 




참조


  - Depth in ES6 번역문서

  - iterator, iterable 차이



신고
posted by peter yun 윤영식
2016.02.18 18:02 Angular/Concept

프론트앤드 자바스크립트 개발이 점점 복잡해 짐에 따라 모듈 패턴으로 코드를 작성하고 단일 책임 원칙(Single Responsibility Principle)을 지키는 것이 좋다. 모듈 코드를 작성한 후 모듈을 로딩하고 배포(번들링)하는 다양한 방법들이 존재한다. 먼저 Module Loader에 대해 살펴보고 다음 글에서 Module Bundler에 대해 정리해 본다. 







모듈 패턴


모듈패턴을 사용하는 이유

  - 유지보수성(Maintainability): 단일 책임 원칙에 따라 필요한 기능을 담고 있으면서 별도 폴더와 파일로 유지하면 변경이나 확장 발생시 찾고 수정하기 쉽다. 전제 조건은 외부에 노출하는 API를 일관되게 유지하는 것이 중요하다. 

  - 이름공간(Namespacing): 자바스크립트에서 전역변수를 통한 개발을 하지 않는다. 이를 위해 즉시실행함수표현(IIFE)를 사용하여 전역변수의 오염을 방지하는데, 모듈 패턴 또한 전역변수 오명을 방지한다. 

  - 재사용성(Resuability): 모듈의 성격을 잘 나누어 놓으면 다음 프로젝트에서 그대로 사용해 쓸 수 있다. 보통 SDK나 Base Framework을 만들어 놓으면 초기 구축 비용을 최소로 할 수 있다. 


JohnPapa Angular 스타일 가이드를 보면 특별히 모듈을 지원하는 라이브러리의 도움없이 자바스크립트 모듈 패턴 방식으로 앵귤러 v1 코드를 작성토록 가이드하고 있고, 앵귤러 팀에서도 공식적으로 추천하고 있다. 

(function () {

    'use strict';


    angular

        .module('a3.common.action')

        .factory('currentAction', currentAction);


    /* @ngInject */

    function currentAction(ActionType, stateManager) {

        return {

            setDashboard: setDashboard,

            setWorkspace: setWorkspace

        };


        function setDashboard(dashboardId) {

            var action = {

                ...

            };

            stateManager.dispatch(action);

        }


        function setWorkspace(workspaceId, taskerId) {

            var action = {

                ...

            };

            stateManager.dispatch(action);

        }

    }

})();


순수 자바스크립트로 모듈 단위로 만든 후 상호 운영은 어떻게 해야할까? 일단 index.html에 설정을 하고 사용하는 순서에 index.html에 script 태그를 통해 로딩을 하는 간단한 방식을 생각해 볼 수 있다. 하지만 필요한 시점에 자바스크립트에서 로딩을 해서 사용하는 방식을 명시적으로 하려면 별도 로더의 도움이 필요하다. 




CommonJS & AMD & UMD


CommonJS는 지정한 코드를 동기적으로 로딩하는 방식으로 서버 사이드의 Node.js에서 사용한다. 

  - Object 만을 대상으로 한다.

  - module.exports 구문으로 Object를 export 한다

  - require 구문으로 Object를 import 한다. 

// 파일명: module.js 

function module() {

  this.hi = function () { return 'hi'; }

}

module.exports = module;



// 사용하는 파일: test.js

var module = require('module');

var m = new module();

m.hi();


위에서 require를 차례로 호출하면 동기적으로 하나씩 로딩을 한다. 즉, 비동기적이지 않기 때문에 로딩이 전부 되어야 수행이 된다. 브라우져에서 동기적으로 모듈 파일을 로딩하게 되면 모든 파일이 로딩된 후 화면이 실행되므로 성능 이슈를 야기할 수 있다. 따라서 CommonJS는 Node.js에서 주로 사용하고 브라우져에서는 사용하지 않는다. 


AMD(Asynchronous Module Definition)은 비동적으로 모듈을 로딩한다. 

  - Object, function, constructor, string, JSON 등 다른 타입들도 로딩이 가능한다. 

  - define 구문을 사용한다.

 define(['jquery', 'angular'], function($, angular) { 

   ...

 });


jquery, angular 파일에 대해 비동기적으로 로딩한다. AMD대표적 구현체로는 RequireJS가 있다. 


UMD(Universal Module Definition)은 AMD와 CommonJS의 기능을 둘다 지원하는 것이다. 

  - AMD, CommonJS를 고려한다 

  - 구현체로 SystemJS를 들 수 있다. SystemJS는 Universal dynamic module loader로 AMD, CommonJS뿐만 아니라 브라우져의 global scripts와 NodeJS 패키지 로딩을 하고 Traceur 또는 Babel 과 같이 작동할 수도 있다. 특히, Angular 2에서 사용한다.

  - 아래와 같이 CommonJS와 AMD를 체크하여 사용할 수도 있다. 구현 방식에 대한 다양한 예를 참조한다. 

(function (d3, jQuery) {

    'use strict';

   var Sankey2 = { ... };

   ....


    // Support AMD

    if (typeof define === 'function' && define.amd) {

        define('Sankey2', ['d3'], Sankey2);

    } 

   // Support CommonJS

   else if ('undefined' !== typeof exports && 'undefined' !== typeof module) {

        module.exports = Sankey2;

    } 

   // Support window

   else {

        window.Sankey2 = Sankey2;

    }


})(window.d3, window.$);


브라우져에서 ES6 module loader가 아닌 SystemJS (Universal module loader)를 사용할 경우 System.import 호출로 AMD, CommonJS, ES6 모듈 형식을 로딩할 수 있게 API를 제공하고  패키지 메니져로 JSPM을 사용할 수도 있다. JSPM은 무저항 브라우져용 모듈 패키지 메니져 (frictionless browser package management)로써 ES6 module loader가 작동하지 않는 곳에서 사용하는 Polyfill 이면서 AMD, CommonJS, Globals 자바스크립트 모듈 형식을 로딩할 수 있다. 



Native JS


자바스크립트 ES2015 (ES6)에서 모듈 로더를 공식지원한다. ES2015는 모듈의 importing과 exporting을 제공한다. (참조) 간결관 syntax와 비동기 로딩과 cyclic dependencies에 대해 보다 잘 지원을 한다. 

  - import, export 를 사용한다. 

// app.js 

export let count = 1;


export function hi() {

  return 'hi-' + count++;

}


// test.js

import * as app from './app';


console.log(app.hi());

console.log(app.count);



모듈로더에 대해 정리를 해보자. 자바스크립트 개발시 모듈 패턴에 입각하여 개발할 때 다양한 방식을 사용할 수 있으나

  - NodeJS 기반 서버 사이드 개발은 CommonJS 이고

  - Browser 기반 클라이언트 사이드 개발은 AMD구현체 중 하나인 RequireJS 를 사용한다. 


ppt에서 r.js는 RequireJS에서 제공하는 모듈 번들러이다. 모듈 로더에 맞는 모듈을 개발한 후에 모듈 파일을 운영 배포하기 위해 번들링 즉, 묶는 과정을 거친다. 번들링 방법은 대해 다음 글에서 살펴보자. 




<참조> 

  - 모듈 로딩 다이어그램

  - 모듈 로딩: CommonJS & AMD & UMD

  - 모듈 번들링: Browserify & Webpack 

  - CommonJS와 AMD - D2 

  - UMD 구현 예 

  - SystemJS: Universal dynamic module loader

  - Rollup.js: 차세대 Javascript module bundler

  - ES6 Module Loader Polyfill: Top Level SystemJS

  - ES6 vs CommonJS 비교

  - JavaScript Module Pattern

신고
posted by peter yun 윤영식
2015.08.23 17:48 React

Semantic UIReact 컴포넌트로 만들고 NPM 저장소와 Meteor 저장소인 Atmosphere에 배포해 보자. 토요일 헤커톤 모임을 갖고 스마트링크 멤버분들과 함께 진행했다. 목표는 React Bootstrap 과 같은 오픈소스 패키지를 만들어 보는 것이다. 처음엔 활짝 웃고 있는 모습!







준비 운동 


함께 개발을 진행하는 관계로 코딩 컨벤션은 에어비엔비의 React 코드 컨벤션으로 한다.  다음으로 깃헙(GitHub) 저장소를 만들었다. 소셜 코딩은 역시 깃헙이다. 깃을 사용하므로 커밋 메세지를 잘 작성하면 별도의 CHANGELOG를 작성할 필요가 없다. 따라서 Git Commit에 대한 컨벤션도 앵귤러에서 사용하는 방식을 쓴다. 그리고 정보를 찾고 공유하는 것은 슬랙(Slack)을 이용하고, 할일에 대한 보드는 트렐로(Trello)를 이용해 서로 공유하고 있다. 트렐로를 슬랙과 연동하면 슬랙에서 모든 것을 확인 할 수 있다. 


일단 npm 초기화을 초기화하고 모듈을 설치한다.  package.json 에 설치하는 모듈은 다음과 같다. 

  - ES6를 사용하기에 Babel을 통해 ES5로 트랜스파일한다. 

  - React로 설치하고, classnames는 리액트 코드안에서 클래스명을 확장해 주는 기능을 한다. 

  - fbjs는 ES7의 dectorator를 사용해 React Start Kit에 있는 withStyle을 컴포넌트별로 적용해 보려 했으나 원하는 동작이 안된다. 제거해도 좋음. 

  - *-loader는 웹팩(Webpack)을 통해 전체 패키지를 하나의 배포 파일로 번들링하기 위해 설치한다. 

package.json에 설정을 넣고 한번에 npm install 해서 설치하자

// package.json 일부 내역 


"dependencies": {

  "babel": "^5.8.21",

  "react": "^0.13.3",

  "classnames": "^2.1.3",

  "fbjs": "0.1.0-alpha.7"

},

"devDependencies": {

  "babel-core": "^5.8.22",

  "babel-loader": "^5.3.2",

  "css-loader": "^0.15.6",

  "fbjs": "0.1.0-alpha.7",

  "semantic-ui-css": "^2.0.8",

  "style-loader": "^0.12.3",

  "url-loader": "^0.5.6",

  "webpack": "^1.11.0"

}

 

다음으로 웹팩 환경파일인 webpack.config.js 를 만든다.  웹팩은 사전에 설치할 것이 있는데 홈페이지의 Getting start를 보자. 그리고 어떻게 잘 사용할지는 페북 엔지니어인 피트헌트의 Webpack Howto를 참조한다. 설정 내용은 다음과 같다. 

  - 배포 파일 명칭은 reactjs-semantic-ui.js 파일이고, /src/index.js 파일에 모든 참조 내역을 작성한다. 

  - 배포시 접근하는 네임스페이스는 RSU (React Semanctic Ui) 이다. 예로 본 패키지를 리액트 코드에서 사용하면 RSU.Button 식의 접근이다. 

  - .js 또는 .jsx 확장자는 babel-loader로 ES6를 ES5로 트랜스파일한다. 

  - 웹팩은 css 파일과 이미지 파일도 함께 번들링 하므로 style-loader 와 css-loader를 설정하고, 이미지와 폰트 관련해서 url-loader를 설정한다. 

  - react.js 관련 파일은 웹팩으로 번들링시에 제외토록 externals를 설정한다. 

// webapck.config.js 내역 


module.exports = {

entry: {

'reactjs-semantic-ui': './src/index.js'

},

output: {

path: './dist',

filename: '[name].js',

library: 'RSU',

libraryTarget: 'umd'

},

module: {

loaders: [

{

test: /\.jsx?$/,

exclude: /(node_modules|bower_components)/,

loader: 'babel-loader'

                       },

{

test: /\.css$/,

                                exclude: /\.useable\.css$/,

loader: 'style-loader!css-loader'

},

{

test: /\.(png|jpg|svg|eot|woff|woff2|ttf)$/,

loader: 'url-loader?limit=8192'

} // inline base64 URLs for <=8k images, direct URLs for the rest

                ]

},


externals: [

          {

              'react': {

                   root: 'React',

                   commonjs2: 'react',

                   commonjs: 'react',

                   amd: 'react'

             }

         }

     ]

}


Babel 사용시 주의 점은 간혹 ES7 의 decorator를 사용하거나 특정 스펙 레벨까지 적용하고 싶다면 루트에 .babelrc를 생성하고 stage를 설정해야 한다. stage 설정 가이드를 참조하자.

{

    "stage" : 0

}




 

개발 시작


환경 준비하며 문제점을 해결하는데 3시간 가까이 소비를 했다. 본격적으로 시멘틱 UI를 리액트화 하기 위해 다음과 같은 순서로 작업을 한다. 

  - src/index.js안에 작성한 컴포넌트들을 설정한다. 

  - 시멘틱 UI가 구분해 놓은 Elements, Collections, Views ... 와 같이 구분해서 폴더를 만들어 그밑으로 컴포넌트를 만든다. 

  - 시멘틱 UI의 core css는 reset.css 로 Reset 클래스를 하나 만들었다. 

  - ES6 구문을 사용한다. ES5 Features를 참조하자 

    + import ... from 

    + { key : value } 가 동일 설정이면 { key1, key2 }로 나열 

    + export default RSU 

// Globals
import Reset from './globals/Reset';

// Elements
import { Button, Buttons } from './elements/Button';
import Container from './elements/Container';
import Dimmer from './elements/Dimmer';
import Divider from './elements/Divider';
import Flag from './elements/Flag';
import Header from './elements/Header';
import Icon from './elements/Icon';
import Image from './elements/Image';
import Input from './elements/Input';
import Label from './elements/Label';
import { List, Item } from './elements/List';
import Loader from './elements/Loader';
import Rail from './elements/Rail';
import Reveal from './elements/Reveal';
import Segment from './elements/Segment';
import { Step, Steps } from './elements/Step';

// Collections
import Breadcrumb from './collections/Breadcrumb/Breadcrumb';
import BreadcrumbDivider from './collections/Breadcrumb/BreadcrumbDivider';
import BreadcrumbSection from './collections/Breadcrumb/BreadcrumbSection';
import Form from './collections/Form/Form';
import Grid from './collections/Grid/Grid';
import Column from './collections/Grid/Column';
import Row from './collections/Grid/Row';
import Menu from './collections/Menu/Menu';
import Message from './collections/Message/Message';
import Table from './collections/Table/Table';

// Views
import Card from './views/card/Card';
import CardImage from './views/card/CardImage';
import CardContent from './views/card/CardContent';
import CardHeader from './views/card/CardHeader';
import CardMeta from './views/card/CardMeta';
import CardDescription from './views/card/CardDescription';

const RSU = {
    // Elements
    Button, Buttons,
    Container,
    Dimmer,
    Divider,
    Flag,
    Header,
    Icon,
    Image,
    Input,
    Label,
    List, Item,
    Loader,
    Rail,
    Reveal,
    Segment,

    Step, Steps,

    // Views
    Card,
    CardImage,
    CardContent,
    CardHeader,
    CardMeta,
    CardDescription,

    // Collections
    Breadcrumb,
    BreadcrumbDivider,
    BreadcrumbSection,
    Form,
    Grid,
    Row,
    Column,
    Menu,
    Message,
    Table
}
 

export default RSU;


리액트 컴포넌트는 다음과 같이 만든다. 1주차엔 시멘트 UI의 css를 적용해서 잘 나오는지만 확인하는 것으로 리액트 컴포넌트의 라이프사이클 메소드를 전부 설정해서 넣는다. 

  - 어빈앤비의 리액트 코딩 컨벤션에 따라 작성한다. 

  - shouldComponentUpdate 구문은 향후 Immutable.js 사용과 PureRenderMixin의 조합을 고려해 성능을 향상시켜야 한다. 

    이에 대한 좋은 글이 있으니 꼭 읽어보자.  Immutable.js에 대한 연재글 [1], [2], [3]

  - 리액트의 라이프 사이클 코드가 대부분의 컴포넌트에 중복해서 들어 있으므로 이것도 ES6 구문을 위한 리액트의 Mixin 패키지를 사용해 리팩토링해야 한다.

  - classNames( x, y, this.props.className )은 classnames 패키지를 사용해서 <Card className="ui card <상속 className>"> 을 설정해 준다.  

  - <div {...this.props} 를 하면 상위에 설정한다. 모든 key="value" 애트리리뷰트를 그대로 설정해준다. 단, 주의 점은 <div {...this.props} className...> 처럼 사용하면 className은 오버라이딩 된다는 점이다. 만일 <div className={componentClass} {...this.props}> 로 하고 <Card className="dowon" /> 를 사용하면 className={componentClass} 는 적용이 되지 않는다. 즉 태그안에서 중복된 키이면 뒤에 놓은 것으로 설정이 덮어써진다.

import React, { Component, PropTypes } from 'react';
import card from 'semantic-ui-css/components/card.css';
import classNames from 'classnames';

const propTypes = {
	className: PropTypes.string,
};

const defaultProps = {
	className: ''
};

class Card extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  };

  componentWillMount() {};
  componentDidMount() {};
  componentWillReceiveProps(nextProps) {};
  shouldComponentUpdate(nextProps, nextState) {
    return true;
  };
  componentWillUpdate(nextProps, nextState) {};
  componentDidUpdate(prevProps, prevState) {};
  componentWillUnmount() {}

  render() {
    var componentClass = classNames(
      'ui',
      'card',
      this.props.className
    );

    return (
      <div {...this.props} className={componentClass}>{this.props.children}</div>
    )
  };
}

Card.propTypes = propTypes;
Card.defaultProps = defaultProps;
 

export default Card;


학학 다들 컴포넌트 만드는데 저녁 7시를 치닫고 있다. 아 나만 힘들어...






테스트 하기 


만들어진 컴포넌트를 테스트하기 위해 src 폴더 외에 docs 폴더를 만들어 예제를 만든다. 

  - 시멘틱 UI 처럼 폴더 구조를 가지고 각각 index.html파일을 만든다. 

  - 패키지를 사용하는 입장이기 때문에 react.min.js를 넣고 테스트용이기 때문에 <script type="text/jsx;harmony=true"> 해석을 위해 JSXTransformer도 넣었다.

  - 테스트 코드는 Card.js 이면 CardExample.js 로 해서 작성한다. 

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Reactjs Semantic Ui </title> </head> <body style="margin-left: 20px; margin-top: 20px;"> <div id="app"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script> <script src="../../dist/reactjs-semantic-ui.js"></script> <script type="text/jsx;harmony=true" src="./CardExample.js"></script> <script type="text/jsx;harmony=true"> // Card React.render( <CardExample />, document.getElementById('app') ); // </script> </body> 

</html>


CardExample.js를 다음과 같다. 

  - import 구문이 안먹는다. 이유 아는분 메세지 좀 주세요. 그래서 render안에 RSU 네임스페이스 제거하고 사용한다. 

  - Card 관련 <div class="xxx"> 설정을 리액트 컴포넌트로 만들어 사용해 본것이다. 

// import { Card, CardImage, CardContent, CardHeader, CardMeta, CardDescription } from 'RSU';

class CardExample extends React.Component {

  render() {
    var Card = RSU.Card,
        CardImage = RSU.CardImage,
        CardContent = RSU.CardContent,
        CardHeader = RSU.CardHeader,
        CardMeta = RSU.CardMeta,
        CardDescription = RSU.CardDescription

    return (
      <div>
        <h3><a href="http://semantic-ui.com/views/card.html" target="_blank">Card</a></h3>
        <Card>
          <CardImage onClick={Alert} src="../assets/images/kristy.png" />
          <CardContent>
            <CardHeader desc="Kristy" />
            <CardMeta>
              <span className="date">Joined in 2013</span>
            </CardMeta>
            <CardDescription>
              Kristy is an art director...
            </CardDescription>
          </CardContent>
          <CardContent className="extra">
            <a>
              <i class="user icon"></i>
              22 Friends
            </a>
          </CardContent>
        </Card>
      </div>
    );
  }
 

}


이제 테스트를 위해 "npm install -g webpack-dev-server"를 설치하고 실행한다. 실행은 소스 루트에서 한다. 

  - 호출은 http://localhost:8080/docs/views 로 직접 경로를 지정한다. 

$ webpack-dev-server --progress --colors

  0% compilehttp://localhost:8080/webpack-dev-server/

webpack result is served from /

content is served from /Users/yunyoungsik/mobicon/open-sources/unplugdj/src/reactjs-semantic-ui

Hash: 0d552960154cf0b24cf3

Version: webpack 1.11.0

Time: 2759ms

                 Asset    Size  Chunks             Chunk Names

reactjs-semantic-ui.js  113 kB       0  [emitted]  reactjs-semantic-ui

chunk    {0} reactjs-semantic-ui.js (reactjs-semantic-ui) 110 kB [rendered]

    [0] ./src/index.js 418 bytes {0} [built]

    [1] ./src/elements/Button.js 4.6 kB {0} [built]

    [3] ./~/semantic-ui-css/components/button.css 870 bytes {0} [built]

    [4] ./~/css-loader!./~/semantic-ui-css/components/button.css 87.5 kB {0} [built]

    [5] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]

    [6] ./~/style-loader/addStyles.js 6.09 kB {0} [built]

    [7] ./src/utils/withStyles.js 3.86 kB {0} [built]

    [8] ./~/fbjs/lib/invariant.js 1.51 kB {0} [built]

    [9] (webpack)/~/node-libs-browser/~/process/browser.js 2.02 kB {0} [built]

   [10] ./~/fbjs/lib/ExecutionEnvironment.js 1.09 kB {0} [built]

     + 1 hidden modules

webpack: bundle is now VALID.


결과화면이다. 예들 상단에 시멘틱 UI쪽에 관련 링크를 걸기로 한다. 


앞으로 시멘틱 UI의 자바스크립트 코드를 리액트에 넣고 나머지 부분을 컴포넌트화 해야 한다. 그리고 성능 향상과 중복 코드 제거를 위한 Mixin을 이용한 리팩토링이 필요하다. 그 후엔 패키지 배포. 다음 시간에 다시 2차 헤커톤을 진행하기로 하고 저녁 10시에 종료! 




To Be Continue...

신고

'React' 카테고리의 다른 글

[React] Semantic-UI를 React 컴포넌트로 만들기 - 1  (0) 2015.08.23
[React] CSS Framework 선정하기  (0) 2015.08.15
[Flux] Flux 배우는 방법  (0) 2015.07.04
[React] AngularJS와 ReactJS 비교  (0) 2015.07.01
[React] 배우는 방법  (0) 2015.05.15
posted by peter yun 윤영식
2015.07.14 22:54 Angular/Concept

Meteor는 Modern Application Platform이기도 하면서 Reactive Manifesto에서 이야기하는 User Responsive를 위한 Resilient와 Scalable을 갖추고 있다. 그래서 Meteor를 Realtime Modern Application을 위한 Reactive Platform이라 이야기를 해도 좋을 것 같다. 하지만 정작 Reactive라고 이야기를 해놓고 Reactive의 개념이 와닿지 않는 것은 거시적, 미시적 이해가 없기 때문이다. 최근에 각광 받고 있는 AngularJS는 Reactive Templating을 지원한다. Reactive라 붙일 수 있는 이유는 Reactive Programming에 대해 위키에서 찾아보면 액셀 예를 통해 어떤것을 의미하는지 이해를 할 수 있다. 다수의 b가 a를 의존할 때 a의 변화에 b가 종속이 되고, 옵저버 패턴(Observer Pattern)으로 보면 다수의 의존하는 Observer(소비자)가 데이터를 제공하는 Observerable(생산자)에 의존하는 것으로 a에 상태변경(이벤트 발생)에 대해 b에도 상태값을 알려주는 구조이다. Reactive Programming(RP)의 관건은 Asynchronous Data Flow관점에서 프로래밍을 하고 Functional Reactive Programming으로 오면 filter, map, reduce와 같은 블럭을 통해 Reactive Programming을 한다. 



리액티브 프로그래밍(RP)은 비동기와 이벤트 기반의 데이터 스트리밍(Asynchronous and Event-based Data Streaming)을 Observable Sequences로 변환해 개발하는 프로그래밍 방식이다.







Reactive 거시적, 미시적 이해


  Reactive Manifesto 의 내용을 이해할 필요가 있다. 왜 Reactive 해야 하는지 이유는 본 글에 잘 설명되어 있다. 현재는 인터넷 보급과 모바일 기기의 보급으로 365일 24시간 무정지의 끊김없는 빠른 서비스를 제공해야 한다. 이를 위해서는 장애(Failure)에 빨리 복구(Resilient)되고, 서비스의 수평적 확장이(Scalable) 용이해야 하며, Resilient와 Scalable 바탕에는 느슨한 결합(loose coupling)의 메세지 기반(Message Driven) 아키텍처가 기반이 되어야 한다. 


  - Responsive를 위한 Resilient와 Scalable 및 Message Driven에 대한 이야기

  - NDC에서 김종욱님이 발표한 RX와 Functional Reactive Programming 이야기 (원문)

    + 엔시소프트 리니지 서버의 Rx 적용 경험 공유

    + 2009년 MS 에서 Reactive eXtension 소개

    + 2011년 RxJS, 2012년 RxJava등이 나오고 현재는 RxSwift도 존재함 

    

   

  - 2013년 Infoq에 발표한 Reactive programming의 동향

    + 코세라에서 Scala 기반 오픈 강의 개설(Scala 창시자와 Rx 개발자가 직접 강의함) : Principles of Reactive Programming

    + Netflix에서는 RxJava 기반으로 광범위하게 개발을 하고 있다. 

    + Facebook은 ReactJS를 오픈소스화하고 페이스북 웹과 인스타그램 웹에 사용하고 있다.

    + Javascript 기반의 Bacon.js, Kefir.jsRxJS, Reactive.js 라이브러리를 타 프레임워크와 접목해서 사용할 수도 있다. 

  - Microsoft에서 이야기하는 Reactive eXtension 정의

  - 다양한 언어의 구현체는 ReactiveX(http://reactivex.io)에서 볼 수 있다.

  - 확장가능하고 병행처리 가능한 웹 아키텍쳐 구축하기


  - Observable에 대한 이해

    + 2분만에 이해하는 Observable : Rx is the underscore.js for events

    + FRP 연산자들에 대한 Sync와 Async에 대해 시뮬레이션 예제를 통해 보여준다. (슬라이드DevNation)

    + ReactiveX.io의 설명

       Observer는 Observable에 subscribe하고 onNext, onError, onCompleted를 Observer에 구현하면 이를 Observable이 호출

       onNext에는 emit 한다고 말하고, onError, onCompleted는 notification한다고 말함.

    + MS의 Reactive eXtension의 워크샵 (동영상)


  - Observable에 대한 기본 개념 

    

  

  - ReaciveX를 위한 Operators 종류

    + 언어별로 동일 연산자를 가진다. 

    + Create Observable, Transform Observable, Filtering Observable, Combining Observable, Error Handling, Utility, Conditional & Boolean ...

    + Operator사용을 위해서 Decision Tree의 내용을 숙지해 보자. 





Reactive Programming for JavaScript


  먼저 RxJS를 이용한 Reactive Programming에 대한 이해를 선행한 후에 FRP(Functional Reactive Programming)에 대한 이해를 위해 learnrx의 FRP 개념 이해를 위한 실습을 전부 따라해 본다. 


  - Javascript의 Sync처리와 Asynch 처리에 대한 이해를 뭔저 해본다. 동영사의 21분에서 forEach가 Sync, Async 처리 되는 과정을 이해.

   + Event-Loop 와 Call Stack, Task Queue 관계 시뮬레이션 (21분경에 나옴)

    


  - 예제들이 ES6 기준으로 되어 있는 경우가 많아 ES6 문법을 공부하자

    + Depth in ES6 이해 요약정리

  - Functional Reactive Programming (FRP) 에 대한 개념을 이해하자. 

    + Functional Programming 과 Reactive Programming의 결합 === Functional + Async Data Stream (Data Flow) 

    



  - Frontend Developer 입장에서 본 RxJS에 대한 기본 개념 이해 

    + Array에서 제공하는 map, filter, reduce는 할 때마다 다시 배열을 할당한다.(learnrx를 따라해보고 이해하자) 따라서 GC에 대한 이슈존재

    + RxJS의 Observable을 사용할 경우 배열 재할당이 없으므로 GC에 대한 이슈도 없다. 

    


  - RxJS의 깃헙 Readme를 읽자

  - RxJS 학습하기 

    + egghead.io의 RxJS 강좌와 Asynchronous 강좌를 본다.

    + RxMarbles : Rx를 다이어그램으로 보여주어서 시각적 이해를 돕는다

    + RxJSKoans 학습

    + RxJS GitBook 책을 읽자 (그외 RxJS 레퍼런스)


  - RxJS를 이용한 FRP API 소개 : 맨뒤의 참조 목록을 방문하자 

    


  - ng-conf 2015에서 Nexflix UI 개발자가 발표하는 Obserable을 보자 (슬라이드

    + RxJS 개념은 Angular 2.0 core 에서 사용한다!!!

    

  - Bacon.js  : Functional Reactive Programming(FRP) Library for Javascript
    + 강좌-1 : Hacking with jQuery
    + 강좌-2 : Bacon.js started
    + 강좌-3 : AJAX and stuffs



Reactive Programming for Another Stuffs

Reactive 프로그래밍은 다양한 언어를 지원하고 http://reactivex.io 에서 언어별로 확인이 가능하다. 
  - Java를 위한 Reactive 프로그래밍으로 RxJava를 제공하고, 안드로이드 v2.3 이상부터도 사용을 할 수 있다. 
  - 김대성님의 FRP에 대한 이야기 : RxJava를 소개하고 있다. 유튜브 동영상을 시청하면 보자.   
    

  - 안드로이드 개발을 위한 Rx기반의 아키텍쳐링 방법도 제공을 하고, RxAndroid 라이브러리도 제공을 한다
    

    + cycle.js를 React 스타일로 재구성한 cycle-react
    + Flux Pattern을 Rx-Flux 구현

  - Angular에 RX 적용하기 
    + BangJS : Reactive AngularJS 로서 Bacon.js를 사용한다.

  - D3.js와 붙여보자 




<참조>

  - React & Bacon 예

  - Neflix API를 사용해 Reactive Programming하기

  - Reactive Programming using RxJS

  - Observable 과 Promise의 차이점

  - Reactive Extension in MS

  - Rx 관련한 대부분의 자료 모음

  - RP and MVC 예제

저작자 표시 비영리 변경 금지
신고
posted by peter yun 윤영식
prev 1 next