블로그 이미지
플로거
Android/J2EE/Web/Spring/Database

calendar

          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            

Notice

Statistics Graph
2019.01.04 17:01 Programming/Angular

Angular Style Guide & Angular 2


The Angular 1 Style Guide.

The Angular 2 Style Guide.

https://angular.io

https://angular.io/docs/ts/latest/quickstart.html

https://angular.io/resources/live-examples/quickstart/ts/eplnkr.html

https://angular.io/docs/ts/latest/tutorial/

http://localhost:8080/index5.html


AngularJS Patterns: Clean Code

https://github.com/johnpapa/angular-styleguide/tree/master/a1

https://github.com/johnpapa/ng-demos

https://github.com/johnpapa/ng-demos/tree/master/modular

http://han41858.tistory.com/9

https://droidhere.com/02/angularjs-vs-angular-2-one-better/



posted by 훈즈 플로거
2019.01.04 15:54 Programming/Angular

Updating Angular

npm run update-deps

bower.json

angular version -> 해당 version 의 최신 버전으로 업데이트

"dependencies": {
   "angular": "~1.5.0",
   "angular-route": "~1.5.0",
   "angular-loader": "~1.5.0",
   "angular-mocks": "~1.5.0",
   "html5-boilerplate": "^5.3.0"
 }


===>


"dependencies": {
   "angular": "~1.5.11",
   "angular-route": "~1.5.11",
   "angular-loader": "~1.5.11",
   "angular-mocks": "~1.5.11",
   "html5-boilerplate": "^5.3.0"
 }


posted by 훈즈 플로거
2019.01.04 15:46 Programming/Angular

AngularJS Seed

- the seed for AngularJS apps

https://github.com/angular/angular-seed

git clone https://github.com/angular/angular-seed.git

cd angular-seed

npm install

npm start  - http://localhost:8000/index.html

Directory Layout - _test.js -> .spec.js

npm test

Running End-to-End Tests

cd e2e-tests

npm start

npm run update-webdriver

npm run protractor


posted by 훈즈 플로거
2019.01.04 11:14 Programming/Angular

Angularjs Tutorial


0 - Bootstrapping - https://docs.angularjs.org/tutorial/step_00

1 - Static Template - https://docs.angularjs.org/tutorial/step_01

2 - AngularJS Templates - https://docs.angularjs.org/tutorial/step_02

3 - Components - https://docs.angularjs.org/tutorial/step_03

4 - Directory and File Organization - https://docs.angularjs.org/tutorial/step_04

5 - Filtering Repeaters - https://docs.angularjs.org/tutorial/step_05

6 - Two-way Data Binding - https://docs.angularjs.org/tutorial/step_06

7 - XHR & Dependency Injection - https://docs.angularjs.org/tutorial/step_07

8 - Templating Links & Images - https://docs.angularjs.org/tutorial/step_08

9 - Routing & Multiple Views - https://docs.angularjs.org/tutorial/step_09

10 - More Templating - https://docs.angularjs.org/tutorial/step_10

11 - Custom Filters - https://docs.angularjs.org/tutorial/step_11

12 - Event Handlers - https://docs.angularjs.org/tutorial/step_12

13 - REST and Custom Services - https://docs.angularjs.org/tutorial/step_13

14 - Animations - https://docs.angularjs.org/tutorial/step_14

The End - https://docs.angularjs.org/tutorial/the_end


posted by 훈즈 플로거
2019.01.03 12:59 Programming/Angular

PhoneCat Tutorial App


  • Environment Setup

Install Git - http://git-scm.com/download

Install Node.js - https://nodejs.org/en/download

node --version - Node.js v4+

git clone --depth=16 https://github.com/angular/angular-phonecat.git

cd angular-phonecat


  • npm install

This command reads angular-phonecat's package.json file and downloads the following tools into the node_modules directory:

Running npm install will also automatically use bower to download the AngularJS framework into the app/bower_components directory.

npm install -g bower -> bower install

npm start  -> Running the Development Web Server


  • Running Unit Tests

npm test

Karma - https://karma-runner.github.io/1.0/index.html

app/phone-list.component.spec.js

describe('phoneList', function() {
 // Load the module that contains the `phoneList` component before each test
 beforeEach(module('phonecatApp'));
 // Test the controller
 describe('PhoneListController', function() {
   it('should create a `phones` model with 3 phones', inject(function($componentController) {
     var ctrl = $componentController('phoneList');
     expect(ctrl.phones.length).toBe(3);
   })); }); });


  • Running E2E Tests

The E2E tests are kept in the e2e-tests directory.

cd e2e-tests

npm run update-webdriver

npm start

npm run protractor - seperate terminal/command

protractor.conf.js

scenarios.js


posted by 훈즈 플로거
2018.12.31 23:00 Programming/Angular

Directives

Directives are a unique and powerful feature available in AngularJS. Directives let you invent new HTML syntax, specific to your application.

Reusable Components

We use directives to create reusable components. A component allows you to hide complex DOM structure, CSS, and behavior. This lets you focus either on what the application does or how the application looks separately.

Localization

An important part of serious apps is localization. AngularJS's locale aware filters and stemming directives give you building blocks to make your application available in all locales.

[index.html]

  1. <!doctype html>
  2. <html ng-app="app">
  3. <head>
  4. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
  5. <script src="components.js"></script>
  6. <script src="app.js"></script>
  7. </head>
  8. <body>
  9. <tabs>
  10. <pane title="Localization">
  11. <span>Date: {{ '2012-04-01' | date:'fullDate' }}</span><br>
  12. <span>Currency: {{ 123456 | currency }}</span><br>
  13. <span>Number: {{ 98765.4321 | number }}</span><br>
  14. </pane>
  15. <pane title="Pluralization">
  16. <div ng-controller="BeerCounter">
  17. <div ng-repeat="beerCount in beers">
  18. <ng-pluralize count="beerCount" when="beerForms"></ng-pluralize>
  19. </div>
  20. </div>
  21. </pane>
  22. </tabs>
  23. </body>
  24. </html>

[components.js]

  1. angular.module('components', [])
  2.  
  3. .directive('tabs', function() {
  4. return {
  5. restrict: 'E',
  6. transclude: true,
  7. scope: {},
  8. controller: function($scope, $element) {
  9. var panes = $scope.panes = [];
  10.  
  11. $scope.select = function(pane) {
  12. angular.forEach(panes, function(pane) {
  13. pane.selected = false;
  14. });
  15. pane.selected = true;
  16. }
  17.  
  18. this.addPane = function(pane) {
  19. if (panes.length == 0) $scope.select(pane);
  20. panes.push(pane);
  21. }
  22. },
  23. template:
  24. '<div class="tabbable">' +
  25. '<ul class="nav nav-tabs">' +
  26. '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">'+
  27. '<a href="" ng-click="select(pane)">{{pane.title}}</a>' +
  28. '</li>' +
  29. '</ul>' +
  30. '<div class="tab-content" ng-transclude></div>' +
  31. '</div>',
  32. replace: true
  33. };
  34. })
  35.  
  36. .directive('pane', function() {
  37. return {
  38. require: '^tabs',
  39. restrict: 'E',
  40. transclude: true,
  41. scope: { title: '@' },
  42. link: function(scope, element, attrs, tabsController) {
  43. tabsController.addPane(scope);
  44. },
  45. template:
  46. '<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' +
  47. '</div>',
  48. replace: true
  49. };
  50. })

[app.js]

  1. angular.module('app', ['components'])
  2.  
  3. .controller('BeerCounter', function($scope, $locale) {
  4. $scope.beers = [0, 1, 2, 3, 4, 5, 6];
  5. if ($locale.id == 'en-us') {
  6. $scope.beerForms = {
  7. 0: 'no beers',
  8. one: '{} beer',
  9. other: '{} beers'
  10. };
  11. } else {
  12. $scope.beerForms = {
  13. 0: 'žiadne pivo',
  14. one: '{} pivo',
  15. few: '{} pivá',
  16. other: '{} pív'
  17. };
  18. }
  19. });

출처 - angularjs.com


posted by 훈즈 플로거
2018.12.31 02:20 Programming/Angular


Create Components

http://plnkr.co/edit/NomETVhyqSIryX2Pm6dc?p=preview

https://docs.angularjs.org/guide/component

Component is a special kind of directive that uses a simpler configuration which is suitable for a component-based application structure.

Advantages of Components:

  • simpler configuration than plain directives

  • promote sane defaults and best practices

  • optimized for component-based architecture

  • writing component directives will make it easier to upgrade to Angular

  • Angular 2 is able of using older AngularJS components.



Reference

  • Developer Guide

https://docs.angularjs.org/guide

  • AngularJS API Docs

https://docs.angularjs.org/api

  • Error Reference

https://docs.angularjs.org/error


Guide to AngularJS

  • Official AngularJS Tutorial

https://docs.angularjs.org/tutorial/index - PhoneCat Tutorial App

  • AngularJS Seed

https://github.com/angular/angular-seed

  • Angular Style Guide

https://github.com/johnpapa/angular-styleguide



posted by 훈즈 플로거
2017.07.16 01:03 Programming/Spring

성능을 개선하고 순환하는 의존성을 해결하기 위해 필요한 로컬 세션 캐싱을 제외하고 기본적으로 캐시가 작동하지 않는다. Mabatis 캐싱을 활성화하기 위해서 SQL 매핑 파일에 한줄을 추가하면 된다.

<cache eviction="FIFO" flushInterval="60000" size="512" readOnly="true"/>

이 설정은 60 초마다 캐시를 지우는 FIFO 캐시를 생성한다. 이 캐시는 결과 객체 또는 결과 리스트를 512개까지 저장하고 각 객체는 읽기 전용이다. 캐시 데이터를 변경하는 것은 개별 쓰레드에서 호출자간의 충돌을 야기할 수 있다.

  • 매핑 구문 파일내 select 구문의 모든 결과가 캐시 될 것이다.

  • 매핑 구문 파일내 insert, update 그리고 delete 구문은 캐시를 지울(flush) 것이다.

  • 캐시는 Least Recently Used (LRU) 알고리즘을 사용할 것이다.

  • 캐시는 스케줄링 기반으로 시간순서대로 지워지지는 않는다. (예를들면. no Flush Interval)

  • 캐시는 리스트나 객체에 대해 1024 개의 참조를 저장할 것이다. (쿼리 메소드가 실행될때마다)

  • 캐시는 읽기/쓰기 캐시처럼 처리될 것이다. 이것은 가져올 객체는 공유되지 않고 호출자에 의해 안전하게 변경된다는 것을 의미한다.

사용가능한 캐시 전략은 4가지


  • LRU – Least Recently Used: 가장 오랜시간 사용하지 않는 객체를 제거

  • FIFO – First In First Out: 캐시에 들어온 순서대로 객체를 제거

  • SOFT – Soft Reference: 가비지 컬렉터의 상태와 강하지 않은 참조(Soft References )의 규칙에 기초하여 객체를 제거

  • WEAK – Weak Reference: 가비지 컬렉터의 상태와 약한 참조(Weak References)의 규칙에 기초하여 점진적으로 객체 제거

  • 디폴트 값은 LRU 이다.

flushInterval 은 양수로 셋팅할 수 있고 밀리세컨드로 명시되어야 한다. 디폴트는 셋팅되지 않으나 플러시(flush) 주기를 사용하지 않으면 캐시는 오직 구문이 호출될때마다 캐시를 지운다.

size는 양수로 셋팅할 수 있고 캐시에 객체의 크기를 유지하지만 메모리 자원이 충분해야 한다. 디폴트 값은 1024 이다.

readOnly 속성은 true 또는 false 로 설정 할 수 있다. 읽기 전용 캐시는 모든 호출자에게 캐시된 객체의 같은 인스턴스를 리턴 할 것이다. 게다가 그 객체는 변경할 수 없다. 이건 종종 성능에 잇점을 준다. 읽고 쓰는 캐시는 캐시된 객체의 복사본을 리턴 할 것이다. 이건 조금 더 늦긴 하지만 안전하다. 디폴트는 false 이다.


cache 적용시 디폴트 와 non-cache

  • select

flushCache 이 값을 true 로 셋팅하면 구문이 호출될때마다 로컬, 2nd 레벨 캐시가 지워질것이다(flush). 디폴트는 false이다.

 useCache 이 값을 true 로 셋팅하면 구문의 결과가 2nd 레벨 캐시에 캐시 될 것이다. 디폴트는 true이다.

  • insert, update and delete

flushCache 이 값을 true 로 셋팅하면 구문이 호출될때마다 캐시가 지원질것이다(flush). 디폴트는 false 이다.

  • non-cache (cache 가 적용된 mapper 내의 특정 쿼리에 대한 )

select 구문에서는 useCache=false, insert, update and delete 에서는  flushCache = true 를 명시적으로 준다.


결론적으로 MyBatis cache 를 적용하기 위해서는

MyBatis 설정

  • cacheEnabled ( 설정에서 각 매퍼에 설정된 캐시를 전역적으로 사용할지 말지에 대한 여부 )  디폴트 true

각각의 Mapper

  • 각 매퍼별 <cache eviction="FIFO" flushInterval="60000" size="512" readOnly="true"/> 설정 구문 추가

  • cache 대상 select 구문에는 별도의 기술이 필요없음

  • non-cache 대상 구문에만  select 구문에서는 useCache = false,

  • insert, update and delete 에서는  flushCache = true 를 명시적으로 준다.


'Programming > Spring' 카테고리의 다른 글

MyBatis Cache  (0) 2017.07.16
Spring Application Config  (0) 2017.05.10
Project Lombok  (0) 2016.04.01
posted by 훈즈 플로거
TAG cache, mybatis, Web
2016.04.01 11:16 Programming/Spring


https://projectlombok.org/


http://jnb.ociweb.com/jnb/jnbJan2010.html



Installation


java -jar lombok.jar

Screenshot of the Lombok Installer




Maven

Adding lombok to your pom file

<dependencies>
	<dependency>
		<groupId>org.projectlombok</groupId>
		<artifactId>lombok</artifactId>
		<version>1.16.18</version>
		<scope>provided</scope>
	</dependency>
</dependencies>
<!-- 아래 정보도 필요할 수 있음 -->
<repositories>
    <repository>
        <id>projectlombok.org</id>
        <url>http://projectlombok.org/mavenrepo</url>
    </repository>
</repositories>


Maven > Update Project..



Lombok features.

val

Finally! Hassle-free final local variables.

@NonNull

or: How I learned to stop worrying and love the NullPointerException.

@Cleanup

Automatic resource management: Call your close() methods safely with no hassle.

@Getter/@Setter

Never write public int getFoo() {return foo;} again.

@ToString

No need to start a debugger to see your fields: Just let lombok generate a toString for you!

@EqualsAndHashCode

Equality made easy: Generates hashCode and equals implementations from the fields of your object..

@NoArgsConstructor, @RequiredArgsConstructor and @AllArgsConstructor

Constructors made to order: Generates constructors that take no arguments, one argument per final / non-nullfield, or one argument for every field.

@Data

All together now: A shortcut for @ToString@EqualsAndHashCode@Getter on all fields, and @Setter on all non-final fields, and @RequiredArgsConstructor!

@Value

Immutable classes made very easy.

@Builder

... and Bob's your uncle: No-hassle fancy-pants APIs for object creation!

@SneakyThrows

To boldly throw checked exceptions where no one has thrown them before!

@Synchronized

synchronized done right: Don't expose your locks.

@Getter(lazy=true)

Laziness is a virtue!

@Log

Captain's Log, stardate 24435.7: "What was that line again?"



'Programming > Spring' 카테고리의 다른 글

MyBatis Cache  (0) 2017.07.16
Spring Application Config  (0) 2017.05.10
Project Lombok  (0) 2016.04.01
posted by 훈즈 플로거
prev 1 next