onepage 앱을 만들면서 ionic2 프로그래밍을 위한 기초적인 지식을 알아 봅니다.

1. Typescript+Angular2.0 따라
하기
(필요한 만큼만)
kalen.lee@takit.biz
0505-170-3636
www.takit.biz

2. Why Ionic2?
• 장점
• 코딩 생산성(OOP)
• 단순히 library가 아니다.
• 깔끔한 빌드 시스템
참조 http://www.discoversdk.com/blog/ionic-2-vs-reactnative-vs-nativescript
단점
• 고성능이 필요한 H/W dependent한
앱에서 performance 문제가 발생할
수 있다
• 고유한 UI 구현이 어려울수 있다.
=> 일반적인 기능의 성능은 문제가 없
다.
=> native가 정답이다.
=> 대부분의 앱은 빠른 개발속도와
앱이 사용자에게 제공하는 고유 기능이 더욱 중요하다.
향후 하이브리드 앱개발의 대세가 될것이다.

3. Her story
• 대기업 연구소(1년8개월)
->CDMA프로토콜개발
• 미국내 한국계 스타트업(통신장비업체,3년
)
-> C++기반 리눅스 프로그래밍, MFC프로그
래밍
• 대기업연구소(10년)
-> linux기반 오픈소스 프레임워크, android
플랫폼
• IT서비스 스타트업(1년)
->web app개발(javascript)
• ionic2 최적의 조건 ㅜㅜ
• OOP에 익숙함
• 영어에 익숙함
• 스마트폰 플랫폼에 익
숙함
• javascript 기본적인 지
식

4. Typescript
• A typed superset of JavaScript that compiles to plain JavaScript.
• pure object oriented with classes, interfaces and statically typed
like C# or Java.
• The popular JavaScript framework Angular 2.0 is written in
TypeScript.
• Prerequisites
• OOP concepts and basic JavaScript
https://www.tutorialspoint.com/typescript/

5. 변수 선언
var arr:number[];
var arr=[];
var arr_name:number[][];
var mytuple = [10,"Hello"];

6. Class 선언

7. One Page App
• ionic start onePage --v2
• cd onePage
• ionic g page login
• app.component.ts수정
• login 페이지로 시작하도록 코드 변경

8. 시작 코드
typescript의 import구문
전체 앱에서 사용할 html구조
app.html의 rootPage를 정의함
angular문법
html 내의 속성을 []으로 정의하고
typescript내 변수값을 가져옴

9. 페이지 추가
• 추가된 페이지는 반
드시 declarations와
entryComponents에
선언해주세요.

10. html구성하기
login.html을 수정하셔서
사용자 로그인 정보(이름,
비밀번호)를 입력받아 주
세요.
Hint>
https://ionicframework.com/docs/v2/co
mponents/#inputs
https://ionicframework.com/docs/v2/co
mponents/#buttons

11. ts작성하기
1.username, password선언
hint> 멤버 변수를 public으로 선언해주세요.
2.입력과 연결
hint> 아래 angular2 문법(two-way data binding)을 사
용해주세요.
3. button을 클릭하였을때
console.log로 출력해주세요.
=> hint>멤버함수,
https://ionicframework.com/docs/v2/api/components/bu
tton/Button/ 참조

12. 정답 예제
• username, password초기화를 수행하지 않으면 undefined가 출력됩
니다.
• username, password에 placeholder를 설정해주세요.

13. html element 생성하기
• 입력된 사용자 정보를 보여주세요.
• angular directive : *ngIf 조건문을 만족할때 element생성
https://angular.io/docs/ts/latest/guide/structural-directives.html
• 변수 값을 직접 html content로 출력시 {{ 변수명}} 사용
https://angular.io/docs/ts/latest/guide/template-
syntax.html#!#interpolation
angular 참조 https://angular.io/docs/ts/latest/guide/template-syntax.html