전체 글
추상 팩토리 패턴 (Abstract Factory Pattern)
추상 팩토리 패턴(Abstract Factory Pattern)은 관련성 있는 여러 종류의 객체를 일관된 방식으로 생성하는 경우에 유용하다. 아래에서 예를 통해 알 수 있겠지만 Door와 Motor를 종류에 따라 얻기 위해 Factory 클래스를 정의해서 사용하기 보다는 관련 객체들을 일관성 있게 생성할 수 있도록 Factory 클래스를 정의하는 것이 효과적이다. 예를 들어보자. [문제상황] 엘레베이터 모터를 움직여야 할 경우 엘레베이터 브랜드에 따라 door와 motor를 별도로 설정해주어야 하는 경우에는 다음과 같이 별도로 두 개의 과정을 거쳐야해서 불편하다. 1234567891011121314151617181920212223242526272829303132333435363738394041424344..
컴퍼지트 패턴 (Composite pattern)
컴포지트 패턴 (Composite pattern)은 부분-전체의 관계를 갖는 객체들을 정의할 때 유용하다. 그리고 클라이언트는 전체와 부분을 구분하지 않고 동일한 인터페이스를 사용할 수 있다, 컴퍼지트 패턴은 크게 다음과 같이 구성된다. Component : Leaf 클래스와 Composite 클래스에 공통 인터페이스 Leaf: 부품들 (Component 클래스의 하위 클래스) Composite : 부품들을 사용하는 본체 클래스 여러가지 Leaf 클래스들을 가진다. 또한 Composite 클래스 역시 Component의 하위 클래스로서 여러개의 Composite를 소유할 수도 있다. 예를 들어보자 휴대폰을 조립하기 위해서 다음과 같이 휴대폰을 구성하기위해 부품들의 가격과 전력을 계산하는 구조가 있다고 가..
하이브리드 앱 소개 및 아이오닉 소개, 설치 방법
하이브리드 앱-> 웹 기술을 통해 앱을 개발하여 다양한 OS에 지원되는 앱을 칭한다 하이브리드 앱과 네이티브, 웹앱 비교네이티브 앱장점 : 빠르다, 네이티브 API 사용의 편의성단점 : 언어의 제약, 플랫폼 한정적 웹앱장점: 유지보수의 편리성, 크로스 플랫폼단점 : 네이티브 액세스 못함 하이브리드 앱장점 : 웹개발과 동일하여 개발의 연속성, 크로스 플랫폼단점 : 성능이 느리다. (저사양 기기에서 호환안됨, 최저 OS 버전 필요) 아이오닉 소개 아니오닉-> 웹 사이트와 웹 애플리케이션 개발에 사용했던 html, css, javaScript 등을 그대로 사용할 수 있게 해주는 도구와 유틸리티의 모음-> AngularJS를 사용하여 웹 애플리케이션을 지원-> 사용자 인터페이스와 UX를 지원-> CLI 환경에서..
ionic 파일구조 설명
아이오닉 파일구조 아이오닉을 설치하고 프로젝트를 만들면 코드로바 설정에 관련된 파일과아이오닉 프레임워크에서 생성되는 파일들이 존재한다. 파일 구조.bowerrc.gitignorebower.jsonconfig.xmlgulpfile.jshooksionic.projectpackage.jsonpluginsscsswww 이중 config.xml, hooks, platforms, plugins, www는 코르도바 설정에 관련된 파일과 디렉토리나머지는 아이오닉에 의해 만들어진 것 config.xml는 코르도바가 플랫폼 파일들을 생성할 때 사용제작자 정보, 프로그램 정보, 플러그인 정보들이 포함됨 www는 웹뷰 안에서 실행될 웹 애플리케이션 정보가 포함 됨
아이오닉 실행방법
아이오닉 실행방법 아이오닉에서 개발된 앱을 실행하는 방법은 총 3가지가 존재한다. 1. 브라우저에서 보여주기2. 에뮬레이터 미리보기3. 장치에서 미리보기 1. 브라우저 미리보기 (ionic serve)-> 기본 주소는 http://localhost:8100-> 기본 포트는 8100 2. 에뮬레이터 미리보기 (ionic emulate {ios|android})-> 맥은 xcode, 안드로이드는 안드로이드 스튜디오 설치 필요->맥에서 ios를 에뮬레이팅 할때는 ios-sim도 설치해야한다. (npm install -g ios-sim)-> 실시간 새로고침 및 로그 뷰 가능ionic emulate ios -l -cionic emulate android -l -c 3. 장치에서 미리보기 (ionic run)-> ..
ionic2 현재 플랫폼 확인 방법
// platform 확인을 위한 모듈 추가 import { Platform } from 'ionic-angular'; // app.component.ts 파일에서 플랫폼 확인 12345678910111213141516171819202122@Component({ templateUrl: 'app.html' }) export class MyApp { rootPage = HomePage; constructor(platform: Platform) { platform.ready().then(() => { if (this.platform.is('android')) { console.log("running on Android device!"); } if (this.platform.is('ios')) { console..
뒤로가기 버튼 차단
앱의 비밀번호 입력 페이지등을 만들다 보면 뒤로가기 버튼을 막아야 하는 경우가 있다. 이 경우 platform에서 제공하는 뒤로가기 버튼 Action을 재정의하여 차단한다. 123456789101112131415161718192021222324252627282930313233343536373839404142434445 // Property used to store the callback of the event handler to unsubscribe to it when leaving this page public unregisterBackButtonAction: any; constructor(...) { ... } ionViewDidEnter() { this.initializeBackButtonCusto..
백그라운드 상태에서 활성화 되었을때 동작 수행
앱을 사용하다가 다른 앱을 사용하다가 다시 사용하려고 할때 이벤트를 잡으려고 할경우엔 app.component.ts 파일에 12345678910constructor( private platform: Platform ) {platform.ready().then(() => { this.platform.pause.subscribe(() => { console.log('[INFO] App paused'); }); this.platform.resume.subscribe(() => { console.log('[INFO] App resumed'); });});Colored by Color Scriptercs resume.subscribe를 구현하여 그안에 다시 활성화 되었을때 실행할 코드를 기입한다
UI 요소 동적으로 disabled 처리
ts 파일에 기준이 되는 변수 선언 isenabled:boolean=false; ts 파일에서 상황에 따라 변수 값을 변경 changeAble() { if(input !== '') { //enable the button isenabled=true; } else { //disable the button isenabled=false; } } Html표시 ts에 변수의 값이 변경됨에 따라 view에서 button의 활성화 여부가 결정된다.