Ionic 기초

# 개요

최근에 개인 프로젝트를 탐색하는 중에, 여러가지 프레임워크를 찾아야되는 경우가 생겼다. react-native 등 많은 프레임워크를 탐색해보았으나, 결국은 Ionic을 최종적으로 선택하게 되었다. 왜냐하면 HTML5 기반의 웹뷰 방식으로, 안드로이드, 아이폰 두마리의 토끼를 동시에 잡을 수 있기 때문이다. 성능은 어쩔 수 없지만... 내 한정된 시간으로는 이게 최선일 듯 싶다. 더불어, Cordova? 라는 모듈이 안드로이드와 아이폰의 Native 기능인 SQLite를 사용할 수 있게 해주기 때문에, Ionic을 최종적으로 선택하였다.

# Ionic 기초 정보

- Angular 프레임워크 기반으로, 프로젝트가 생성되고, Angular와 동일하게 TypeScript를 메인 언어로 사용한다.

- Ionic-cli를 설치하면, 별도로 angular-cli는 설치할 필요가 없다.(자동으로 설치됨)

- Ionic Native나 Cordova 같은  Native-API 제공

 Ionic Native는 Cordova 플러그인  TypeScript 개발도구로써 Ionic 모바일 어플리케이션에 필요한 기본 기능을 손쉽게 추가 할 수 있습니다.

 ex. import { Geolocation } from '@ionic-native/geolocation';

- Ionic은 Cordova + Angular + Cross platform UI components + Native plugins으로 이루어져 있다.

- bootstrap helps in developing a web first application. While, ionic is used to develop a mobile first application

- ionic applications look and feel more native, and give better performance than bootstrap

- The ion- prefixed directives, ion-list,ion-item, etc, are angular directives that let you have extended features (swipe to delete, reorder, etc). : 모바일스러운 기능을 기본으로 제공한다.

- pure html tag의 경우, css 스타일을 적용할 수 있다.

# Ionic tag vs pure html tag

- pure html와 ion- prefix directive의 차이점?

  << Pure Html >>

  <div class="list">

    <div class="item item-divider"> <!-- this creates the divider -->

    </div>

  <a class="item" href="#"></a>

<< Ionic Directive Html >>
<ion-list>
<ion-item class="item-toggle">
Enable Friends
    <label class="toggle">
      <input type="checkbox" ng-model="settings.enableFriends">
      <div class="track">
        <div class="handle"></div>
      </div>
    </label>
  </ion-item>
</ion-list>

- 주차이점은 ion tag가 기본기능을 더 제공한다는 점이고, 나머지는 다 동일하다고 생각하면된다.(lite-item의 경우 기본적으로, swipe 기능을 제공한다)

- you can think ionic tags like normal tag with class= "something", namely with css extras. Therefore, using pure tags or html tags does not differ at all in terms of performance

성능 상의 차이는 없다고 생각하면된다. ion-tag 또한 pure html과 css로 구성된다고 생각하면 된다.

- 단순히 custom js나 css를 작성할 필요가 없는 것이다.

#출처

- https://stackoverflow.com/questions/51784093/what-is-the-difference-between-ion-list-and-div-class-list-in-ionic-framew/51784271