반응형

핵심 어플리케이션 빌딩 블럭

UI Components: <icon-card>, <ion-image> ... 

Temes & Styles: CSS & CSS Cariables

Navigation: Custom or Built-in Router

State Management: Passing Data Around

Native Device Features: Camera & More

Ionic CLI & Publishing: From Develmopment to Deplyment

아이오닉 컴포넌트 구조

<ion-button fill="outline" color="primary">

<ion-button>: HTML Element와 동일하게 사용가능합니다.

fill="outlet": Attribute와 Properties도 동일합니다.

event Emit도 가능합니다.

HTML: 코드를 계속 들어가다보면 평범한 HTML를 wrap한것을 알 수 있습니다.

CSS의 var을 통해서 테마를 쉽게 적용할 수 있도록 합니다.

JavaScript: 작동 코드가 있습니다.

 

Stencil을 알고 있다면 유리한 부분이 많습니다.

https://github.com/ionic-team/ionic/blob/master/core/src/components/button/button.tsx

button Component가 어떻게 작동 하는지 알 수 있습니다.

앵귤러 없는 Ionic 프로젝트 세팅

index.html 만 만들고,

html:5로 스켈레톤(더미)를 만듭니다.

<html>
...
  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@4.7.4/dist/ionic/ionic.esm.js"></script>
  <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@4.7.4/dist/ionic/ionic.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@4.7.4/css/ionic.bundle.css"/>
</head>
<body>
</body>
</html>

https://ionicframework.com/docs/installation/cdn

아이오닉프레임.com -> Guide -> Packages & CDN의 HTML을 복붙합니다.

 

이제 아이오닉 컴포넌츠를 사용할 수 있습니다.

아이오닉 컴포넌트 학습하는 곳

https://ionicframework.com/docs/components

위 사이트에서 마음에 드는 컴포넌트를 사용할 수 있습니다.

<ion-button>를 예를 들면,

어떻게 쓰는지 configure나와있고, 

HTML에서 사용할 수 있는 값들: Fill, Size와 같은 의 값에 대한 정보를 얻을 수 있습니다.

Usage를 보면, 어떻게 코드를 입력해야 되는지 나옵니다.

또한 Prorperties에서 여러 속성을 사용할 수 있도록 돕습니다.

Events 및 CSS를 오버라이드 할 수 있는지에 대한 정보까지 얻을 수 있습니다.

아이오닉 기본 Component 사용하기

- 도큐먼트사용하는 방법 입니다.

예산 플래너를 만들어 보겠습니다.

모바일 처럼 보이는 것을 만들어 보겠습니다.

 

body에 <ion-app>을 찾아 입력합니다. 루트 컴포넌트 입니다.

<ion-content>를 이용하여 main 어플리케이션 콤턴트를 레핑합니다.

스크롤링을 컴트롤하고, 디스플레이를 도와줍니다.

toolbar를 추가해보겠습니다.

<ion-header>가 있을 경우, 콘텐트의 top에 고정되어 나타나게 되는등 의 설명까지 나와있습니다.

사용하기 위해선 ion-title을 사용해야하는군요?

<ion-title>에 가서 usage를 보도록 하겠습니다.

아래의 코드처럼 되겠죠?

...
<body>
  <ion-app>
    <ion-header>
      <ion-toolbar> //Usage를 복붙합니다.
        <ion-title>Budget Planner</ion-title>
      </ion-toolbar>
    </ion-header>
  </ion-app>
</body>
</html>

크롬으로 dev툴을 열어 mobile 미리 보기로 시뮬레이션 할 수 있습니다.

또한 Elements를 보면, DOM으로 만들어 진 것을 볼 수 있습니다.

 

<ion-toolbar color="primary">로 색상을 추가할 경우,

<ion-title>의 글자색이 흰색으로 자동변경 됩니다. 엄청 좋은 편리한 기능입니다.

...
<body>
  <ion-app>
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Budget Planner</ion-title>
      </ion-toolbar>
    </ion-header>
  </ion-app>
</body>
</html>

 

More Baisc Components

input를 사용해 보겠습니다.

다큐먼트를 보고 위에서 했던것처럼 진행합니다.

...
<body>
  <ion-app>
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Budget Planner</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-item>
        <ion-label position="floating">Expense Reason</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>
    </ion-content>
  </ion-app>
</body>
</html>

허전해 보입니다. 한개를 더 추가하고, 요즘 많이 사용하는 <ion-card>를 추가해보겠습니다.

...
<body>
  <ion-app>
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Budget Planner</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-card>
        <ion-card-header>
          <ion-card-title>new Expense</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <ion-item>
            <ion-label position="floating">Expense Reason</ion-label>
            <ion-input type="text"></ion-input>
          </ion-item>
          <ion-item>
            <ion-label position="floating">Expense Amount</ion-label>
            <ion-input type="number"></ion-input>
          </ion-item>
        </ion-card-content>
      </ion-card>
    </ion-content>
  </ion-app>
</body>
</html>

조금 보기 좋아졌죠?

Component Categories

공식적인 것은 아니지만, (강의에서)개인적으로 생각하는 분류입니다.

Output - 유저에게 보여주고 싶은 것들은 모아보았습니다.

Layout - 구조적인 면을 나타냅니다. 주로 구릅핑과 정렬시 사용됩니다.

Input - 유저의 입력 값을 받을 경우 사용하면 좋은것들 입니다.

Ionic Grid 예제

<ion-grid>
  <ion-row>
  	<ion-col size-md="6">
       ... <!-- <ion-card> -->
    </ion-col>
  </ion-row>
</ion-grid>

다큐먼트를 참고하여 size-xs,sm,md,lg의 각 크기에 따라 적용되는 것을 학습해야 올바른 사용이 가능합니다.

size는 1-12까지 가능합니다. 위처럼 size-md="6"로 할 경우, 작은 화면에서는 꽉 차고, 큰 화면에서 반만 차지하게 됩니다.

아이콘 추가 & Slots 사용

https://ionicons.com/

 

Ionicons: The premium icon pack for Ionic Framework

Ionicons is an open-sourced and MIT licensed icon pack.

ionicons.com

아이콘 사이트에서 원하는 아이콘을 찾아 추가하도록 하겠습니다.

<ion-button fill="outline" color="danger" id="btn-cancel">
  <ion-icon slot="start" name="close"></ion-icon
  >Clear</ion-button
>

slot의 경우, 값에 따라 아이콘의 위치가 바뀝니다. 위 코드의 경우, 버튼 내 글자와 아이콘 사이의 거리가 달라집니다.

보시는 바와 같이 왼쪽으로 버튼이 몰려있습니다. CSS를 이용하여 버튼의 위치를 변경해 보겠습니다.

CSS Utility 속성 사용하기

https://ionicframework.com/docs/layout/css-utilities

 

CSS Utilities - Ionic Documentation

Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards

ionicframework.com

Utility 다큐먼트에 있는 속성을 사용해보겠습니다.

<div margin-vertical text-right>
  <ion-button fill="outline" color="danger" id="btn-cancel">
  	<ion-icon slot="start" name="close"></ion-icon
	>Clear</ion-button
  >
  <ion-button id="btn-confirm">
    <ion-icon slot="start" name="add"></ion-icon>
    Add Expense
  </ion-button>
</div>

margin-vertical,과 text-right를 사용했습니다.

HTML에서 CSS처럼 익숙하게 작동합니다.

오른쪽으로 이동한 것을 알 수 있습니다.

Ionic Element를 "기존"HTML Element처럼 쓰기

버튼 클릭과 같은 로직을 추가해 보겠습니다. 

바닐라.js를 이용하여 작동하는 것이기 때문에, 다른 프레임웍(Angular, Vue, React)에 쉽게 붙일 수 있습니다.

 

</body> HTML 본문이 끝나기 바로 직전에 script 태그를 추가합니다.

<!-- index.html -->
...
<script src="app.js"></script>
</body>

그리고 HTML에 id를 넣어줍니다.

<!-- index.html -->
<ion-button id="btn-confirm">
  <ion-icon slot="start" name="add"></ion-icon>
  Add Expense
</ion-button>

해당 아이디를 선택하여 클릭 이벤트를 추가합니다.

//app.js
const confirmBtn = document.querySelector('#btn-confirm');

confirmBtn.addEventListener('click', () => {
  console.log('It's works');
})

아이오닉 Elements 코딩

기본으로 제공되는 DOM api와 아이오닉에서 제공하는 기능<ion-list>을 사용해보겠습니다.

ion-list는 아이오닉에서 제공하는 것으로, 동적으로 리스트를 디스플레이해줍니다.

<!-- index.html -->
<ion-row>
  <ion-col size-md="6" offset-md="3">
    <ion-list id="expenses-list"></ion-list>
  </ion-col>
</ion-row>
// app.js

const expensesList = document.querySelector('#expenses-list');

const newItem = document.createElement('ion-item');
newItem.textContent = enteredReason + ': $' + enteredAmount;

expensesList.appendChild(newItem);

ion-item을 을 생성 및 입력 값을 DOM에 추가하는 코드입니다.

컨트롤러 컨포넌트 사용하기!

https://ionicframework.com/docs/api/alert

 

ion-alert - Ionic Documentation

Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards

ionicframework.com

컴퍼넌트 다큐멘테이션을 이용하겠습니다.

<!-- index.html -->
...
<ion-alert-controller></ion-alert-controller>
</ion-app>
...

아이온에서 제공하는 ion-alert-controller 태그를 사용합니다.

// app.js

const alertCtrl = document.querySelector('ion-alert-controller');
alertCtrl
  .create({
    message: 'Please enter valid reason and amount!',
    header: 'Invalid inputs',
    buttons: ['Okay']
  })
  .then(alertElement => {
    alertElement.present();
});

 

create는 observable을 반환합니다.

.then을 이용하여 element의 present() 매쏘드로 디스플레이 할 수 있습니다.

반응형

'프로그래밍 > Ionic' 카테고리의 다른 글

State 관리  (0) 2019.10.12
Styling & Theming  (0) 2019.10.12
유용한 컴포넌트 소개  (0) 2019.10.12
캐패시터로 네이티브 앱 만들기  (0) 2019.09.25
아이오닉 튜토리얼  (0) 2018.06.03

+ Recent posts

티스토리툴바