블로그 이미지
Peter Note
Web & LLM FullStacker, Application Architecter, KnowHow Dispenser and Bike Rider

Publication

Category

Recent Post

2015. 1. 31. 12:01 Deep Learning

최적의 방법을 찾는 행위 



최적화

  

  - Optimization은 무엇일까요?

    + 최고가 아닌 최적을 찾는 것.

  - Optimization 을 왜 하는가?

    + 기회 비용을 최소화해 최적화 값을 얻기 위해 통계적 최적화를 사용할 수 있다. 

  - Optimization 을 하면 최고인가?

    + 최적을 하는 것이다. 




해답 표현하기


  - 예) 비행편 출발 시간, 도착 시간을 하루 중 가장 먼저 출발하는 것을 0부터 시작해서 1씩 증가, 각 인원에 대한 수치를 1차원 배열로 나열하는 행위를 모델링이라 한다. 

    예) [1,4,5,2,3,7,4,2]

  - 첫값 : 0, 그리고 1식 증가 

  - 비행편 API 제공 : 카약 http://www.kayak.com/labs/api/search (개발자 키를 발급 받아야 함)

  - 랜덤 값을 사용한다. 얼마나 제대로 된 랜덤 값을 만들어 내느냐가 중요하다. 만약 랜덤 값을 사용하면 stochastic optimization 즉, 통계적인 최적화이다. 

  - 랜덤 값에 대한 부분은 도메인 지식을 필요로 한다?




비용 함수 (Cost Function)


  - 비용이 될 만한 것을 도출

  - 비용 함수에 적용하여 비용이 많이 들수록 큰값을 반환 




언덕등반 (hill climbing)


  - 무작위 해답으로 시작해서 더 좋은 해답을 찾아 이웃 해답들ㅇ르 살펴보는 기법

  - 내리막에서 오르막이 시작될 즈음에서 찾음. 좌우 비교를 통함. 

  - 결점 : 오르락 내리락할 때 작은 내리막이 최적이라고 판단할 수 있은 오류




시뮬레이티드 어닐링 (Simulated Annealing)


  - 물리학에서 영감을 받음

  - 언덕 등반의 결점을 보안

  - 나쁜 선택이 현재 선택이 될 수 있지만 계속 진행할 수록 낳아진다. 

  - 시장에서 많이 사용. 




유전자 알고리즘 (Genetic Algorithm)


  - 개체군(population)이란 무작위 해답들을 생성하면서 시작

  - elitism, 돌연변이(mutation), 교배(crossover), 번식(breeding)

  - 존 홀랜드 1975년 발생 "Adaptation in Natural and Artificial Systems"




선호도 최적화  


  - 최적화 기법의 필요 조건 : 문제가 정의된 비용 함수 + 유사한 해답이 유사한 결과를 낼 것




네트워크 시각화 

  

  - SNS에서 사용 



<참조> 


  - 시뮬레이티드 어닐링

  - 두번째

'Deep Learning' 카테고리의 다른 글

[ML] 8주차 - 7장 의사결정트리  (0) 2015.02.14
[ML] 7주차 - 6장 문서 필터링  (0) 2015.02.07
[ML] 4주차 - 군집하기  (0) 2015.01.03
[ML] 3주차 - 추천하기  (0) 2014.12.13
[ML] 2주차 - 추천하기  (0) 2014.12.06
posted by Peter Note
2015. 1. 21. 16:15 My Projects/Jandi

2주차 진행을 하며 기존 웹 저장소를 별도로 구성해 완전히 별도의 애플리케이션을 구축할 예정이었으나 프러덕션 저장소의 업무로직의 복잡도와 지속적인 개발로 인한 신규 저장소 소스의 불일치 문제가 발생하였다. 따라서 완전히 새로운 저장소로 별도 애플리케이션을 개발하기 보다 Lagacy 코드를 리팩토링 하고 테스트 코드를 신규로 넣고 동시에 연속적인 빌드 환경을 구축하기로 한다. 



1. 모듈 리팩토링


  - AngularJS에서 하나로 묶여 있는 모듈을 여러개로 쪼개는 작업을 진행한다. 

    + 다행히 기존 애플리케이션이 generator-angular-fullstack 으로 되어 있기 때문에 별도로 작업했던 내용을 적용한다. 

    + jandiApp 모듈만 존재한다면 애플리케이션을 위한 추상화 모듈과 공통 모듈로 두가지를 생성한다. 

  - web_client 폴더는 jandi의 웹 애플리케이션 저장소 이름이다. 

    + web_client/client 폴더 밑으로 components 폴더를 만들고 그 밑으로 app와 base 폴더를 만든다. 

    + components/app는 애플리케이션과 연관이 있는 대표 모듈 폴더이다. 

    + components/base는 jandi외에도 어디서나 사용 가능한 그리고 웹에서 bower로 다운로드한 모듈의 폴더이다. 

$ cd web_client/client/

$ mkdir components && cd components

$ mkdir app

$ mkdir base


  - app와 base에 대한 대표 모듈을 만든다.

    + components/app/app.framework.js 파일 생성

    + components/base/base.farmework.js 파일 생성

    + app.framework 모듈은 base.framework 모듈을 의존한다. 

// app.framework.js 내역 

(function() {

  'use strict';


  angular

    .module('app.framework', ['base.framework']);

    

})();


// base.framework.js 내역 

(function() {

  'use strict';


  angular

    .module('base.framework', []);

    

})();


  - 자바스크립트 로딩 우선순위를 지정한다. 

    + index.html 파일의 app.js 보다 먼저 로딩 될 수 있도록 app.framework.js와 base.framework.js를 지정한다. 

    + grunt serve 명령 수행시 app.framework.js와 base.framework.js 파일이 자동 inject 되지 않도록 ingore 설정을 한다. 

    + watch와 inject에 경로를 설정하고 설정앞에 ! 주면 exclude하겠다는 의미이다. 

// index.html 일부 내역 

<!-- build:js({.tmp,client}) app/app.js -->

<script src="components/base/base.framework.js"></script>

<script src="components/app/app.framework.js"></script>

<script src="app/app.js"></script>

<!-- injector:js -->

<script src="assets/javascripts/angulartics-ga-custom.js"></script>



// Gruntfile.js 일부 내역

 watch: {

            injectJS: {

                files: [

                    '<%= yeoman.client %>/{app,components}/**/*.js',

                    '!<%= yeoman.client %>/{app,components}/**/*.spec.js',

                    '!<%= yeoman.client %>/{app,components}/**/*.mock.js',

                    '!<%= yeoman.client %>/components/base/base.framework.js',

                    '!<%= yeoman.client %>/components/app/app.framework.js',

                    '!<%= yeoman.client %>/app/app.js'],

                tasks: ['injector:scripts']

            }, 

... 중략 ....

injector: {

            options: {},

            // Inject application script files into index.html (doesn't include bower)

            scripts: {

                options: {

                    transform: function(filePath) {

                        filePath = filePath.replace('/client/', '');

                        filePath = filePath.replace('/.tmp/', '');

                        return '<script src="' + filePath + '"></script>';

                    },

                    starttag: '<!-- injector:js -->',

                    endtag: '<!-- endinjector -->'

                },

                files: {

                    '<%= yeoman.client %>/index.html': [

                        [

                            '{.tmp,<%= yeoman.client %>}/assets/javascripts/*.js',

                            '{.tmp,<%= yeoman.client %>}/{app,components}/**/*.js',

                            '!{.tmp,<%= yeoman.client %>}/components/base/base.framework.js',

                            '!{.tmp,<%= yeoman.client %>}/components/app/app.framework.js',

                            '!{.tmp,<%= yeoman.client %>}/app/app.js',

                            '!{.tmp,<%= yeoman.client %>}/{app,components}/**/*.spec.js',

                            '!{.tmp,<%= yeoman.client %>}/{app,components}/**/*.mock.js']

                    ]

                }

            },


  모듈 리팩토링 준비가 되었다. 리팩토링할 대상을 선정한다. generator-angular-fullstack으로 애플리케이션을 생성하면 client/app/app.js 파일이 메인 파일이 된다. 먼저 app.js안에 애플리케이션 모듈 set과 config, run에 다양한 설정이 되어 있다면 이들을 base.framework 또는 app.framework으로 분리할 수 있는지 점검한다. 일반적으로 다음과 같은 상태로 app.js를 설정하고 한다. 





  위와 같이 app.js 한 곳에 다양한 설정들이 있는 것을 리팩토링을 통해 모듈단위로 나눌것이다. 이렇게 할 수 있는 것은 메인 모듈이 의존하는 모듈을 설정하면서 의존모듈을 로딩하면서 의존모듈의 config, run을 수행해 주고 그리고 자신의 모듈을 로딩하기 때문이다. app.js안에 app.framework과 base.framework 모듈의 의존관계를 설정하고 로그를 찍어보자. 먼저 의존관계의 모듈 config와 최종 애플리케이션 모듈인 jandiApp config를 로딩한 후 run을 다시 의존 모듈부터 수행시킨다. 즉, 애플리케이션을 최초 호출할 때 config, run 은 최초 한번 수행됨을 이용해서 각 기능의 초기화를 모듈단위로 나누는 것이다. 

// app.js 의존관계 설정 

angular.module('jandiApp', [

    'base.framework',

    'app.framework',

    ... 중략 ...]);


// config, run의 수행 순서 로그 

=========> Base framework Module config

=========> App framework Module config

=========> jandiApp Module config

=========> Base framework Module run

=========> App framework Module run

=========> jandiApp Module run




2. Config 모듈 생성 


 최초 환경 설정 부분을 모듈로 만들어서 app.framework 모듈에 의존성을 설정해 보자. app.js의 run 메소드에는 api 버전과 서버주소에 대한 기본 환경 설정이 있다. 이것을 config.js라는 별도의 모듈로 빼서 환경설정에 대한 부분을 독립시킨다. 

  - config.js 모듈 파일 생성 : 최초 환경 셋업이 필요한 부분은 config 모듈의 run 메소드에 설정한다. 즉, app.js 있던것을 옮겨옴 

  - config.service.js 서비스 생성 : 해당 서비스를 통해 어디서나 주입을 받아 사용토록 한다. 

$ cd web_client/components/app

$ mkdir config && cd config


// app.js 일부내역 

app.run(function() {

$rootScope.server_address   = configuration.api_address + "inner-api/";

      $rootScope.server_uploaded  = configuration.api_address;

$rootScope.api_version      = configuration.api_version;

$rootScope.configuration    = configuration;  

});


// components/app/config/config.js 내역 

(function() {

  'use strict';


  angular

    .module('app.config', [])

    .constant('configuration', {

      name                : 'local',

      api_address         : 'http://www.jandi.com/',

      api_version         : '2',

      ga_token            : 'UA-222222-1',

      ga_token_global     : 'UA-1111111-1',

      mp_token            : 'abcdefghijklmn',

      base_url            : '.jandi.io',

      base_protocol       : 'http://',

      main_address        : 'http://www.jandi.com/main/#/',

      app_store_address   : 'xxxx',

      play_store_address  : 'yyyy'

    })

    .run(run);


  /* @ngInject */

  function run($rootScope, config) {

    // server address, server api version 

    config.init($rootScope);

  }


})();


// components/app/config/config.service.js 내역 

(function() {

  'use strict';


  angular

    .module('app.config')

    .service('config', config);

    

  /* @ngInject */

  function config(configuration) {

    var self = this;

    this.init = init; 


    function init($rootScope) {

      // TODO : maybe remove next factoring

      // compatibility for current version

      $rootScope.server_address   = configuration.api_address + "api/";

      $rootScope.server_uploaded  = configuration.api_address;

      $rootScope.api_version      = configuration.api_version;

      

      // configuration constant service       

      configuration.server_address  = configuration.api_address + "api/";

      configuration.server_uploaded = configuration.api_address;

      configuration.api_version     = configuration.api_version;


      // config service

      self.server_address  = configuration.api_address + "inner-api/";

      self.server_uploaded = configuration.api_address;

      self.api_version     = configuration.api_version; 

    }

  }

})();


  config.js 에서 app.config 모듈을 run 하면서 config.service.js 를 주입받아 최초에 init()을 하고 있다. 파라미터로 $rootScope를 전달하는데 이는 초기 app.js에서 환경값을 $rootScope에 설정해서 사용하기 때문이다. 향후에는 $rootScope를 통해 접근하는 것을 없애고 config 서비스 통해 필요한 정보를 접근토록 할 예정으로 1차로 기존 버전의 애플리케이션 수정없이 환경설정으로 뺄 수 있는 상태로 리팩토링한다. AngularJS에서 초기 설정 정보를 접근하기 위한 원칙을 다음과 같이 세우면 좋다. 


  - AngularJS의 서비스는 singleton object 이므로 초기 값을 변수로 가지고 있고 접근자 API를 노출한다. 

  - AngularJS 서비스에 $scope, $rootScope를 절대로 주입하지 않는다. 오직 controller와 module.run 에서만 주입을 받아 사용한다. 

  - 따라서 서비스는 서비스를 주입받아 공통정보에 접근해야 한다. 


원칙에 따라 하나씩 모듈로 쪼개고 app.js에는 업무적인 로직에만 집중할 수 있도록 만든다. 향후 components/app/* 모듈은 사용자가 사용하는 웹화면과 관리자가 사용하는 웹화면에 동시에 적용되는 애플리케이션과 관련된 공통 모듈이 들어갈 것이다. 현재까지 모듈의 의존관계 모습은 다음과 같이 app.js의 jandiApp 의존관계는 app.framework 밖에 없다. 하지만 서로 의존관계가 설정되어 있기 때문에 jandiApp 모듈의 AngularJS 모든 컴포넌트는 base.framework과 app.framework의 의존관계 설정 모듈의 컴포넌트를 주입받아 사용할 수 있게 된다. 

// app.js 의존관계 

angular

  .module('jandiApp', [

    'app.framework'

  ]);


// app.framework.js 의존관계

 angular

    .module('app.framework', [

        'base.framework',

        'app.config'

      ])

    .run(run)

    .config(config);


// base.framework.js 의존관계

  angular

    .module('base.framework', [

      'ui.router',

      'ui.bootstrap',

      'gettext'

      'ngCookies',

      'ngResource',

      'ngSanitize',

      'ngAnimate'

    ])


  좀 더 구조적인 관계의 모듈 설정을 통해 구조적인 애플리케이션을 개발하는 첫단추를 꽤었다. 


'My Projects > Jandi' 카테고리의 다른 글

[Jandi] 팀 커뮤니케이션 서비스  (0) 2015.01.07
posted by Peter Note
2015. 1. 7. 11:29 My Projects/Jandi

Tosslab의 잔디는 팀 그룹간에 원활한 커뮤니케이션을 위한 도구이다. 채팅 및 파일공유를 할 수 있어서 업무 커뮤케이션 툴로 사용하기에 적당하고 모바일, 웹에서 접근할 수 있다. 



잔디의 기술


  잔디는 MEAN Stack 기술을 사용하고 모바일은 네이티브로 개발한다. 업무적인 커뮤니케이션 도구는 사무실에서 웹을 통해 사용할 경우가 많아서 특히 웹에 대한 사용성이 좋아야 한다. 블로그에서는 프론트앤드 영역만을 다루도록 한다. 기존에는 AngularJS v1.2.* 기반으로 되어 있고 개발을 진행함에 따라 웹 애플리케이션의 복잡도가 증가하여서 애플리케이션을 재구성할 필요가 발생하였다. 




모듈단위 애플리케이션 구성


 애플리케이션 복잡도를 단순화 시키고 애플리케이션을 구조화하는 방안이 필요하다. 애플리케이션을 구조화 한다는 것은 거시적인 부분과 미시적인 부분의 조합으로 이루어진다. 먼저 거시적인 부분은 아키텍쳐레벨로 AngularJS의 모듈을 구성하는 것이다. 


 

  AngularJS 모듈은 컴포넌트의 그룹이다. 모듈안에는 다양한 컴포넌트를 가지고 있고 컴포넌트 성격별로 구분해 놓을 필요가 있다. 위의 예에서 가장 기본으로 있어야할 AngularJS에서 제공하는 모듈 묶음과 어느 프로젝트에서나 쓰일만한 모듈을 묶어놓은 공통 모듈이 있을 것이다. 그리고 업무적으로 추상화할 필요가 있는 업무 공통 모듈이 존재하고 업무를 처리하는 업무 모듈식으로 나눌 수 있다. 하위 모듈은 상위 모듈을 참조할 수 없고 상위 모듈만이 하위모듈안의 컴포넌트를 DI(Dependency Injection) 방식으로 사용을 할 수 있다. 




제너레이터를 통한 애플리케이션 구성


 기존의 애플리케이션을 보기하면서 다시 재구성하기 위해 무엇부터 시작을 해야할까? 


  - Yeoman Generator를 선정한다. generator-angular-fullstack을 사용할 예정이다. 

  - 자바스크립트 코딩 스타일은 구글의 자바스크립트 스타일 가이드를 따른다. 

  - AngularJS의 코딩 스타일은 존파파의 AngularJS 스타일 가이드를 따른다.


  generator-angular-fullstack의 템플릿을 존파파의 가이드에 따라 변경한 프로젝트를 만들어 본다. 불필요한 예제는 제거하고 몇가지 영역의 템플릿만을 취할 것이다. 먼저 generator-angular-fullstackgenerator-ng-component를 각각 git clone 하고 명칭을 generator-jdi, generator-jdi-component라고 바꾸고 내부의 .git폴더를 제거한 후 각 템플릿의 내용을 파파죤스 가이드에 따라서 수정을 한다. 

$ git clone https://github.com/DaftMonk/generator-angular-fullstack.git

$ git clone https://github.com/DaftMonk/generator-ng-component.git


$ mv generator-angular-fullstack generator-jdi

$ mv generator-ng-component generator-jdi-component


$ cd generator-jdi && rm -rf .git

$ cd generator-jdi-component && rm -rf .git


 파파죤스 가이드에 따라 generator-jdi-component/templates 폴더 밑의 모든 앵규러 컴포넌트를 다음과 같은 형식으로 수정한다. 

   + IIFE : Immediately Invoke Function Expression

   + 앵귤러 모듈 변수를 만들지 않음 

   + 컴포넌트의 펑션을 밖으로 뺌

   + DI 하는 부분은 ng-annotation을 이용함으로 주입받는 펑션위에 /* @ngInject */ 를 둚

(function() { 

  'use strict';


  angular

    .module('<%= scriptAppName %>')

    .controller('<%= classedName %>Ctrl', <%= classedName %>Ctrl);


  /* @ngInject */

  function <%= classedName %>Ctrl($scope) {

         

  }

})();


 수정한 내역에 대해 테스트는 다음과 같이 진행을 하면 된다.  먼저 테스트용 test 폴더를 하나 만든다. 테스트 폴더 밑에 node_modules 폴더를 만들고 밑으로 generator-jdi와 generator-jdi-component 에 대해 심볼릭 링크를 건다. 각 generator-* 폴더로 들어가 npm install을 해준다. 이제는 test밑에서 "yo jdi Jandi" 명령을 치면 애플리케이션 생성 프롬프트를 묻게 된다. 애플리케이션 템플릿은 generator-jdi/app/templates 밑에 존재하고 여기에 있는 파일도 파파죤스 스타일 가이드에 따라 수정을 해준다. 

$ mkdir test && cd test

$ mkdir node_modules && cd node_modules 


$ ln -s <fullPath>/generator-jdi  generator-jdi

$ ln -s <fullPath>/generator-jdi-component generator-jdi-component


// 둘은 같은 디렉토리에 있어야 함 

$ cd <fullPath>/generator-jdi-component && npm install

$ cd <fullPath>/generator-jdi && npm install 


$ cd test 

$ yo jdi Jandi


  각 수정한 generator-jdi, generator-jdi-component는 링크를 참조한다. 이제는 누구나 사용할 수 있도록 npm repository에 등록을 한다. npm publish 로 package.json 파일에 등록된 내역을 기반으로 배포가 된다. 따라서 clone한 generator의 버전을 따르지 않고 최초 0.0.1 버전으로 수정해 배포한다. 

$ cd generator-jdi-component 

$ npm publish

+ generator-jdi-component@0.0.1


$ cd generator-jdi

$ npm publish

+ generator-jdi@0.0.1


 이제 글로벌로 generator-jdi만을 설치해서 어디서나 "yo jdi <App명칭>" 명령을 수행해 최초 애플리케이션 골격을 만들 수 있다. 

$ npm install -g generator-jdi

$ mkdir web_tiger && cd web_tiger

$ yo jdi Jandi



'My Projects > Jandi' 카테고리의 다른 글

[Jandi] 애플리케이션 모듈 리팩토링  (0) 2015.01.21
posted by Peter Note
2015. 1. 5. 20:25 AngularJS/Concept

AngularJS v1.3에서 많은 기능들이 새롭게 추가되었지만 우선 성능에 영향을 미쳤던 부분을 해결하는 방법을 알아보자. 



양방향 데이터 바인딩 이해


  AngularJS의 특징중 양방향 데이터 바인딩은 reactive programming의 구현체라고 할 수 있다. Meteor의 Blaze, Facebook의 React도 같은 기능을 제공한다. 이들은 HTML과 JS사이에 특별한 코드의 등록없시도 HTML->JS / HTML <- JS 양방향으로 데이터 갱신이 가능하다. AngularJS에서 양뱡향 데이터 바인딩의 중요 매개체는 $scope이고 해당 객체 내부에는 데이터의 변경을 감시하는 $watch가 있는데, 모든 개별 데이터마다 $watch가 등록된다. 하기와 같이 $scope.name에 대한 expression도 watcher(감시자, 즉 $watch)가 등록된다. (예제)

<span> Hi {{name}}</span>


  name이 $scope에 속성으로 선언되어 HTML에서 사용을 하면(사용하지 않는 속성은 등록되지 않음) AngularJS는 $watch를 모두 등록하고 $scope 속성 하나라도 변경이 되면 Duty-Checking방식으로 AngluarJS Context안의 $digest 루프를 돌면서 매칭되는 $scope의 속성을 사용하는 DOM 내역을 동적으로 변경한다. 여기서 생각해 볼것은 만일 화면에 뿌려지는 $scope의 속성값이 100개이고(테이블이나 리스트 같은 경우 ng-repeat을 사용한다면) 최초 화면이 뿌려진 후 단 1개만이 사용자의 액션이나 실시간 Push를 통해 변경되는 것이어도 100의 $watch를 $digest루프를 돌며 변경을 체크하게 된다. 100개가 아니라 10만개라면 어떻게 될까? 분명 성능상에 영향을 미칠것이다. $watch, $digest에 대한 사항은 블로그를 읽어보자




Watch Expressions 성능 개선


  one-time expression은 최초 digest 루프를 한번 타고 값이 설정되면 그 다음에 다시 digest 루프를 타지 않게 해주는 것이다. 따라서 최초 동적 바인딩이 이루어진 후에는 $watch에서 제거되어 digest 루프를 타지 않도록 함으로 성능상의 이점을 누릴 수 있다. 사용방법은 간단히 $scope의 속성앞에 :: 를 하기와 같이 표기한다. (예제)

<span> Hi {{::name}}</span>


  이제 최초에 한번 데이터를 바인딩한 후에 동적 변경이 필요없는 HTML안의 AngularJS Expression들에 One-Time-Binding을 사용하자.




<참조> 


  - Explorering Angular v1.3 - One-Time-Binding

  - $watch, $digest는 무엇인가?

posted by Peter Note
2015. 1. 5. 12:32 My Projects/Bagle

베이글은 그룹 컨텐츠 공유 서비스이다. 그룹 관리자는 멀티미디어 컨텐츠 및 설문 조사를 위한 다양한 내용을 개제할 수 있고 멤버는 이에 대한 답변을 하거나 댓글은 단다. 페이스북과 유사한 UI이지만 퍼블릭 SNS가 아닌 버티컬 SNS를 지향한다. 





베이글의 탄생


  이전 StudyGPS의 서비스 v1.5를 v2.0으로 개편하면서 서비스이름을 새로 공모했고 최종적으로 베이글을 선택했다. 미국에서 프로젝트를 하면서 금요일 아침마다 먹었던 베이글이 생각나서 개발팀 이름도 MondayBread로 한 마당에 베이글이 어떠냐는 의견을 내놓았는데 잘 매칭되어 채택이 되었다. 베이글은 교육을 타케팅하는 서비스이다. 주로 선생님이 그룹을 만들고 학생이 답변을 다는 형태이다. 선생님은 학생들에게 학업과 관련한 컨텐츠를 제공하면서 이에대한 설문 조사를 수행할 수 있다. 컨텐츠는 파일 첨부, 이미지, 동영상등을 게재할 수 있고 설문형식은 주관식, 객관식등의 조사와 댓글을 통해 의견을 들을 수 있다. 


  보수적인 교육시스템에서는 자유로운 퍼블릭 SNS로 쌍방향 소통 보다는 단방향의 문제를 내는 사람과 문제를 푸는 사람을 구분하여 관심분야의 그룹을 운영할 수 있도록 하는데 목적이 있다. 




베이글의 기술


  스타트업에서 인기를 누리고 있는 MEAN (MongoDB ExpressJS AngularJS Node.js) 스택을 사용한다. 모바일은 하이브리드 앱방식으로 개발을 진행하고 이를 위한 프레임워크로 Ionic을 사용한다. 그외 Sass트위터 부트스트랩도 함께 사용한다. 하이브리드 앱 개발에서 중요한 체크 포인트는 다음과 같다. 


  1) 네이티브 UX에 근접한 경험을 줄 수 있는가?

  2) 네이티브 UI 컴포넌트와 같이 잘 정의된 레이아웃이나 컴포넌트가 있는가?

  3) HTML과 Javascript의 분리해서 네이티브처럼 개발을 진행할 수 있는가?


  1)번을 위한 약간 2주간 AppGyver를 사용해 보았으나 제약 사항이 많고 특히 MPA(Multi-Page Application)으로 WebView를 정말 Multi개만큼 생성해서 운영해야 제대로된 네이티브 기능을 사용할 수 있다. 이것의 단점은 모든 뷰가 하나의 AngularJS SPA가 되버린다는 것이다.  즉, 화면별로 WebView가 개별적으로 운영되면서 나타나는 현상이다. 하지만 steroids와 scanner 앱을 통해 편한 개발환경을 제공하고 있다. 따라서 아주 간단한 App을 만든다면 AppGyver도 쓸만한 프레임워크이자 플랫폼라 생각한다. AppGyver의 supersonic 하이브리드 프레임워크도 결국 Ionic을 내부적으로 사용하고 있고 SPA 방식으로 개발하면서 네이티브 수준의 UI와 UX를 선사하는 Ionic 프레임워크를 최종 선택하게 되었다. 올해(2015)초에는 정식 v1.0이 릴리즈 될 예정이고 ionic 내부에 angular, angular-sanitize, angular-animation, ui-router를 의존관계로 가지고 있고 AngluarJS v1.3.6 최신버전을 사용하고 있다. 


 2)번은 Sass로 일정부분 디자인을 하고 트위터 부트스트랩과 같은 UI 프레임워크를 사용하면 되고 3)번은 reactive programming을 할 수 있는 AngularJS의 양방향 데이터 바인딩을 사용하면 HTML과 JS파일을 분리해 개발을 할 수 있다.  


앞으로 개발하면서 느꼈던 점과 기술적인 이슈등을 회고식으로 적어볼 예정이다. 


  

posted by Peter Note
2015. 1. 3. 19:25 Angular/Prototyping

구글 폴리머기반으로 자신만의 Web Components 를 만들어 보자. 아주 초간단 웹 컴포넌트이지만 기반 컴포넌트를 설치하고 어떻게 구동되는지 손으로 익혀본다. 




설치하기 


  - 폴러머를 시작하기 위해 zip파일을 받을 수 있지만 클라이언트 컴포넌트 의존관리 툴이 바우어(Bower)를 사용한다. 

     바우어는 노드(Node.js)기반위에 돌ㄹ아가기 때문에 노드를 설치하고 바우어도 설치한다. 

  - 바우어를 통해 프로젝트를 초기화 해보자. bower init 후에 그냥 끝날 때가지 엔터를 친다. bower.json 환경파일이 생성된다. 

$ mkdir tutorial && cd tutorial

$ bower init 


  - 폴리머를 설치한다. polymer.js 는 Web Components를 지원하기 위한 polyfill 파일인 webcomponents.js 파일도 포함한다. 

    + polyfill은 Web Components 스팩을 지원하지 않는 브라우져에서도 Web Components를 사용할 수 있도록 해주는 파일이다. 

       따라서 과거 브라우져는 webcomponents.js (과거는 platform.js였음) 파일을 추가해야 한다. 

     + Chrome 36+ 이상 버전은 Web Components 스팩이 구현되어 있기 때문에 polyfill 파일이 필요없다. 

$ bower install --save Polymer/polymer




처음 만들어 보는 웹 컴포넌트 


  - 웹컴포넌트를 만든 후 html안에서 사용한다. 

  - 먼저 폴리머 웹 컴포넌트를 정의한다. 

    + 폴리머 엘러먼트를 사용하기 위해 polymer.html을 추가한다. 

    + 사용자 정의 웹컴포넌트 이름은 hi-dowon이다. 구분은 "-" 을 꼭 사용한다. 

    + html에서 사용할 때 public으로 노출 시킬 attribute로 name을 지정한다. 

    + <template>와 <script>에서 상호 작용한다. 스크립트 태그에 지정한 값이 template 쪽으로 {{}} 사용해 양방향 바인딩 된다. 

tutorial> mkdir elements && cd elements

tutorial/elements> vi hi-dowon.html 


// hi-dowon.html 내용 

<link rel="import" href="../bower_components/polymer/polymer.html">


<polymer-element name="hi-dowon" attributes="name">

  <template>

    <span> This is <b>hi-<span style="color: {{color}}">{{owner}}</span></b> tag <br>

    <span> And hi {{name}}</span><br>

    <input id="message" value="{{name}}">

    <button on-click="{{setFocus}}">Set Focus in name input</button>

  </template>

  <script>

    Polymer({

      owner: 'Dowon',

      color: 'red',

      name: 'youngsik',

      setFocus: function() {

        this.$.message.focus();

      }

    })

  </script>

</polymer-element>


  - 이제 elements/hi-dowon.html 파일을 사용하는 index.html 파일을 작성한다. 

    + 웹 컴포넌트는 HTML imported를 통해 사용하고자 하는 웹컴포넌트를 조합(Composition)해 확장(Scale-out)하는 방식이다. 

    + 모던 브라우져가 아닌 구버전의 브라우져에서 웹컴포넌트 스펙지원을 위해 polyfill파일인 webcomponents.js 파일추가한다. 

       Chrome 36+ 이상 버전은 polyfill 설정이 필요없다. 

<!DOCTYPE html>

<html>

    <head>

        <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>

        <link rel="import" href="./elements/hi-dowon.html">

    </head>

    <body>

        <hi-dowon name="ok"></hi-dowon>

    </body>

</html>


  - 결과 수행

    + 파이썬의 심플 서버를 뛰어서 호출해 본다. 

tutorial> python -m SimpleHTTPServer 8000


// 결과 화면 : 버튼을 클릭하면 포커스이동 


  - 폴리머의 레이어는 3계층으로 나뉜다 

    1) Web Components : Web Components 스팩을 지원하지 않는 브라우져를 위한 web components polyfill 레이어 

    2) Polymer 라이브러리 : 사용자 정의 엘러먼트(Custom element)를 위한 선언적 신택스를 제공

    3) Elements :Core 와 Paper element와 같이 기정의된 웹 컴포넌트 제공. 




1. Polymer에서 Custom Elements


  - Custom Element is True Element. 사용자 정의 엘러먼트를 사용하는 이유를 보자.

  • Reduce the amount of code you have to write. : 누군가 만들어 놓은 엘러먼트가 있다면 Don't invent한다. 
  • Express the function of the code. : 
  • Encapsulate internal details. : 코드 내부를 캡슐화 할 수 있다 
  • Implement APIs per element type. : 엘러먼트별 API가 있고 애트리뷰트로 접근한다. 
  • Increase productivity by letting you reuse elements. : 엘러먼트를 조합해서 생산성을 높일 수 있다. 
  • Use inheritance to create element tags based on other tags. : extends 키워들 통해 custom element를 확장할 수 잇다


  - 웹 컴포넌트의 Custom Element는 다음과 같이 작성을 해야하지만 폴리머를 쓰면 단순히 <polymer-element> 태그를 사용하면 끝!

    + Customer Element 명칭을 지을 땐 반드시 "-"이 있어야 한다. (polymer element 선언 참조)

// 코딩 

var myTag = document.registerElement('my-tag');


// 선언적 태깅 

<polymer-element name="my-tag">

  <template> 

    <div> hello dowon </div> 

  </template>

  <script>

     Polmer();

  </script>

</polymer-element>


  - extends 키워드를 통해 기존 엘러먼트를 확장할수 있고, 부모의 메소드와 속성을 자식 엘러먼트가 상속받는다. 

    또한 오버라이딩도 가능한다. 

  - 엘러먼트 종류로 UI 렌더링되는 엘러먼트와 No-UI 엘러먼트를 만들 수 있다. 예로 <core-ajax>은 XHR 요청을 마크업으로 할 수 있게 한다. 

<core-ajax url="http://gdata.youtube.com/feeds/api/videos/" auto params='{"alt":"json", "q":"chrome"}' handleAs="json"></core-ajax>

<script>

  var ajax = document.querySelector('core-ajax');

  ajax.addEventListener('core-response', function(e) {

    console.log(this.response);

  });

</script>




2. Polymer에서 Shadow DOM


  - 프로그램적으로 Shadow DOM을 하려면 createShadowRoot를 넣어야 하지만 Polymer에서는 <template> 태그를 사용한다. 

    + <span> <content> <footer>는 다른 커스텀 엘러먼트안에 있을 때 완전 캡슐화되어 숨겨진다는 것을 명심하자. 

<polymer-element name="my-custom-element" noscript>

  <template>

    <span>People say: </span>

      <content select="qq"></content> 

    <footer>sometimes</footer>

  </template>

</polymer-element>

  

  - DOM은 3가지가 있다. Light DOM, Shadow DOM, Composed DOM

     + Light DOM : 하기와 같이 my-custom-element 안에 <qq> Hi dowon </qq>로 포함된 DOM 이다. innerHTML로 접근이 가능하다.  

<my-custom-element>

  <qq> Hi dowon </qq>

</my-custom-element>


    + Shadow DOM : <polymer-element> 태그 안에 <template> ... </template> 태그안에 정의된 DOM 이다. 

       DevTools에서는 #docuement-fragment로 표기되고 사용자에게 숨겨져있고, <my-custom-element> 자식노드로 접근이 안된다. 


    + Composed (rendered) DOM : 실제 브라우져에 렌더링되는 DOM 이다. 

       light DOM이 shadow DOM에 포함되어 조합된 DOM이 보여진다. (이것은 마치 AngluarJS의 Directive에서 transclude와 유사하다)

<my-custom-element>

  <span>People say: <qq>Hi dowon</qq></span>

  <footer>sometimes</footer>

</my-custom-element>




3. Polymer에서 HTML imports 


  - <link> 태그를 사용해 HTML 도큐먼트를 재사용하면 된다. 

<link rel="import" href="my-custom-element.html">




4. Polymer에서 Web Animations


  - Web Animation 관련한 CSS Transitions, CSS Animations, SVG Animations /SMIL 스팩이 있다. 

    + 구현체

    + 아직은 복잡한 것을 표현하기에 부족함이 존재

  - 애니메이션 cost를 줄이고, animation 스팩끼리 상호작용할 수 있고, 스팩 작성자나 브라우져 벤더가 한 곳에서 사용할 수 있게하자.

  - Web Animations 모델은 웹에 애니메이션 컨텐트를 엔진에 묘사하는 것이다. 

     엔진은 CSS Transitions, CSS Animations, SVG Animations 를 지원한다. 

    + 자바스크립트 API를 통해 애니메이션을 정의 

    + Animation 오브젝트를 사용 그외 AnimationEffect, AnimationGroup, AnimationSequence 오브젝트를 사용한다. 




5. Polyfill로서 Web Components


  - web components 기술이 모든 브라우져에 구현되어 있지 않기 때문에 webcomponents.js polyfill 파일이 필요함 

  - webcomponents.js 는 다음의 라이브러리를 포함하고 있다. 

  • Web Components:

  • Dependencies required by the Web Components polyfills:


  - 설치는 바우어로 하고 웹 컴포넌트를 사용하려는 HTML에 <script> 태그로 포함시킨다. 

$ bower install --save webcomponentsjs


// html

<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>




<참조> 

  

  - Polymer 10 minutes

  - Understanding web components

  - 구글 폴리머 튜토리얼


posted by Peter Note
2015. 1. 3. 11:04 Deep Learning

그룹(그룹핑)에서 데이터 클러스터링(군집화)에 대해 알아본다. 



01. 군집발견 (Discover Clustering)


  - supervised learning : 신경망, 결정트리, svm, 베이지안 필터링

  - unsupervised learning : 군집은 올바른 답을 찾는 것이 아니라 데이터 집합 내에서 구조를 발견하는 것이다. 

    + NMF : non-nagative matrix factorization (ch10.)

    + SOM : self-organization maps

  - Clustering & Classification 차이? 

  


02. 단어 벡터 


  - 군집용 데이터를 준비하는 일반적인 방법은 항목 비교에 사용될 숫자 특성들의 공통집합을 결정하는 것이다. 

  - 블로거 군집화 : 피드안에 출현한 특정 단어들의 횟수 (피드 다운로드 -> 글에서 텍스트 추출 -> 빈도수를 표로 만든다)

    + universal feed parser를 통해 제목, 링크, 게시글을 추출가능 -> 빈도수 최대~최소 사이 단어추출 -> 데이터 세트 파일로 저장

  


03. 계층적 군집화 


  - 유사한 두 그룹을 계속 병합한다 (병합의 조건은?)

    + 노드들을 계층별로 배치한 계통도(dendrogram:덴드로그램)를 얻는다.

    + 덴드그램을 통해 어떤 항목들이 군집의 끝단에 있는지 확인가능 및 항목간의 떨어진 거리도 알수 있음 

 - 거리는 피어슨 계수를 통해 1.0이면 두항목은 완전 일치이고 0.0에 가까우면 전혀 관계가 없음

 - 새로운 군집용 데이터는 앞의 두 군집들에 대한 데이터의 평균값이다. 단 한개의 군집만 남을 때까지 반복 수행함



04. 계통도 출력 


  - 군집들을 계통도 형태로 그려보면 해석이 훨씬 편리하다. 

 



<참조>


  - unsupervised learning  위키 

  - Clustering in R

  - Decision Tree (결정 트리)

  - K means : 러닝커브를 통해 k 개까지의 군집화를 수행하는 방법. 이전은 1또는0, yes또는no로만 해서 K 개까지 돌림

'Deep Learning' 카테고리의 다른 글

[ML] 7주차 - 6장 문서 필터링  (0) 2015.02.07
[ML] 6주차 - 5장 최적화  (0) 2015.01.31
[ML] 3주차 - 추천하기  (0) 2014.12.13
[ML] 2주차 - 추천하기  (0) 2014.12.06
[ML] 1주차 - 시작하기  (0) 2014.11.22
posted by Peter Note

구글은 테스트를 어떻게 하는가라는 책에서 SET(Software Engineer in Test)가 프로토콜 버퍼를 기반으로 개발하는 서비스가 외부의 서비스와 연계를 위한 투명성을 확보하고 프로토콜 버퍼의 데이터 스팩에 기반해 통합 테스트를 위해 Mock, Fake를 작성한다는 이야기가 나온다. xUnitPattern 사이트를 보면 Test Double에 대한 내용이 나온다. 이것은 테스트하려는 시스템(SUT) 즉 개발하는 서비스에서 단위 테스트를 하려 할 때 실제 의존하는 컴포넌트 (Depended-on Component, DOC)를 사용할 수 없으면 Test Double로 교체해서 테스트를 할 수 있다. Mock, Fake, Stub등이 하기 그림과 같이 Test Double 박스에 위치한다. 그래서 Mock, Fake, Stub등은 Test Double에 속한다. 







Mock Object 


  - 위키피디아에서 Mock Object에 대한 정의

    + 목 오브젝트는 실제 오브젝트의 행위를 흉내낸(simulated) 오브젝트이다. 

    + 주로 어떤 오브젝트의 행위를 테스트하기위해 만든다

    + 실제 오브젝트의 인터페이스를 사용한다. 

    + 예외(exception)나 행(hang)을 일으켜 외부시스템과 연계시 일어날 수 있는 오류를 테스트 할 수 있다. 

    + TDD(Test-Driven Developmen)에서 목 오브젝트를 사용해 단위 테스트(Unit Test)를 수행해 개발자가 SUT(System Under Test)

       하에서 다른 의존관계 라이브러리없이 기대되는 행위 테스트에 집중토록 한다. 

    + 외부연계로 데이터베이스, 웹서비스, 다른 서비스 연계등에 대해 SoC(Separation of Concerns)을 통해 해결토록 도와준다. 

       앵귤러는 module 개념으로 복잡한 웹 개발환경을 확장가능하게 만들어 주고있다. 

       이런 외부 연계에 관여하는 오브젝트를 목 오브젝트로 만들어 테스트에 집중토록 한다. 

In object-oriented programming, mock objects are simulated objects that mimic the behavior of real objects in controlled ways. A programmer typically creates a mock object to test the behavior of some other object, in much the same way that a car designer uses a crash test dummy to simulate the dynamic behavior of a human in vehicle impacts.


 - xUnit Pattern 의 Mock Object 

   + 목 오브젝트는 행위를 검증하는데 좋다 (Behavior Verification)

   + 그림에서 DOC (Depended-on Component)를 대신해서 Mock Object를 사용


    


  - 스택오버플로우

    + Stub : 미리 정의된 답을 제공하는 메소드를 가진 오브젝트 

    + Mock : 받기를 기대하는 호출스팩을 미리 프로그램한 오브젝트  

    + Fake : 제한된 능력을 가진 오브젝트 

    + Martin Fowler 이야기 : Mocks Aren't Stubs

Fake objects actually have working implementations, but usually take some shortcut which makes them not suitable for production


Stubs provide canned answers to calls made during the test, usually not responding at all to anything outside what's programmed in for the test. Stubs may also record information about calls, such as an email gateway stub that remembers the messages it 'sent', or maybe only how many messages it 'sent'.


Mocks are what we are talking about here: objects pre-programmed with expectations which form a specification of the calls they are expected to receive.





Fake Object 


  - 스택오버플로우 

    + 고정된 데이터와 로직도 없는 인터페이스를 구현한 클래스 

Fake: a class that implements an interface but contains fixed data and no logic. Simply returns "good" or "bad" data depending on the implementation.


Mock: a class that implements an interface and allows the ability to dynamically set the values to return/exceptions to throw from particular methods and provides the ability to check if particular methods have been called/not called.


Stub: Like a mock class, except that it doesn't provide the ability to verify that methods have been called/not called.


  - xUnitPattern의 Fake Object


    


   * stub, spy에 대해서는 xUnitPattern 사이트 참조하자. 실제 예제를 앵귤러로 넣어 보면 좋겠다. 




<참조> 


  - Test Double 위키피이다

  - Test Double Pattern




'Computer Engineering > Want to Know Terms' 카테고리의 다른 글

[Terms] Syntactic sugar  (0) 2015.01.01
posted by Peter Note

전산이나 컴퓨터 용어를 그때 그때 찾아 보지만 정리를 하지 않고 있다. 그냥 잡학 사전처럼 나만의 용어 정리를 해보고 싶다.



Syntactic sugar

  

  - 위키피디아

    + 사람이 이해하고 쉽고 표현하기 쉽게 컴퓨터 언어를 디자인해 놓은 문맥이다. 

    + 사람이 사용하기 달콤하다는 것에 유래되었고 이들은 깔끔하고 명확하게 표현가능하다는 특징을 지닌다. 

    예로 Array를 든다.

get_array(Array, vector(i, j)) 로 표현하는 대신 Array[i,j] 와 같이 표현한다. 또는 

set_array(Array, vector(i,j), value) 를 Array[i,j] = value로 표현한다. 


  - 프로그래밍으로의 신택티 슈거

    + JSON can be considered SyntacticSugar for XML.

All languages are eventually translated to machine code, and therefore all language constructs could be termed (extremely useful) "sugar" around the operations of the machine.


  - 구글러 오스마니가 표현한 글을 보고 궁금해서 찾아봄 

Preview of ES6 Classes in Chrome. Syntactical sugar over today’s objects and prototypes. Cleaner syntax:


Traceur and 6to5 support minimal ES6 classes, https://6to5.github.io/features.html#classes-1 & https://github.com/esnext/es6-class compiles them down to ES5 too


궁금한건 빨리 정리하고 가자. 

'Computer Engineering > Want to Know Terms' 카테고리의 다른 글

[Terms] Test Double - Mock, Fake  (0) 2015.01.02
posted by Peter Note
2014. 12. 31. 19:31 LLM FullStacker/Python

Dart는 점점 복잡해 지는 웹 애플리케이션을 좀 더 견고하고 확장 가능토록 만들기 위해 나온 언어이다. 구글의 수많은 웹 서비스를 생각해보면 자바스크립트가 아니라 좀 더 낳은 개발 언어로 웹을 개발하고 싶어할 것이고 그러한 요구에 자체적으로 Dart를 개발하고 퍼트리는 느낌이랄까. 마치 서버에서 Go를 만들어 자신들의 서비스에 광범위하게 쓰고 있는 것과 같은 이치일것 같다. 그래서 적어도 현업에서 사용하지않는다 해도 어떤 모습이 미래의 웹 개발 언어가 되어야 하는지 살펴볼 필요는 있겠다. 생각은 이렇다. 웹 프론트앤드 개발은 Dart를 서버 백앤드 개발은 Go를 구글은 실험하고 있는 단계이다. 이들 모두 3년이상 지속해서 소개되고 사용되고 구글 클라우드에 적용되고 있다. 그러나 Dart는 프론트 백앤드를 모두 개발할 수 있다. 우선은 프론트앤드에 집중해서 보도록 한다. 






Dart 개념 익히기 

  

  - Dart 언어 개발자인 길라드 브라차로 부터 다트에 대해 들어보자

    + Dart type checking system에 대해 설명하고 있다. 

    + 자바의 JVM 스팩을 쓴 개발자 답게 언어 전문가의 냄새가 물신난다.

   

  - Dart 언어 개발자의 전체 소개 동영상이다. 

    + 다트 플랫폼 전체를 간략히 잘 설명해 주고 있다. 꼭 보자 

   


  - Dart언어의 특징을 간략히 보도록 하자. (한글)

   - 처음은 무조건 사이트부터 방법해서 https://angulardart.org/ 

    + 다트 소개 영상이다. 모든 것이 잘 요약되어 있다. (시리즈 동영상들)

    + Angular의 철학에 근거해서 만들어 졌기 때문에 테스트 가능하고 간결한 웹개발을 이끈다.

    + Dart 언어를 사용하기 때문에 class, annotation, inheritance등은 자바 개발자에게 익숙함을 제공하고 확장가능한 웹을 만듦

    + 모던 웹을 위한 Shadow DOM, Web Component를 시작할 수 있다. 

    참조)  테스트 가능성은 Angular의 DI (Dependency Injection)을 통해 가능해 진다. 

             Two-way data binding을 통해 간결한 코드 개발이 가능하다.

    


  - Dart로 시작하는 AngularDart는 Web Component 스팩을 구현하고 있는 Polymer.dart와 함께 어떤 방향으로 가는지 먼저 본다. 

    + 본영상이 JavaZone에서 발표됐다는 것은 자바 개발자에게 아주 익숙한 신택스로 Dart 언어가 구성되었기 때문일 것이다. 

    


  - Dart 언어에 대해 개념을 잡자

    + https://www.dartlang.org

  - DartEditor를 사용한다. 

    + 이클립스 기반이어서 자바개발자에게 친근감 마저 든다. 

    + 패키지 import 와 이클립스 debugging 등 확장자가 .java 에서 .dart로 바뀌고 웹과 서버 모두를 개발 할 수 있다. 

    


  - 문법 요약은 Dart Tip 11개에 대한 동영상을 보자





Dart 익히기 


 - Dart를 가지고 웹을 개발할 때는 어떻게 하는지 보자 

    

  

  - 웹 애플리케이션을 개발과정을 읽어보자 다트로 어떻게 하는 거지?

    + 다트는 기본적으로 Dart VM 에서 돌어간다. 웹에서 작동하려면 두가지 방법이 있다. 

    + 첫째는 Chormium 브라우져에 Dart VM을 넣은 Dartium 브라우져에서 수행. 

       개발시 Dartium으로 수행하면 DartEditor(Eclipse기반)에서 바로 디버깅이 가능하다. 

    + 둘째는 dart2js 툴 또는 pub build를 이용해서 자바스크립트로 바꿔서 일반브라우져에서 사용하는 것이다.  

    + DartEditor에서 Tools --> Pub Build(integrated JS)를 선택하면 모던 브라우져 모두에 수행 가능한 파일이 생성된다.

       


  - 본격적으로 Dart 강좌를 들어가자

  - Dart의 유용한 글과 라이브러리는 다토스피어(http://www.dartosphere.org/) 에서 검색한다. 

    + 다크관련 블로그 글들

    + 라이브러리 업데이트 현황

    + https://pub.dartlang.org 에서 배포된 다트 라이브러리를 찾을 수 있다.




Dart 는 메이져 모던 브라우져에서 수행된다. 


  - Dart를 Javascript로 변환해 주는 과정에 대한 설명 

    + 자바스크립트로 변환하고 top level 펑션은 $.main 이다. 

    + Tree Shaking 통해 필요없는 코드를 떨구어내고 자바스크립트로 전환한다는 의미 

    + Dart의 특징을 자바스크립트 코드로 어떻게 이식하고 있는지 설명한다. 예) Class 상속

    + JS로 전환할 때 많은 알고리즘과 방법이 동원되고 있다. 역시 문제 해결을 위해 알고리즘이 중요함 

    + JS로 전환할 때 --minify 로 사이즈를 줄여서 얻을 수 있다.(45분) 

    + 손으로 작성한 JS보다 성능이 좋다. 결론은 이것이다. 모바일에서 더 낳은 성능을 얻고 싶다면!!!

     

     



  계속해서 업데이트 예정...




<참조> 

  

  - dartlang.org




posted by Peter Note
2014. 12. 27. 16:58 Angular/Prototyping

Web Components(웹 컴포넌트)는 W3C에서 나왔다. 웹 도큐먼트의 표현을 위젯이나 컴포넌트로 빌딩하는 개념으로 핵심은 HTML 앨리먼트끼리 상호작용하고 인캡슐레이션되게 만드는 기술이다. 2013년2014년 Google I/O 에서 Web Components에 대해 바이들맨이 설명을 상세히 하고 있다. 또한 Web Components org 사이트가 존재하여 관련 정보를 얻을 수있다. 







Web Components 구성 요소 


    


  - Shadow DOM

    + DOM과 Style을 인캡슐레이션 해준다. 

    + 예전에는 iframe등을 통해 위의 효과를 얻었다. 

    + shadow dom 외부의 js는 접근이 안된다. 

    + shadow boundary의 style은 외부로 영향을 미치지 않는다. 

    + polyfill 이라고 브라우져가 지원하지않으면 기능을 지원할 수 있게 도와주는 스크립트 파일이라고 보면된다. 

       webcomponents.js 파일 같은 경우가 polyfill 파일이고 이것을 <script src="webcomponents.js"/> 하면 Shadow DOM에 대해 

       모든 브라우져에서 사용할 수 있다. 하지만 브라우져 버전은 확인해야 함. 


  - HTML Templates

    + <template id="name"> ... </template> 형태로 DOM에서 작용할 테그를 정의한다. 

    + <template> 태그에 있는 것은 DOM에 들어가지 않는다. 

    + 스크립트를 통해 DOM에 포함되는 구조이다. 

    + <template> 태그는 크롬과 몇개 브라우져만 지원하고 있다. 그러나 이것 역시 polyfill을 설치하면 모든 브라우져에서 수행가능함


  - Custom Elements

     + HTML에 새로운 태그를 정의하는 것이다. 마치 Angular의 Directive(지시자)와 유사하다. 

     + <element name="x-dowon"> ...</element> 으로 하면 <x-dowon> 태그를 사용할 수 있다. 

     + 앨러먼트의 lifecycle 콜백이 존재한다. 

     + 사용자 정의 앨러먼트를 만들기 위해 Shadow DOM, HTML Template 등이 필요한 것이다.

     + document에 register(<custom elements>)를 등록한다. 


  - HTML Imports 

     + <link rel="import" href="x-dowon.html"> 설정을 <head> 태그안에 둔다. 

     + 사용하려는 웹 컴포넌트의 확장자 .html을 import 타입으로 link 태그를 사용한다. 


    * 발표 자료 링크

    


    ** Web Components 스팩에 준수하여 개발된 Custom Element는 서로 조합하여 사용가능하다. 




Polymer와 Web Components


  - 구글이 웹 컴포넌트 스팩에 따라 구현한 것이 Polymer 이다. 파이어폭스는 X-Tags

  - Web Components의 구성요소를 지원하기 위해 Polymer는 다음과 같은 스택을 가진다. 

    + Native는 브라우져

    + Web Components 스팩 및 실제 필요한 몇가지 기능이 포함된 polyfill로서 platform.js 파일이 존재 

       현재는 WebComponents org의 webcomponents.js와 같은 명칭을 사용한다. 단 Chrome 36+ 부터는 polyfill이 전혀 필요없지만

       Web Components 기능을 구현하지 않은 브라우져들은 polyfill 파일을 포함해야 polymer.js를 통한 기능을 사용할 수 있다. 

    + Polymer 만의 API가 있는 polymer.js 코어

    + 구글의 API를 웹 컴포넌트로 만들어 놓은 Elements (Core, Paper)들이 있고 이를 토대로 Application을 만들 수 있는 길을 닦아 놓았다. 

   

  - Polymer와 Web Components에 대한 요약 정리

    


  - Polymer에서는 어떻게 쓰는지 바이들맨의 설명을 들어보자. (2014년 구글 I/O)

    + <polymer-element name="hi-dowon"> .. </polymer-element> 태그를 통해 Custom Elements를 만든다. 

    + <template> 태그를 사용하고 탬플릿안에서 {{ }} 머스태쉬를 사용해 Data Binding을 한다. (AngularJS 디렉티브의 @ 과 유사)

    + 물론 트위터 부트스트랩같은 UI F/W의 사용도 가능하다.(22분)

    + http://customelements.io/ 이나 http://component.kitchen/ 같은 곳에서 컴포넌트를 찾고 Bower를 통해 설치해서 사용한다. 

    + 구글의 다양한 서비스 API를 Polymer 기반 Custom Element로 만들어 놓았다. 

     


  - Material Design을 구현한 Polymer의 Paper Element 사용방법 (2014년 구글 I/O)

    + 머터리얼 디자인으로 웹/모바일 화면을 구현하고 싶다면 참조하자. 

    + RWD(Responsive Web Design, 반응형 웹 디자인)는 구글에서 Web Starter Kit 강좌에서 잘 설명해 주고 있다. 

    + Polymer Designer를 가지고 화면을 작성할 수 있다. (23분)

    + 하이브리드 앱 (Cordova)를 통한 예도 보여줌 (29분)

    + Layout : core-* element

       Material : paper-* element

       Theming : core-style

       Transition : core-animated-page

      을 통해 일반적으로 모바일에서 원하는 효과를 바로 얻을 수 있다. 

    + 그외 매튜 맥널티의 2014년 구글 I/O 마지막 동영상도 보자 

    


  폴리머의 장점은 재사용성에 있다고 본다. 디자이너와 같은 툴을 통해 미리 정의한 컴포넌트를 비즈니스에 맞게 가지고 있다면 사용자의 레벨에 따라 원하는 모바일/웹 환경을 쉽게 만들 수 있을 것이다. 따라서 반복적인 코드가 줄어 들 것이고 일관성있는 유지보수와 확장성을 보장할 것이다. 2년전 MEAN Stack을 통해 만들고 싶었던 것은 시각화 대시보드 저작도구 였다. HTML의 태그가 Custom Element처럼 표현이 되고 저작도구(Poly Designer)나 실시간에 해석되어 데이터를 실시간 차트로 보여줄 수 있는 BtoB 솔루션을 만들 수 있을 것이다. 이미 Flex 버전의 대시보드 저작도구를 개발해 보았지만 이제는 모바일/웹이 원활히 지원되는 기술로 바뀌어야 하기 때문에 Web Components는 나에게 더욱 필요한 머스트 아이템이 되겠다.  




<참조> 


  - 2013년 구글 I/O - Web Components Tectonic Shift

  - W3C의 Web Components Spec

  - Polyfill 개념

  - 2014년 구글 I/O - Web Components & Polymer (바이들맨의 Custom Element 정리)

  - Vanilla, X-Tags, Polymer 비교

  - Vulcanize : import 웹 컴포넌트 합쳐주는 도구

posted by Peter Note
2014. 12. 26. 11:48 Angular/Prototyping

새 술은 새 푸데에 넣어 보자. 모던 웹브라우져기반하에 구조적인 웹 애플리케이션을 개발할 수 있도록 해주는 Dart로 구글의 Web Component스펙 구현체인 Polymer를 시작하는 것도 재미 있을 것이다. Dart기반으로 개발을 하게 되면 Dart VM이 설치된 브라우져에서 수행이 되어야 하지만 현재는 Chromium + Dart VM을 결합한 Dartium에서만 수행이 되고 Dartium 은 별도로 설치해도 되지만 DartEditor를 설치하게 되면 포함되어 있어서 통합 개발환경하에서 디버깅 및 수행을 해볼 수 있다. 하지만 dart2js 도구를 통해 .dart 파일을 .js파일을 transpile할 수 있어 기존 모던 웹 브라우져에서 수행이 가능하다. 



 



Chrome Dev Editor 설치


  - 구글 I/O에서 소개한 크롬 개발 에디터는 다트와 웹컴포넌트로 만들어진 크롬앱이다. 설치를 한다.

  - 깃헙 사이트에서 Chrome Dev Editor를 볼 수 있다. 하기 내용은 Chrome App 으로 프로젝트를 생성한 경우이다. Dart 기반으로 생성이 되었다. 

    


  - 개발도구를 통해서 웹 컴포넌트를 추가하면서 개발도구를 업그레이드하는 과정을 보자. 흥미롭다. 

    


  - 현재는 개발자 프리뷰버전이 나와있어서 열심히 개밥(dogfood)을 먹으며 실험을 하고 있는 단계이다. 하지만 1년 2년이 지나면서 성능과 안정성 대중성이 확보되리라 생각한다. 물론 극히 개인적인 추론이지만 구글의 문화를 토대로 본다면 2013년부터 구글 I/O에서 계속 Angular, Polymer의 소개가 빠지지 않고 전략적으로 밀고 있다는 생각이 든다. 





Polymer 개념 잡기 


  - Web Component는 div soup에서 벗어나 사람이나 기계가 인지할 수 있는 의미있는 단어로 HTML을작성하고 이를 컴포넌트화 하는 것이다. 

    + 의미있는 단어로 HTML을 작성하기 위해 div 태그를 재정의 할 수 있어야 한다. 

       이는 Template을 통해 Custom Elements를 만든다

    + 컴포넌트화 하기위해서는 상태에 대한 것과 동작에 대한 것에 scope를 줄 수 있어야 한다. 

       상태 scope는 CSS를 Shadow DOM이라는 기념하게 Custom Element의 Template에만 적용되는 CSS를 작성할 수 있다. 

       동작 scope는 자바스크립트로 작성을 할 수 있고 Polymer를 사용하게 되면 Dart를 통해서도 가능하다. 

  - Web Components는 Angular의 Directive 지시자와 유사하지만 약간의 차이가 존재한다. UI와 스크립트 언어간의 two-way data binding하는 reactive programming은 동일하지만 그외의 부분은 지향하는 바가 틀리고 할 수 있는 영역이 틀리다. Polymer는 좀 더 강력한 웹 애플리케이션 UI를 빨리 만들 수 있도록 지원한다. 

    


  - 내가 좋아하는 애디 오스마니의 Polymer 소개 영상을 보자. 무려 한글로 해석되어 나온다. 

    





Polymer와 Dart의 관계


  - Dart는 구조적 웹 프로그래밍 언어로 구글에서 만들었다. 동적 타입 언어에 조금이라도 익숙하고 자바를 다루어 본 개발자라면 쉽게 배울 수 있는 언어이다. DartEditor는 Eclipse기반이고 import, inheritance, main() 등 자바에서 볼 수있는 것들을 잘 차용했다. 하지만 다트는 Strong static type 시스템인 자바와 틀리게 Strong dynamic type 시스템을 지향하고 Optional static type 적용이 가능하다. Web Component 스펙의 구현체인 Polymer와 Dart의 공통점은 모던 웹 브라우져에 돌아가는 애플리케이션을 빠르고 견고하게 만들 수 있도록 하는것을 지향한다는 것이다. Dart는 dart2js 도구를 제공하기 때문에 .dart를 .js로 변환하여 Dart VM이 설치되지 않은 브라우져에서 실행이 가능한 것이다. 따라서 Polymer에 Dart를 안해 볼 이유는 없어 보인다. 

  - Dartlang.org의 Polymer 페이지의 첫 문구이다. 위에서 이야기한 내용을 축약해서 표현해 놓았다. 

Use polymer.dart—a Dart port of Polymer—to build structured, encapsulated, client-side web apps with Dart and web components.


  - 구조

    + web 폴더가 있고 그안에 html 파일이 존재

    + pubspec.yaml은 Dart의 의존관계 및 메타정보에 대한 공식 설정 파일이다. 

      이것은 Node.js의 package.json이나 Bower의 bower.json과 동일하다. 

      


  - 의존관계로 polymer.dart를 설치한다. pubspec.yaml 설정 내역이다. 

dependencies:

  polymer: ">=0.15.1 <0.16.0"

transformers:

- polymer


  - Dart 기반으로 Polymer를 팔려면 우선 다음과 같이 진행하는 것이 맞다. 

    + 우선 Dart 개념을 잡아야 한다. 

    + 다음에 자바스크립트 기반으로 Polymer를 해본다. 

    + 마지막으로 다트 기반으로 Polymer를 접근한다. 

  - Polymer.dart와 AngularDart의 관계는 Polymer와 AngularJS의 관계와 유사하다. 서로 자바스크립트이냐 다트이냐의 차이일 뿐 상호 겹치는 부분의 Data Binding에서 상호 작용(Interoperation)할 수 있다. 


  만약 모던 웹 브라우져라는 제약이 존재 한다면 언어의 구분을 두지 말고 내가 원하는 웹 애플리케이션을 빠르고 견고하고 구조적으로 만들 수 있는지 고려해 시작하자. 감기로 인해 오늘은 여기까지... 




<참조>


  - 구글 I/O Polymer 소개 영상

  - Dartium 소개

  - Angluar와 Polymer 사이의 Data Binding

  - Reactive Programming Wikipedia

posted by Peter Note
2014. 12. 24. 17:15 LLM FullStacker/Python

처음으로 새로운 프레임워크를 접하게 되었을 때 어떻게 시작해야할지 막막하다. 그럴땐 공부할 꺼리들을 정리해 보고 시작하자. 새롭게 시작할 AngularDart의 컨텐츠를 정리해 보자. 






AngularJS 개발자가 AngularDart 개발하기 


  - AngularDart의 상당 부분이 실은 AngularJS v2.0에 많은 영향을 미쳤다. (미스코의 말)

    + AngularJS개발자를 위한 AngularDart 이해하기

  - Dartlang을 모르고서 AngularDart를 보면 안되겠죠?  

  - UI Framework과 연동해서 웹 애플리케이션을 만들어 본다. (깃헙 소스)

    


  - 코드랩을 따라한다.

    + 예제 데모를 돌려보면 최신 IE 11, FF, Safari, Chrome에서 잘 돌아감. 

    + HTML의 디렉티브는 AngularJS와 거의 같음. 코드만 .dart 로 작성함 

  - 개발하며 API를 참조한다.





AngularDart와 Polymer 연동하기


  - 우선 AngularDart 소개영상과 25분부터 이어지는 Polymer.Dart를 보자 

    + 보고 있으면 아마도 ng-conf 2014에서 소개한 Angular v2.0 영상의 14분 부터 보면 뭔가 떠오를지 모르겠다. 

    

 

  - 첫번째 영상에서 Web Component 개념을 이야기하는 Polymer.dart를 다시 보자. 

  - 다시 정리하고 있는 Parsley의 Web Component & Dart 동영상을 보자

  - 따라하기 하며 Dart와 Polymer.dart를 연결해 보기 


계속해서 업데이트 예정...




<참조> 


  - Dart와 Web Component에 대한 다른 영상

  - 미스코 헤베리의 AngularDart를 만든 이유 

The Angular team's mission is to make building web-applications easy on the web. We want to support as many languages as possible.

AngularJS supports: JavaScript and through transpilation CoffeeScript and TypeScript.

AngularDart obviously supports Dart. 

1) Dart is significantly different from JavaScript that transpilation approach would not create the experience we were looking for, for this reason we have rewritten it. 

2) Dart has Types, and Type annotations, and so while rewriting AngularDart we have chose to take advantage of these language features. 

3) We have also learned from our mistakes on AngularJS and taken the opportunity to correct them, such as much improved Directive API. Finally we have take advantage of the latest browser technologies and based AngularDart on top of Shadow DOM.

4) All of the learnings we have gained in building AngularDart, will be applied back to AngularJS v2. This is only expected since AngularDart is younger than AngularJS.

Angular is a philosophy on how applications should be built and we wanted to make the question of language choice orthogonal to your choice of using Angular. Any web-language you choose, there is an Angular you can use with it.



posted by Peter Note
2014. 12. 24. 14:53 LLM FullStacker/Python

빠르게 메타지식을 흡수해 변환에 적응하는 능력을 지적 겸손이라 한다. 태도의 겸손이 아닌 내가 아는 것이 전부가 아니고 더 낳은 방법과 기술이 있다면 메타지식을 빠르게 흠수할 수 있는 능력이 필요한 시대가 되었다. 새로운 웹 개발언어로 성능과 생산성 증대를 목표로 하는 Dart에 대해 공부를 해본다.






중요 개념 


  - 모든 변수는 Object 이다. 

  - 정적 타입과 동적(dynamic) 타입이 가능하다   

  - 정적 타입 오류를 컴파일 타임에 알려준다

  - main() 펑션이 있다

  - public, protected, private 같은 것이 없고 _ (underscore)로 표현한다 

  - warning 은 프로그램이 수행 안될지도 모른다 이지만 수행을 막지는 않는다. 

    error가 컴파일 타임이 나면 수행할 수 없고 런타임에 발생하면 exception이 발생한다.  

  - 런타임 모드는 production 과 checked 두가지다. 개발시에는 checked 모드로 사용한다. 

     production 모드에서는 assert 구문을 무시한 최적화를 통해 성능을 향상시켜준다. 

  - 키워드 

   

    1 : built-in indentifier : 자바스크립트를 다트로 포팅을 쉽게 해준다. 

    2 : 제한적인 예약어로 비동기 지원과 관련이 있다. 

    



변수 (Variables)


  - 예 : 'Peter' 값을 가지는 String 객체의 레퍼런스 주소값을 name이라는 변수가 가지고 있다. 

var name = 'Peter';


  - 최기화 되지 않은 변수는 null 초기값을 갖는다. 숫자가 초기값이 없어도 null 초기값을 갖는다. 

    assert 구문은 production 모드에서 무시된다. 만일 assert 구문이 true가 아니면 exception을 던진다. 

int lineCount;

assert(lineCount == null);


  - 옵셔널 타입으로 String name = 'Bob'으로 직접 지정해 줄 수도 있지만 타입 스타일 가이드에 따라 var를 사용한다. swift와 유사함 

  - final은 변수의 값을 변경하고 싶지 않을 경우 var 대신 사용한다. const는 수치값을 지정한다. 

  - numbers, strings, booleans, lists, maps, symbols 관련 빌트인 타입을 가지고 있다. (예제 참조)

    + numbers : int, double 있고 이들은 num의 서브타입이다. 다트의 int와 자바스크립트 int는 틀리다. 다트 int는 arbitrary-precision integer

    + strings : UTF-16 코드를 따르고 ''  또는 "" 사용가능. 'hi peter ${expression}' 식으로 문자안에 ${} 표현가능. swift와 유사함

    + booleans : bool 타입으로 true, false를 값을 가져야 하고 자바스크립트와 틀리다. 즉, var name='pter'; if(name)하면 false이다. 

    + lists : 다트의 배열은 List 오브젝트이다. 인덱싱은 0부터 시작한다. GenericsCollections을 살펴보자 

    + maps : key-value에 대해 Map 오브젝트를 사용한다. JSON처럼 literal 지정 

    + symbols : Symbol 오브젝트를 통해서 operator와 identifier를 표현한다. 




펑션 (Functions)


  - 예 : 스타일 가이드에 따라 파라미터와 리턴 타입 지정한다. 

// 파라미터와 리턴 타입을 명시하는게 스타일 가이드 

void printNumber(num number) { 

  print('this is $number');


// 하지만 생략도 가능 

printNumber(number) 

  print('this is $number');

 


  - => expr;{ return expr; } 표현과 같다. coffeescript 같은 축약형 좋다. 하기 표현은 위 표현과 동치 

printNumber(number) => print('this is $number');


  - 옵션널 파라미터

    + 기본 설정 : enable(bool flag1, bool flag2) { ... }

    + Optional named parameter는 paramName: value로 지정 

       예) enable({bool flag1: false, bool flag2: true}) { ... } 사용 enable(flag1: true)

    + Optional positional parameter는 [] 마크를 사용

       예) say(String from, String msg, [String device]) { ... } 사용 say('hi', 'peter') 또는 say('hi', 'peter', 'ios')

  

  - 애플리케이션은 최상위 레벨에서 main() 펑션를 갖는다. 애플리케이션의 진입점역할을 한다. 자바와 유사함

    .. 오퍼레이터는 cascade operator이다. 즉, 이어서 호출한다. 

void main() {

  querySelector('#peter')

    ..text = 'Hi dowon'

    ..onClick.listen(reservedText);


  - Functions as first-class objects 이다. 펑션을 다른 펑션에 파라미터로 전달하거나 리턴하는 것이 가능. 이건 자바스크립트부터 쭉... 

printElm(element) {

  print(element);

}


var list = [1,2,3];

list.forEach(printElm); // printElm을 파라미터로 전달 


  - 자바스크립트는 function 레벨에서 lexical scope를 갖듯 다트도 lexical scope를 갖는다. 즉, 변수의 스코프가 정적으로 정해진다. (단, 자바스크립의 this는 호출되는 시점에 결정되므로 이부분에 틀림. 아래 참조 링크를 보자) 다트는 curly raches outwards를 따른다. (자바스크립트는 변수에 var를 줌으로 로컬 변수 스코프임을 지정한다) 

  - lexical closures는 lexical scope안의 변수를 접근하는 펑션 오브젝트이다. 

closure is a function object that has access to variables in its lexical scope, even when the function is used outside of its original scope.


  - 모든 펑션은 리턴값을 갖고 지정하지 않으면 return null; 이다. 




연산자 (Operators)


  - 연산자 종류 

    


  - 타입 테스트 오퍼레이터 

    



제어 흐름 (Control Flow Statement)


  - if(){ ... } else if() { ... } else { ... }

  - for ( 초기값 ; 비교 ; 증분 ) { ... } 또는 for in 

  - while() { ... } 또는 do { ... } while ()

  - while에서 break, for 에서 continue 

  - switch ~ case ~ default




예외처리 (Exceptions)


  - 다트의 예외는 unchecked exception 이다. 

  - 다트는 ExceptionError 타입을 제공한다. 

  - throw 하면 에러를 일으킨다. 

  - on catch 으로 exception을 catch 하고 전파되는 것을 막는다. 

try {

  aa();

} on OutofException {  // known exception

  bb();

} on Exception catch (e) { // anyting else that is an exception

  print('exception is: $e');

} catch (e) {

  print('really unknown : $e');

}

 

  - finally : finally가 수행된 후에 exception이 전파된다 




클래스 (Classes)


  - 다트는 객체지향 언어이다. 

  - new 키워드로 클래스의 인스턴스인 오브젝트를 생성한다. 

  - 클래스는 펑션과 데이터를 멤버로 갖고 특히 오브젝트의 펑션을 메소드라 부른다. dot(.)로 호출한다. cascade operator(..)은 싱글 객체의 멤버를 연속적으로 호출할 때 사용한다.

  - 생성자는 클래스와 같은 이름을 자고 this는 현재 인스턴스를 가르킨다. 자바와 유사

  - 생성자를 선언하지 않으면 아규먼트 없는 기본 생성자가 자동 제공됨. 자바와 유사 

  - 생성자는 상속되지 않는다. 

class Point {

  num x;

  num y;


  Point(this.x, this.y);

}


  - get, set 키워드를 통해 프로퍼티를 만들 수 있다. 

class Rectangle {

  num left;

  num top;


  Rectangle(this.left, this.top);


  num get right   => left;

         set right(num value) => left = value - left;

}


  - abstract class를 만들 수 있다. 상속은 extends를 사용함.  자바와 유사 

abstract class Door { 

  void open();

}


  - 연산자도 오버라이드 할 수 있음 

  - 모든 클래스인 암묵적으로 interface를 정의할 수 있다. 만일 A 클래스가 B의 구현체를 상속받지 않고 B의 API만을 사용하고 싶을 경우 implements 키워드를 사용한다. 자바에는 없는 재미난 부분

// A person. The implicit interface contains greet().

class Person {

  final _name;          // In the interface, but visible only in this library,

  Person(this._name);   // Not in the interface, since this is a constructor.

  String greet(who) => 'Hello, $who. I am $_name.'; // In the interface.

}


// An implementation of the Person interface.

class Imposter implements Person {

  final _name = "";      // We have to define this, but we don't use it.

  String greet(who) => 'Hi $who. Do you know who I am?';

}


greetBob(Person person) => person.greet('bob');


main() {

  print(greetBob(new Person('kathy')));

  print(greetBob(new Imposter()));

}


  - extends 키워드로 상속을 하고 super는 부모 클래스를 가르킴. 자바와 유사

  - 상속시 부모 메소드에 대한 @override를 명시적으로 사용해 오버라이딩이 가능하다. 

  - 클래스에 @proxy라고 하면 @override시에 warning을 준다. 

  - 다중 상속시에 mixin 개념의 클래스 코드 재사용이 도입. with 키워드를 사용한다. mixin 할때는 upser, 생성 선언이 없다. 

class Musicain extends Performer with Musical, Aggressive, Demented { 

  ...

}


  - 클래스 소속 메소드와 변수는 static 키워드를 사용한다. 자바와 유사




제네릭 (Generics)


  - 다트에서 타입은 옵셔널이다. 의도를 명확히 하기 위해 공식적으 타입 파라미터를 같는 타입이다. (generic == parameterized) type

    예에서 문자로 지정을 한다는 의도를 분명히 한다. 

var names = new List<String>();

names.addAll(['Seth', 'Kathy', 'Lars']);

// ...

names.add(42); // Fails in checked mode (succeeds in production mode).


  - type variables로는 통상 E, T, S, K, V 같은 단일 문자를 갖는다. 

  - 제네릭은 코드의 중복을 방지해 준다. 상속하여 구현 하면 됨 

// Object 경우 

abstract class ObjectCache {

  Object getByKey(String key);

  setByKey(String key, Object value);

}


// String 경우 

abstract class StringCache {

  String getByKey(String key);

  setByKey(String key, String value);

}


// 하나로 줄여줌 

abstract class Cache<T> {

  T getByKey(String key);

  setByKey(String key, T value);

}


  - Collection literal에도 사용가능하다. 

var names = <String>['Seth', 'Kathy', 'Lars'];

var pages = <String, String>{

  'index.html': 'Homepage',

  'robots.txt': 'Hints for web robots',

  'humans.txt': 'We are people, not machines'

};


 


라이브러리와 가시성 (Libraries and visibility) 


  - import, part, library 지시자(Directives) 사용한다. 

  - 라이브러리는 Pub Package and Asset Manager인 pub 툴로 패키지를 사용 배포한다. 

  - import 'dart:html';  형식으로 import는 URI 형시그로 라이브러리를 지정한다. 

  - 빌트인은 'dart:xxx' 로 시작한다. 

  - pub 툴 배포로 제공되는 것은 import 'package:<file path>'; 로 지정한다. 예) import 'package:utils/utils.dart';

  - as로 aliasing이 가능 예) import 'package:lib2/lib2.dart' as lib2; 

  - show, hide 통해 라이브러리 일부만 가져오기 가능 예) import 'package:lib2/lib2.dart' show foo;

  - 라이브러리의 Lazily loading이 가능하다. deferred as 키워드를 사용한다. AngularJS의 $q를 보자  

    + 애플리케이션 초기 시작시간을 줄이기 위해 사용

    + A/B 테스트를 수행하기 위해

    + 사용이 적은 것들 로딩할 때 

    예) import 'package:deferred/hello.dart' deferred as hello;  하기에 then 구문으로 비동기적 호출을 한다.

hello.loadLibrary().then((_) {

  hello.printGreeting();

});


  - 다른 방법으로는 async 키워드를 사용한다. loadLibrary()는 Future를 리턴한다. 

greet() async {

  await hello.loadLibrary();

  hello.printGreeting();

}


  - library <라이브러리명칭>; 으로 사용한다. part는 라이브러리의 첨부된 파일을 지칭한다. 

library ballgame;   // Declare that this is a library named ballgame.


import 'dart:html'; // This app uses the HTML library.


part 'ball.dart';  // ballgame의 일부이다. 


 


비동기 지원 (Asynchrony support)


  - async 와 await 키워드를 사용한다. 

  - 다트 라이브러리는 Future 오브젝트를 리턴하는 펑션셋을 가지고 있다.  

  - dart 또는 dartanalyzer에서 async 지원을 위해 옵션을 주어야 한다. DartEditor (Eclipse기반)에도 넣어줌 

    

dart --enable-async async_await.dart

dartanalyzer --enable-async async_await.dart


  - async 펑션선언 

check() async {

  //...

}


look() async => //...


  - await <expression> 에서 expression은 타입 Future를 가지고 있고 이는 오브젝트를 리턴하기 위한 promise이다. 리턴된 오브젝트가 유효할 때까지 실행은 멈춘다. 




Typedefs


  - 다트에서 펑션, 문자, 숫자 모두 오브젝이다. 

  - typedef 또는 function-type alias 는 필드나 리턴타입을 선언할 때 사용할 수 있는 펑션타입에 이름을 준다. 

// f를 compare로 할당할 때 int f(Object, Object)의 타입정보가 사라진다.

class SortedCollection {

  Function compare;


  SortedCollection(int f(Object a, Object b)) {

    compare = f;

  }

}


// typedef로 펑션타입을 정의한다.

typedef int Compare(Object a, Object b);


class SortedCollection {

  Compare compare;


  SortedCollection(this.compare);

}




메타데이터 (Metadata)


  -  메타데이터는 추가적인 정보를 주기위해 사용한다. @ 키워드로 애노테이션을 사용한다. 

  - @deprecated, @override, @proxy 등의 메타데이터 애노테이션을 사용한다. 

  - 커멘트는 한줄 // 사용하고 다중은 /* */을 사용한다. 




참조 

  

  - 다트 기초 

  - 구글 취업이 원하는 인재상 : 지적 겸손에 대하여

  - 자바스트립트에서의 lexical scope와 this의 의미 번역 (원문)

  - 컴퓨터 사이언스에서 Lexical Scope 위키피디아

  - Dart Slides 및 동영상

  - Dart VM으로 서버 만들기 Framework 종류

posted by Peter Note

배너 밑으로는 선전하고 싶은 상품 목록 4개를 열거한다. 이때 반응형 웹 디자인의 그리드(Grid)를 적용해 본다. 




화면 분할


  - WEB-INF/templates/layout/home.html 템플릿의 내용이 많아지면 partial html로 분리하여 include하는 방식을 취한다

  - 우선, Homepage Banner Ad Carousel 부분을 <th:include> 처리하고 Product 목록 부분도 <th:include> 처리해 관리한다. 

  - 기존 화면 

   


  - 변경 화면

    + 박스 테두리 CSS를 적용한다

    + 각 박스 테두리별로 반응형 그리드를 적용한다  

   

  - WEB-INF/templates/layout/home.html 내역중 Carousel에 대한 부분과 product 목록에 대한 부분을 WEB-INF/templates 폴더 밑에 main/partials 폴더를 새롭게 만들고 banner-caruosel.html 과 product-list.html 을 생성하고 기존 내역을 옮긴다. 

  - content의 contentType인 "Homepage Featured Products Title" 인 목록을 뿌려주는 것이다. 

  - layout 폴더에서 main 폴더로 옮기는 이유는 해당 main 폴더 영역에 있는 부분이 계속 변경되기 때문이다. 즉, 다른 페이지로 이동해도 nav와 footer는 고정되어 있다. 

// home.html의 과거 내역 


<blc:content contentType="Homepage Featured Products Title" />    

<div th:if="${contentItem !=null and contentItem['messageText'] !=null}" class="title_bar" th:text="${contentItem['messageText']}"></div>


<ul id="products" class="group">

    <li th:each="product : ${products}" th:object="${product}" th:include="catalog/partials/productListItem" class="product_container"></li>

</ul>



// 신규 layout/home.html 일부 내역 


    <div th:include="main/partials/banner-carousel" />

    

    <div class="section">

        <div th:include="main/partials/featured-products" />

    </div>



// main/partials/featured-products.html


    <div class="container">

   

          <div class="row">

          <blc:content contentType="Homepage Featured Products Title" />  

             <div th:if="${contentItem !=null and contentItem['messageText'] !=null}" 

                  class="col-lg-12 col-md-12 col-sm-12 col-xs-12 featured-title" 

                  th:text="${contentItem['messageText']}"></div>

       

              <div th:each="product : ${products}" 

                   th:object="${product}" 

                   th:include="catalog/partials/productListItem" 

                   class="col-lg-3 col-md-3 col-sm-6 col-xs-6">

              </div>

          </div>

          

    </div>


  - class="col-lg-3 col-md-3 col-sm-6 col-xs-6" 을 적용해서 데스크톱에서는 4개씩 상품이 보이고 테블릿 이하는 2개씩 상품이 보임




Product Item 그리드 구성 


  - th:include="catalog/partials/productListItem" 에서 기존 productListItem.html 의 CSS를 하기와 같이 다시 적용한다 

    + max-width: 320px; 를 주어 박스의 최대 크기를 지정한다. 

// /webapp/css/style.css 일부 내역 


/************************************/

/* featured product list  */

/************************************/

.thumbnail {

max-width: 320px;

display: block;

padding: 5px;

margin-bottom: 10px;

line-height: 1.5;

background-color: #fff;

border: 1px solid #ddd;

border-radius: 4px;

-webkit-transition: border .2s ease-in-out;

-o-transition: border .2s ease-in-out;

transition: border .2s ease-in-out;

}


.thumbnail .content {

padding: 3px;

font: 13px/18px 'BryantLGRegular';

color: #655c5a;

overflow: hidden;

}


.thumbnail .content .title {

font: 15px/18px 'BryantLGMedium';

margin-bottom: 7px;

color: #222222;

height: 36px;

max-height: 36px;

}


.thumbnail .content .desc {

padding: 3px;

font: 13px/18px 'BryantLGLight';

color: #655c5a;

overflow: hidden;

height: 72px;

max-height: 72px;

}


.thumbnail .new_badge {

width: 60px;

height: 60px;

background: url('../img/badge-new.png') no-repeat;

text-indent: -9999px;

position: absolute;

top: -10px;

left: -1px;

z-index: 20;

}


.thumbnail .image {

margin-bottom: 10px;

overflow: hidden;

position: relative;

z-index: 10;

}


.thumbnail .image .price {

position: absolute;

background-color: black;

color: white;

opacity: 0.8;

padding: 10px 20px;

font: 16px/16px 'BryantLGMedium';

font-weight: 600;

bottom: 5px;

right: 5px;

}


  - 적용한 productListItem.html 의 내용은 하기와 같다.

<div class="thumbnail">

<div th:if="*{featuredProduct}" class="new_badge">New!</div>


<div class="image">

<a th:href="@{*{url}}">

    <img th:if="*{media['primary']}" blc:src="@{*{media['primary'].url} + '?browse'}" th:alt="*{name}" />

    <div class="price" th:if="${#object instanceof T(org.broadleafcommerce.core.catalog.domain.ProductBundle)}">

        <div blc:price="*{salePrice}" th:if="*{onSale}" th:classappend="*{defaultSku.onSale}? 'sale'"></div>

        <div blc:price="*{retailPrice}" th:classappend="*{onSale}? 'has-sale'"></div>

    </div>

    <div class="price" th:unless="${#object instanceof T(org.broadleafcommerce.core.catalog.domain.ProductBundle)}">

        <div blc:price="*{defaultSku.salePrice}" th:if="*{defaultSku.onSale}" th:classappend="*{defaultSku.onSale}? 'sale'"></div>

        <div blc:price="*{defaultSku.retailPrice}" th:classappend="*{defaultSku.onSale}? 'has-sale'"></div>

    </div>

    </a>

    </div>

    

<div class="content">

  <div class="title" th:text="*{name}">Product Name</div>

<p class="desc" th:utext="*{longDescription}">description</p>

<p> 

<div th:class="*{'productActions productActions' + id}"

    th:with="checkInventory=*{defaultSku.inventoryType?.type == 'CHECK_QUANTITY'},

              availableInventory=${checkInventory ? #object.defaultSku.quantityAvailable != null and #object.defaultSku.quantityAvailable != 0 : true},

              inCart=${cart.containsSku(#object.defaultSku) and #lists.isEmpty(product.productOptions)}">

    <div th:if="${checkInventory and !availableInventory}" class="out_of_stock">

        <a disabled="disabled" class="inCart">Out of Stock</a>

    </div>

    <div class="btn btn-default" th:classappend="${!inCart}? ' hidden'" th:if="${#lists.isEmpty(product.productOptions)}">

        <a class="modalcart inCart" th:href="@{/cart}"><span th:text="#{product.inCart}">In Cart!</span></a>

    </div>

    <div class="add_to_cart" th:classappend="${inCart or !availableInventory}? ' hidden'">

        <blc:form method="POST" th:action="@{/cart/add}">

            <input type="hidden" name="productId" th:value="*{id}" />

            <input type="hidden" name="quantity" value="1" />

            <input type="hidden" name="hasProductOptions" th:value="*{!#lists.isEmpty(productOptions)}" />

            <input type="submit" class="btn btn-primary" th:value="#{product.buyNow}"/>

        </blc:form>

    </div>

</div>

</p>

    </div>

    

</div>


<div style="display: none;" th:id="*{'productOptions' + id}" class="product-options modal">

    <h3 th:text="*{name}"></h3>

    <div class="product-options" th:substituteby="catalog/partials/productOptions"/>

    <input type="button" class="addToCart" th:value="#{product.buyNow}" />

</div>


화면 구성이 되었다면 다음으로 2단 메뉴 구성을 해보자 

posted by Peter Note

DemoSite에서 제공하는 랜딩 페이지의 중앙에는 마케팅 제품 한개만을 디스플레이한다. 이를 여러개의 마케팅 제품을 Carousel로 변경하는 작업을 해본다. 




Carousel HTML 추가


  - 원래 화면으로 SHIRT SPECIAL 이미지가 고정이다.

    


  - 변경된 화면으로 Carousel을 적용한다. 

    + Twitter Bootstrap의 carousel을 적용

    + 기존 제품을 두번째에 배치

    


  - HTML에서 메인 마케팅 제품의 <blc> 태그 내역음 하기와 같다

    + <blc:content> 태그의 contentType="Homepage Banner Ad"의 값이 키가 되어 content의 데이터를 MySQL에서 찾음

    + 반환값인 contentItem 객체를 통해 Thymeleaf 템플릿엔진은 HTML을 생성해줌

    + Twitter Bootstrap의 carousel을 추가하고 첫번째에 배너를 넣고 다음 아이템(보라색) 두번째에 틀린 배너를 넣음

       contentType인 Homepage Banner Ad2 라는 이름임 

// 원본 소스 

<nav th:substituteby="layout/partials/nav" />

            

<blc:content contentType="Homepage Banner Ad" />   

<div id="banners" th:if="${contentItem !=null and contentItem['targetUrl'] != null and contentItem['imageUrl'] != null}">

    <a th:href="@{${contentItem['targetUrl']}}"><img blc:src="@{${contentItem['imageUrl']}}" /></a>       

</div>



// 수정 소스 

<div th:include="layout/partials/nav" />

       

<div id="myCarousel" class="carousel slide">

    <!-- Indicators -->

    <ol class="carousel-indicators">

        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

        <li data-target="#myCarousel" data-slide-to="1"></li>

        <li data-target="#myCarousel" data-slide-to="2"></li>

    </ol>


    <!-- Wrapper for slides -->

    <div class="carousel-inner">

        <div class="item active">

            <blc:content contentType="Homepage Banner Ad" />

            <div class="fill" th:if="${contentItem !=null and contentItem['targetUrl'] != null and contentItem['imageUrl'] != null}" >

              <a th:href="@{${contentItem['targetUrl']}}"><img style="height:100%; width:100%" blc:src="@{${contentItem['imageUrl']}}" /></a>  

            </div>

            <div class="carousel-caption">

                <h1></h1>

            </div>

        </div>

        <div class="item">

            <blc:content contentType="Homepage Banner Ad2" />

            <div class="fill" th:if="${contentItem !=null and contentItem['targetUrl'] != null and contentItem['imageUrl'] != null}" >

              <a th:href="@{${contentItem['targetUrl']}}"><img style="height:100%; width:100%" blc:src="@{${contentItem['imageUrl']}}" /></a>  

            </div>

            <div class="carousel-caption">

                <h1>This is Homepage Banner Ad2 Test</h1>

            </div>

        </div>

        <div class="item">

            <div class="fill" style=""></div>

            <div class="carousel-caption">

                <h1>Additional Layout Options at <a href="http://startbootstrap.com">http://startbootstrap.com</a>

                </h1>

            </div>

        </div>

    </div>


    <!-- Controls -->

    <a class="left carousel-control" href="#myCarousel" data-slide="prev">

        <span class="icon-prev"></span>

    </a>

    <a class="right carousel-control" href="#myCarousel" data-slide="next">

        <span class="icon-next"></span>

    </a>

</div>


  - Carousel을 구동하는 자바스크립트를 추가함 

    + WEB-INF/templates/layout/partials/footer.html안에 main.js를 추가함. 메인 페이지 하단에 자바스크립트를 추가해줌 

    + webapp/js 폴더 밑에 main.js 를 추가하고 carousel 자바스크립트를 초기화하고 화면간 이동시간을 설정함

// footer.html 

 <blc:bundle name="heatclinic.js" 

                mapping-prefix="/js/"

                files="main.js,

                       BLC.js,

                       heatClinic.js,

                       cartOperations.js,

                       checkoutOperations.js,

                       globalOnReady.js,

                       manageAccountOperations.js,

                       reviewOperations.js" />



// js/main.js

$('.carousel').carousel({

  interval: 3000

})




Homepage Banner Ad2 추가하기


  - Homepage Banner Ad가 추가된 위치를 Admin에서 화인할 수 있다.

    + DemoSite에 보면 admin sub-module이 있고 Ant를 통해서 실행할 수 있다. 

    + http://localhost:8081/admin 으로 접속해서 id:admin, pwd:admin으로 접속한다.

    + 관리페이지의 Content -> Content Items를 보면 아이템 목록이 나오고 "Content Type"이 Homepage Banner Ad가 언어별로 등록됨

    + 즉, <blc:content> 태그의 contentType이 데이터 조회를 위한 파라미터 키이고 Homepage Banner Ad가 값임.

    


  - 최초에 DemoSite를 수행할 때 src/main/resources/runtime-properties/development.properties는 하기와 같다 

    + create-drop 설정은 DemoSite 서버(jetty)를 기동할 때 기존 테이블을 전부 drop 하고 새롭게 생성하고 데이터를 넣어줌 

    + 한번 생성된 이후 다시 drop하지 않고 DemoSite를 기동하고 싶으면 update로 변경함 

// 기존 설정 

blPU.hibernate.hbm2ddl.auto=create-drop


// 변경 설정

blPU.hibernate.hbm2ddl.auto=update


  - 결국 DemoSite 기동할 때 insert 구문을 통해 Homepage Banner Ad를 넣고 있으므로 Homepage Banner Ad2 값을 넣을 수 있음

    + sql 파일은 core sub-module의 src/main/resrouces/sql밑에 존재함 

    + 관련 sql은 load_content_structure.sql 과 load_content_data.sql 이다 

    + content_structure는 원화 기준, 언어 기준, 화면 템플릿의 논리적 그룹핑 명칭 등록 및 4단계를 거쳐 structure를 만들어준다 

// load_content_structure.sql 안에 보라색 내역 Homepage Banner Ad2를 추가함


---------------------------------------------------------------------------------------------------------------------------

-- Structured Content Step 4:   Create Types (These represent areas on a page or general types:  e.g 'Homepage Banner Ad')

---------------------------------------------------------------------------------------------------------------------------

INSERT INTO BLC_SC_TYPE (SC_TYPE_ID, NAME, DESCRIPTION, SC_FLD_TMPLT_ID) VALUES (1, 'Homepage Banner Ad', NULL, 1);

INSERT INTO BLC_SC_TYPE (SC_TYPE_ID, NAME, DESCRIPTION, SC_FLD_TMPLT_ID) VALUES (2, 'Homepage Middle Promo Snippet', NULL, 2);

INSERT INTO BLC_SC_TYPE (SC_TYPE_ID, NAME, DESCRIPTION, SC_FLD_TMPLT_ID) VALUES (3, 'Homepage Featured Products Title', NULL, 3);

INSERT INTO BLC_SC_TYPE (SC_TYPE_ID, NAME, DESCRIPTION, SC_FLD_TMPLT_ID) VALUES (4, 'Right Hand Side Banner Ad', NULL, 1);


-- by ysyun

INSERT INTO BLC_SC_TYPE (SC_TYPE_ID, NAME, DESCRIPTION, SC_FLD_TMPLT_ID) VALUES (5, 'Homepage Banner Ad2', NULL, 1);


    + content_data는 컨텐트의 url, image 등의 세부 내역이 담겨져 있다. 

    + 원본은 3개의 Banner가 우선순위가 있게 등록되어 있는데 Homepage Banner Ad2를 새로운 배너 우선순위 1로 해서 등록한다.

    + 기존 베너에 있던 Buy One Get One을 Homepage Banner Ad2에 배정한다. 

    + 세번째 Carousel을 등록하고 싶다면 Homepage Banner Ad3를 structure에 등록해서 하기 과정에 sql을 추가하면 끝! 

    + 이미지는 webapp/img/banners 폴더에 존재함 

// load_content_data.sql 에서 보라색 부분을 추가한다.


---------------------------------------------------

-- HOME PAGE BANNER

---------------------------------------------------

-- Content Item

INSERT INTO BLC_SC (SC_ID, CREATED_BY, DATE_CREATED, DATE_UPDATED, UPDATED_BY, CONTENT_NAME, OFFLINE_FLAG, PRIORITY, LOCALE_CODE, SC_TYPE_ID) VALUES (100, 1, CURRENT_TIMESTAMP, CURRENT_TIMESTAMP, 1, 'Buy One Get One - Twice the Burn', FALSE, 5, 'en', 1);

INSERT INTO BLC_SC (SC_ID, CREATED_BY, DATE_CREATED, DATE_UPDATED, UPDATED_BY, CONTENT_NAME, OFFLINE_FLAG, PRIORITY, LOCALE_CODE, SC_TYPE_ID) VALUES (101, 1, CURRENT_TIMESTAMP, CURRENT_TIMESTAMP, 1, 'Shirt Special - 20% off all shirts', FALSE, 1, 'en', 1);

INSERT INTO BLC_SC (SC_ID, CREATED_BY, DATE_CREATED, DATE_UPDATED, UPDATED_BY, CONTENT_NAME, OFFLINE_FLAG, PRIORITY, LOCALE_CODE, SC_TYPE_ID) VALUES (102, 1, CURRENT_TIMESTAMP, CURRENT_TIMESTAMP, 1, 'Member Special - $10 off next order over $50', FALSE, 5, 'en', 1);


-- by ysyun

INSERT INTO BLC_SC (SC_ID, CREATED_BY, DATE_CREATED, DATE_UPDATED, UPDATED_BY, CONTENT_NAME, OFFLINE_FLAG, PRIORITY, LOCALE_CODE, SC_TYPE_ID) VALUES (103, 1, CURRENT_TIMESTAMP, CURRENT_TIMESTAMP, 1, 'Buy One Get One - Twice the Burn', FALSE, 1, 'en', 5);


-- Fields

INSERT INTO BLC_SC_FLD (SC_FLD_ID, DATE_CREATED, FLD_KEY, CREATED_BY, VALUE) VALUES (1, CURRENT_TIMESTAMP, 'imageUrl', 1, '/img/banners/buy-one-get-one-home-banner.jpg');

INSERT INTO BLC_SC_FLD (SC_FLD_ID, DATE_CREATED, FLD_KEY, CREATED_BY, VALUE) VALUES (2, CURRENT_TIMESTAMP, 'targetUrl', 1, '/hot-sauces');

INSERT INTO BLC_SC_FLD (SC_FLD_ID, DATE_CREATED, FLD_KEY, CREATED_BY, VALUE) VALUES (3, CURRENT_TIMESTAMP, 'imageUrl', 1, '/img/banners/shirt-special.jpg');

INSERT INTO BLC_SC_FLD (SC_FLD_ID, DATE_CREATED, FLD_KEY, CREATED_BY, VALUE) VALUES (4, CURRENT_TIMESTAMP, 'targetUrl', 1, '/merchandise');

INSERT INTO BLC_SC_FLD (SC_FLD_ID, DATE_CREATED, FLD_KEY, CREATED_BY, VALUE) VALUES (5, CURRENT_TIMESTAMP, 'imageUrl', 1, '/img/banners/member-special.jpg');

INSERT INTO BLC_SC_FLD (SC_FLD_ID, DATE_CREATED, FLD_KEY, CREATED_BY, VALUE) VALUES (6, CURRENT_TIMESTAMP, 'targetUrl', 1, '/register');


-- by ysyun

INSERT INTO BLC_SC_FLD (SC_FLD_ID, DATE_CREATED, FLD_KEY, CREATED_BY, VALUE) VALUES (7, CURRENT_TIMESTAMP, 'imageUrl', 1, '/img/banners/buy-one-get-one-home-banner.jpg');

INSERT INTO BLC_SC_FLD (SC_FLD_ID, DATE_CREATED, FLD_KEY, CREATED_BY, VALUE) VALUES (8, CURRENT_TIMESTAMP, 'targetUrl', 1, '/hot-sauces');


-- Field XREF

INSERT INTO BLC_SC_FLD_MAP (SC_ID, SC_FLD_ID, MAP_KEY) VALUES (100, 1, 'imageUrl');

INSERT INTO BLC_SC_FLD_MAP (SC_ID, SC_FLD_ID, MAP_KEY) VALUES (100, 2, 'targetUrl');

INSERT INTO BLC_SC_FLD_MAP (SC_ID, SC_FLD_ID, MAP_KEY) VALUES (101, 3, 'imageUrl');

INSERT INTO BLC_SC_FLD_MAP (SC_ID, SC_FLD_ID, MAP_KEY) VALUES (101, 4, 'targetUrl');

INSERT INTO BLC_SC_FLD_MAP (SC_ID, SC_FLD_ID, MAP_KEY) VALUES (102, 5, 'imageUrl');

INSERT INTO BLC_SC_FLD_MAP (SC_ID, SC_FLD_ID, MAP_KEY) VALUES (102, 6, 'targetUrl');


-- by ysyun

INSERT INTO BLC_SC_FLD_MAP (SC_ID, SC_FLD_ID, MAP_KEY) VALUES (103, 7, 'imageUrl');

INSERT INTO BLC_SC_FLD_MAP (SC_ID, SC_FLD_ID, MAP_KEY) VALUES (103, 8, 'targetUrl');


  - sql 추가하고 create-drop으로 놓은 다음 DemoSite를 제구동하면 Admin에서 하기와 같이 나온다. 

  


베너를 Carousel로 변환하여 볼 수 있을 것이다. 다음은 2 level Menu로 변경하는 과정을 살펴보자. 



참조 


  - Broadleaf DemoSite 소스

posted by Peter Note
2014. 12. 13. 11:59 Deep Learning

Recommanding Items 에서 원본 데이터에서 필터링을 통해 데이터 셋 만들기



아이템 추천 


  - people, item, score 를 설정한다 

    + 스코어 : 스코어가 여러개에 대한 데이터셋 벡터 수치화 하기 

  - dictionary -> transform matrix (dataset) -> find top match

    + 딕셔너리 ?

    + 데이터셋으로 만들고 최상위 매칭을 찾음 

  - build dataset -> recommending neighbor and link 




아이템 기반 필터링 


  - 사용자 기반 필터링과 대비 

  - 평가 점수를 통해 근접한 추천 아이템을 골라내기 

    + 질문과 답이 있는 것 (Supervised ML) -> 알고리즘으로 돌려 -> 추천 아이템을 찾아냄 

    + 질문 : 나에게 추천할 만한 영화는?

    + 답 : 내가 본 영화 평점, 사람들이 평가한 평점을 통해 추천

    + MovieLens 알고리즘 : http://grouplens.org/datasets/




ML 프로세스


  - 원본 데이터를 필터링을 통해서 데이터 셋을 만든다. 

  - 데이터 셋의 값에서 유사도(similarity)를 구한다. ex) 피어슨 (Pearson)

  - 값 X 유사도  = 정확도 (precision)

  - 필터링으로 통해 나온 데이터셋에서 ML 알고리즘을 돌려 추천 값을 얻는다.  





'Deep Learning' 카테고리의 다른 글

[ML] 7주차 - 6장 문서 필터링  (0) 2015.02.07
[ML] 6주차 - 5장 최적화  (0) 2015.01.31
[ML] 4주차 - 군집하기  (0) 2015.01.03
[ML] 2주차 - 추천하기  (0) 2014.12.06
[ML] 1주차 - 시작하기  (0) 2014.11.22
posted by Peter Note
2014. 12. 6. 12:30 Deep Learning

Chapter8 - Making Recommendations. Recommandation Engine


예로 영화 추천 시스템일 경우 사람들끼리 상관관계 거리를 계산해서 가까운 사람들의 소그룹을 만들고 소그룹에서 A 사용자가 안보았으나 B 사용자가 본 영화를 추천해 준다. 즉, 선호도가 비슷한 사람들의 소그룹을 만들고 여기서 안본 영화들을 추천해 주는 것이다. 선호도 그룹을 찾는 방법에는 유클리디안 거리와 피어슨 상관관계 기법이 사용된다. 여기에는 거리(Distance)와 계수(Coeffiecient)이야기가 나온다. 


Collaborative Filtering 

  - 큰 그룹을 찾아서 나와 유사한 경험의 작은 그룹을 찾는 것.


Collecting Preferences

  - 선호도 조사 



Finding Similar Users

  - 유사함을 찾는 방법

    + Euclidean distance

       > 유클리드 거리(Euclidean distance)는 두 점 사이의 거리를 계산할 때 흔히 쓰는 방법이다. (참조1)

          2차원적인 거리이다. 그 사이의 변수는 고려되지 않았다. 

          방향성이 무시된다. 

          전체의 평균

          * 두 점 사이의 거리가 가까우면 유사하다?

          * 1:n 관계일 때 거리도 적용가능?


       > 차트로 선호도 영역(Preference Space)에 표현 


    + Pearson correlation

       > 피어슨 상관계수(Pearson correlation coefficient) 는 두 변수간의 관련성을 구하기 위해 보편적으로 이용된다. 

         두 변수간 관련성이 높으면 이 두변수를 사용할 수 있다는 것을 의미? -> 다음 단계의 분석?

       > 여러 그룹의 상호 관계가 있는 일직선을 그린다. 완벽한 상호관계값은 1이다. 


   + Jaccard & Manhatton Distance

       >  자카드는 0~1 


    + best-fit, over-fit, under-fit

       > over-fit : 모든 데이터를 연결해서 적정 추정치를 알 수 없다. 

       > under-fit : 판단 기준이 애매한 것

       > best-fit : 데이터 사이의 측정 구간이 존재하고 그안에 선이 그려짐 



Similarity Metric

  - similarity parameter 가 필요 

  - Jaccard coefficient or  Manhattan distance 을 사용 

  - 거리공간 측정공식




'Deep Learning' 카테고리의 다른 글

[ML] 7주차 - 6장 문서 필터링  (0) 2015.02.07
[ML] 6주차 - 5장 최적화  (0) 2015.01.31
[ML] 4주차 - 군집하기  (0) 2015.01.03
[ML] 3주차 - 추천하기  (0) 2014.12.13
[ML] 1주차 - 시작하기  (0) 2014.11.22
posted by Peter Note

BroadleafThymeleaf이라는 서버 템플릿 엔진을 사용하고 있다. Broadleaf은 Tymeleaf을 상속받아 확장한 <blc:XXX> 태그를 xxxProcessor 클래스에 정의하고 있다. 따라서 템플릿에는 Tymeleaf 태그와 Broadleaf이 정의한 <blc:XXX> 태그가 함께 사용된다. 이에 대해 간략히 알아보고 Twitter Bootstrap을 템플릿에 적용해 보자 




Broadleaf에서 Thymeleaf 역할 


  - Thymeleaf은 레이아웃 템플릿 보다 텍스트 템플릿에 가깝고 객체값을 받아서 화면에 표현해 주는 제어구문들을 가지고 있다.

  - AngularJS의 Directive와 서버 템플릿의 Taglib로 사용자 정의한 태그와 백앤드/프론트앤드만 틀리고 유사하다고 하겠다. 

  - 그럼 데이터는 어떻게 주고 받아서 표현할까?

     + Thymeleaf은 HTML을 해석하고 맵핑된 객체를 통해 Value가 설정된 HTML을 최종 클라이언트에 전송한다. 

     + 이때 객체 정보는 Broadlead의 <blc:XXX> 태그에서 Broadleaf core소스에서 정의한 XXXProcessor 가 YYYService를 통해서 Thymleaf에 사용할 객체를 조회/설정/전달한다. 


  - core/broadlleaf-framework : Hibernate와 연결된 DAO와 업무 도메인 Service가 존재한다. 

  - core/broadleaf-framework-web : web이므로 프론트단에 필요한 폼, 필터, 태그처리 프로세스(Processor)등이 존재한다. 

    + DemoSite의 메인 페이지 템플릿은 /site/src/main/webapp/WEB-INF/templates/layout/home.html 해당 파일이다. 

    + home.html을 열어보면 맨위에 하기와 같이 <head>가 설정되어 있다. 

    + <head> 태그를 core/broadleaf-framework-web의 org.broadleafcommerce.core.web.processor.HeadProcessor 가 처리한다.

    + HeadProcessor는 pageTitle 값을 처리하는 클래스이다. 

    + 즉, XxxYyyZzzProcessor 가 있고 태그로 <xxx-yyy-zzz> 태그를 사용하면 XxxYyyZzzProcessor 가 동작하는 것이다. 

// home.html 일부 내역


<head th:include="/layout/partials/head (pageTitle='Broadleaf Demo - Heat Clinic')"></head>

<body>

    <div id="notification_bar"></div>

    <header th:substituteby="layout/partials/header" />

    

    <div id="content" class="width_setter group" role="main">

        <nav th:substituteby="layout/partials/nav" />

        <blc:content contentType="Homepage Banner Ad" />       

        <div id="banners" th:if="${contentItem !=null and contentItem['targetUrl'] != null and contentItem['imageUrl'] != null}">

            <a th:href="@{${contentItem['targetUrl']}}"><img blc:src="@{${contentItem['imageUrl']}}" /></a>       

        </div>

  ... 중략 ...

</body>



// HeadProcessor.java 일부 내역


import org.thymeleaf.processor.element.AbstractFragmentHandlingElementProcessor;

public class HeadProcessor extends AbstractFragmentHandlingElementProcessor {

    @Resource(name = "blHeadProcessorExtensionManager")

    protected HeadProcessorExtensionListener extensionManager;

    public static final String FRAGMENT_ATTR_NAME = StandardFragmentAttrProcessor.ATTR_NAME;

    protected String HEAD_PARTIAL_PATH = "layout/partials/head";


    public HeadProcessor() {

        super("head");

    }


    @Override

    public int getPrecedence() {

        return 10000;

    }


    @Override

    protected boolean getRemoveHostNode(final Arguments arguments, final Element element) {

        return true;

    }


    @Override

    @SuppressWarnings("unchecked")

    protected List<Node> computeFragment(final Arguments arguments, final Element element) {

        String pageTitle = element.getAttributeValue("pageTitle");

        try {

            Expression expression = (Expression) StandardExpressions.getExpressionParser(arguments.getConfiguration())

                    .parseExpression(arguments.getConfiguration(), arguments, pageTitle);

            pageTitle = (String) expression.execute(arguments.getConfiguration(), arguments);

        } catch (TemplateProcessingException e) {}


        ((Map<String, Object>) arguments.getExpressionEvaluationRoot()).put("pageTitle", pageTitle);

      ((Map<String, Object>) arguments.getExpressionEvaluationRoot()).put("additionalCss", element.getAttributeValue("additionalCss"));


        extensionManager.processAttributeValues(arguments, element);

        return new ArrayList<Node>();

    }

}


  - <blc:content> 는 특별히 admin/broadleaf-conentmanagement-modul 에서 org.broadleafcommerce.cms.web.processor.ContentProcessor 로 존재한다.

  - <blc.content> 태그는 내부적으로 서비스를 호출해서 contentItem을 값을 설정해 준다. 이때 contentType="Homepage Banner Ad"는 admin 페이지에서 설정해주는 것이다. 즉, 관리 도구를 통해 Content Mangement를 할 수 있고 이를 간단히 <blc:xxx> 태그를 사용한다.

1) admin 프로젝트에서 ant task중 jetty-demo 실행

2) http://localhost:8081/admin (id:admin, password: admin)

3) Content 메뉴의 content items 목록이 나온다. 여기서 "Content Type"으로 찾으면 됨 



  - Thymeleaf의 특정 인터페이스를 상속받으면 자신만의 태그를 쉽게 만들수 있고 Broadleaf에서는 XXXProcessor로 만들고 있는 것이다. 그리고 <blc:xxx> 태그를 만들어 xxxProcessor내부에서 Service를 통해 Hibernate를 호출해 업무적인 부분을 처리하고 있다.


  얼핏 보면 AngularJS의 Directive를 만들고 내부에서 AngularJS 서비스를 DI(Dependency Injection) 받아 호출하고 서비스내에서 서버로 AJAX 호출하는 계층을 두는 것과 유사하다. 따라서 Broadleaf에서 정의한 xxxProcessor들을 AngularJS Directive로 전환하면 AngularJS기반의 SPA(Single Page Application)으로의 전환이 가능하다. 




Twitter Bootstrap 적용하기 


  - 트위터 부트스트랩은 UI Framework으로 RWD (Responsible Web Design)을 적용할 수 있는 CSS를 제공하고 많이 사용하는 jQuery 플러그인도 함께 제공된다. 

  - 우선 트위터 부트스트랩 v3.3.1을 다운로드하고 압축을 풀면 css, fonts, js 폴더가 있다 

  - site/src/main/webapp 밑에 css, fonts, js를 복사한다. 

  - site/src/main/webapp/WEB-INF/templates/layout 폴더가 상/하/메인에 대한 레이아웃을 설정하는 템플릿 HTML이 존재한다

  - 상단 head.html에 bootstrap.css를 추가하고 하단 footer.html에 bootstrap.js를 하기와 같이 추가한다 

// layout/partials/head.html 


    <blc:bundle name="style.css" 

                mapping-prefix="/css/"

                files="bootstrap.css,

                       style.css,

                       jquery.rating.css" />



// layout/partials/footer.html


    <blc:bundle name="lib.js" 

                mapping-prefix="/js/"

                files="plugins.js,

                       libs/jquery.MetaData.js,

                       libs/jquery.rating.pack.js,

                       libs/jquery.dotdotdot-1.5.1.js,

                       bootstrap.js" />


  - 기존의 CSS는 전부 무시하고 트위터 부트스트랩을 재적용하는 단계이다. 따라서 DemoSite에 적용한 css/style.css 의 내용을 전부 제거 한다.

  - 제거한 내용에 몇가지 CSS를 하기와 같이 적용한다.

/************************************/

/* Header Customizing               */

/************************************/

.navbar .navbar-top {

height: 30px;

padding-top: 5px;

background-color: #F5F5F5;

transition: all 0.1s ease-out 0s;

-webkit-transition: all 0.1s ease-out 0s;

-moz-transition: all 0.1s ease-out 0s;

-ms-transition: all 0.1s ease-out 0s;

-o-transition: all 0.1s ease-out 0s;

font-size: 11px;

line-height: 11px;

text-transform: uppercase;

}


.navbar .container-fluid {

background-color:#525252;

}


.navbar-inverse .navbar-nav > li > a, .navbar-inverse .navbar-brand {

color: #FEFEFE;

}


html, body {

height: 100%;

}


  - site의 WEB-INF/templates/layout/home.html 의 내역에서 필요없는 부분을 주석처리 하고 partials/nav.html 를 사용한다. 

    + <blc:xxx> 로 사용하는 부분을 전부 제거했다. 나중에 필요한 부분에 넣을 것이다. 

    + partails/nav.html 에서 메뉴역할을 하도록 partails/header.html을 nav.html에 통합할 것이다. 

    + <blc:form> 을 통해 제품 검색을 수행한다. 

<head th:include="/layout/partials/head (pageTitle='Broadleaf And Twitter Bootstrap')"></head>


<body>

    <div id="notification_bar"></div>

    

    <nav th:substituteby="layout/partials/nav" />

    

    <footer th:substituteby="layout/partials/footer" />

    

</body>

</html>


  - 다음으로 메뉴를 nav.html에 적용한다. 

    + 트위터 부트스트랩에 맞게 RWD를 적용하고 카테고리(Categories)에 대해 Thymeleaf의 <li th:each> 구문을 적용한다.

    + Admin 화면 (http://localhost:8081/admin) 에서 Category에 해당하는 내용이 메뉴에 적용되는 것으로 broadleaf-framework-web 프로젝트의 org.broadleafcommerce.core.web.processor.CategoriesProcessor가 처리한다. 

<nav>   

    <div th:remove="all">

        <!--

             This template displays the navigation of the site by looking up the category named "Nav"

             and building a list of the categories sub-categories.                          

        -->

    </div>

    

    <blc:categories resultVar="navCategories" parentCategory="Primary Nav" maxResults="6" />

    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">

    

      <!-- TOP Header  -->

      <div class="navbar-top">

      <div class="container">

      <div class="pull-right">

   

    <div th:if="${customer.anonymous}"  th:remove="tag">

            <a th:href="@{/login}">

                <span th:text="#{home.login}">Login</span>

            </a>

            &nbsp;|&nbsp; 

            <a th:href="@{/register}">

                <span th:text="#{home.register}">Register</span>

            </a>

            &nbsp;|&nbsp; 

        </div>

        <div th:unless="${customer.anonymous}" th:remove="tag">

            <span><span th:text="#{home.welcome}">Welcome</span>, <a th:href="@{/account}" th:text="${customer.firstName}"></a></span>

            &nbsp;|&nbsp; 

            <a th:href="@{/logout}">

                <span th:text="#{home.logout}">Logout</span>

            </a>

            &nbsp;|&nbsp; 

        </div>

        <img blc:src="@{/img/icon-cart.jpg}" alt="Shopping Cart Icon" />&nbsp; 

        <a id="cartLink" th:href="@{/cart}">

            <span id="headerCartItemWordSingular_i18n" style="display: none;" th:text="#{home.item}" />

            <span id="headerCartItemWordPlural_i18n" style="display: none;" th:text="#{home.items}" />

            <span class="headerCartItemsCount" th:text="${cart.itemCount}" />

            <span class="headerCartItemsCountWord" th:text="${cart.itemCount == 1} ? #{home.item} :  #{home.items}" />

        </a>

   

    </div>   

    </div>

      </div>

      

      <!-- Responsible Menu -->

      <div class="container-fluid">

        <div class="navbar-header">

          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

            <span class="sr-only">Toggle navigation</span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

          </button>

          <a class="navbar-brand" href="/">eCommerce</a>

        </div>

        

        <div id="navbar" class="navbar-collapse collapse">

          <!-- Categories -->

          <ul class="nav navbar-nav navbar-right">

       

        <blc:form class="navbar-form navbar-right" style="margin-left:5px; margin-right:5px" th:action="@{/search}" method="GET">

            <input type="search" class="form-control" placeholder="SEARCH PROD" name="q" th:value="${originalQuery}" />

            <input type="submit" class="btn btn-default" value="go" />

    </blc:form>

   

            <li th:each="category : ${navCategories}" th:unless="${#strings.isEmpty(category.url)}">

            <a class="home" th:href="@{${category.url}}" th:class="${categoryStat.first}? 'home'" th:text="${category.name}"></a>

        </li>

          </ul>

        </div>

      </div>

      

    </nav>

    

</nav>


결과 화면은 다음과 같이 정상적인 화면과 RWD 메뉴가 적용된 화면이다. 



* 소스는 제공되지 않습니다. 관심있으신 분은 별도로 문의해 주세요. 



참조 


  - http://www.broadleafcommerce.org

  - Broadleaf core 깃헙 소스

  - http://www.thymeleaf.org

  - 트위터 부트스트랩

posted by Peter Note

BroadLeaf eCommerce 솔루션은 서버는 자바 Spring Framework와 Hibernate를 사용하고 상품에 대한 검색은 Solr를 사용한다. 그리고 클라이언트는 ThymeLeaf 템플릿 엔진을 사용해서 BroadLeaf과 강하게 결합해서 사용된다. BroadLeaf 데모 사이트를 실제 사용할 수 있는 eCommerce 사이트로 전환하는 과정을 살펴본다. 또한 Frontend 쪽에 Twitter BootstrapAngularJS를 적용해 Tymeleaf과 상호 운용될 수 있도록 설정해 본다.






Broadleaf DemoSite 설치 


  - BroadleafCommerce 는 코어 소스이고 Community 버전으로 오픈소스를 제공한다. 

  - BroadleafCommerce 코어 소스를 사용한 DemoSite를 제공한다. 

  - DemoSite를 깃헙에서 받아 사용해도 되고 eclipse workspace 파일을 별도로 이곳에서 받아도 된다. (다운로드 버전은 3.1.8 버전)

    + 만일 3.1.9 버전을 사용하고 싶다면 깃헙의 DemoSite 릴리즈에서 3.1.9-GA를 다운로드하면 된다.


  - DemoSite를 maven project로 eclipse에 import하는 과정은 BroadLeaf Starting 가이드를 참조한다.

    + eclipse는 luna를 사용하면 eclipse용 maven 플러그인이 기본 설치되어 있다. 

    + 단, Apache Maven 은 다운로드해서 설치하고 path를 잡아준다.

    + 최초 DemoSite/build.xml 을 Ant view에서 열고 "change-identifier"를 수행하고

       maven의 grouId를 com.xxxx 식으로 넣고  "y"를 선택하면 자바 패키지와 maven groupId등을 설정한 값으로 자동 변경한다. 


  - 최초에 메이븐 빌드를 한번 해준다. 먼저 DemoSite로 이동해서 하기 명령을 한번 수행한다

$ cd DemoSite

$ mvn clean install


  - Broadleaf은 Site와 Admin으로 구분되어 Site는 쇼핑사이트를 Admin은 카랄로그와 컨텐츠를 관리하고 각각 8080, 8081를 사용한다.

    + site/build.xml 과 admin/build.xml 을 ant view에서 열고 "jetty-demo"를 수행하면 된다. 

    + 데이터베이스는 기본으로 메모리DB인 HSQLDB를 사용한다.

Site

http://localhost:8080


Admin (id: admin, password: admin)

http://localhost:8081/admin/




MySQL전환하기 


  - MySQL 전환작업은 가이드를 참조한다. 

  - mysql로 전환하기 위해 데이터베이스와 계정을 broadleaf 로 지정하고 계정 암호는 abc1234 로 생성한다.

-- %> mysql --user=root -p mysql

-- Enter password: ******


-- mysql> grant all on broadleaf.* to broadleaf@localhost identified by 'abc1234' with grant option;

-- mysql> create database broadleaf;

-- mysql> flush privileges;


-- %> mysql -u broadleaf -p broadleaf

-- Enter password: ******


-- mysql> show grants for broadleaf@localhost;

-- mysql> select current_user;


  - admin과 site가 mysql을 사용하도록 DemoSite/pom.xml과 admin/pom.xml과 site/pom.xml에 다음을 설정한다 

// DemoSite/pom.xml  안에 설정 

<dependency>

    <groupId>mysql</groupId>

    <artifactId>mysql-connector-java</artifactId>

    <version>5.1.34</version>

    <type>jar</type>

    <scope>compile</scope>

</dependency> 


// admin, site/pom.xml 안에 설정 

<dependency>

    <groupId>mysql</groupId>

    <artifactId>mysql-connector-java</artifactId>

</dependency> 


  - jetty를 통해 기동될 때 데이터베이스 커넥션 유형을 3가지를 사용하는데 HSQLDB에서 MySQL로 환경값을 바꾸어 주어야 한다. 

    + /site/src/main/webapp/WEB-INF/jetty-env.xml

    + /admin/src/main/webapp/WEB-INF/jetty-env.xml

<New id="webDS" class="org.eclipse.jetty.plus.jndi.Resource">

    <Arg>jdbc/web</Arg>

    <Arg>

        <New class="org.apache.commons.dbcp.BasicDataSource">

            <Set name="driverClassName">com.mysql.jdbc.Driver</Set>

            <Set name="url">jdbc:mysql://localhost:3306/broadleaf?useUnicode=true&amp;characterEncoding=utf8</Set>

            <Set name="username">broadleaf</Set>

            <Set name="password">abc1234</Set>

        </New>

    </Arg>

</New>

<New id="webSecureDS" class="org.eclipse.jetty.plus.jndi.Resource">

    <Arg>jdbc/secure</Arg>

    <Arg>

        <New class="org.apache.commons.dbcp.BasicDataSource">

            <Set name="driverClassName">com.mysql.jdbc.Driver</Set>

            <Set name="url">jdbc:mysql://localhost:3306/broadleaf?useUnicode=true&amp;characterEncoding=utf8</Set>

            <Set name="username">broadleaf</Set>

            <Set name="password">abc1234</Set>

        </New>

    </Arg>

</New>

<New id="webStorageDS" class="org.eclipse.jetty.plus.jndi.Resource">

    <Arg>jdbc/storage</Arg>

    <Arg>

        <New class="org.apache.commons.dbcp.BasicDataSource">

            <Set name="driverClassName">com.mysql.jdbc.Driver</Set>

            <Set name="url">jdbc:mysql://localhost:3306/broadleaf?useUnicode=true&amp;characterEncoding=utf8</Set>

            <Set name="username">broadleaf</Set>

            <Set name="password">abc1234</Set>

        </New>

    </Arg>

</New>


  - 하이버네이트의 Dialect를 HSQLDB에서 MySQL로 바꾼다. 

     + /core/src/main/resources/runtime-properties/common-shared.properties  의 맨 하단에 다음을 넣는다. 

# overriding dialect 

blPU.hibernate.dialect=org.hibernate.dialect.MySQL5InnoDBDialect

blSecurePU.hibernate.dialect=org.hibernate.dialect.MySQL5InnoDBDialect

blCMSStorage.hibernate.dialect=org.hibernate.dialect.MySQL5InnoDBDialect


  - DemoSite의 build.properties의 기본 환경값을 HSQLDB에서 MySQL로 바꾼다. 

    + /DemoSite/build.properties 의 맨 하단에 다음을 넣는다. 

# new overriding 

ant.hibernate.sql.ddl.dialect=org.hibernate.dialect.MySQL5InnoDBDialect


ant.blPU.url=jdbc:mysql://localhost:3306/broadleaf

ant.blPU.userName=broadleaf

ant.blPU.password=abc1234

ant.blPU.driverClassName=com.mysql.jdbc.Driver


ant.blSecurePU.url=jdbc:mysql://localhost:3306/broadleaf

ant.blSecurePU.userName=broadleaf

ant.blSecurePU.password=abc1234

ant.blSecurePU.driverClassName=com.mysql.jdbc.Driver


ant.blCMSStorage.url=jdbc:mysql://localhost:3306/broadleaf

ant.blCMSStorage.userName=broadleaf

ant.blCMSStorage.password=abc1234


  - 그리고 가장 중요한 설정은 site와 admin 의 common.properties에 맨 하단에 다음 사항을 필히 넣어 주어야 BLC_SKU 테이블이 생성됨

    + /site/src/main/resources/runtime-properties/common.properties

    + /admin/src/main/resources/runtime-properties/common.properties

# overriding dialect 

blPU.hibernate.dialect=org.hibernate.dialect.MySQL5InnoDBDialect

blSecurePU.hibernate.dialect=org.hibernate.dialect.MySQL5InnoDBDialect

blCMSStorage.hibernate.dialect=org.hibernate.dialect.MySQL5InnoDBDialect


  - 전환 후에는 ant task에서 "build-app"를 해주고 "jetty-run-no-db"를 선택하면 build한 target 디렉토리의 소스가 적용된다. 


     




참조 

  

  - Broadleaf v3.1 Guide

posted by Peter Note