Fall in IT.

ionic 프레임워크 소개 본문

프레임워크/Ionic Framework

ionic 프레임워크 소개

D.Y 2016. 9. 1. 01:29

안녕하세요.

오늘은 Ionic Framework에 대해서 소개하도록 하겠습니다.

(다음글에서는 간단하게 Ionic Framework를 사용하여 Hybrid App을 개발해보도록 하겠습니다.)


하이브리드 앱이란?

  • 하이브리드 어플리케이션(이하 하이브리드 앱)은 HTML5, CSS, JavaScript와 같은 웹 기술로 웹 어플리케이션을 만들고, 이를 네이티브 컨테이너로 감싼 네이티브 어플리케이션을 말합니다.
    (Corodva/PhoneGap처럼 네이티브와 연결해주는 도구를 이용하면 카메라, 가속도계, 위치정보, 연락처 같은 네이티브 기능에 접근할 수 있습니다.)


네이티브앱을 만들지 않고, 하이브리드앱을 만드는 이유는?

  • 개발비용과 개발시간을 줄여줍니다.
  • 네이티브 언어보다 학습 곡선이 낮습니다.(하이브리드 앱의 가장 큰 장점은 어떤 웹 개발자든 역량과 상관 없이 간단한 학습을 통해 앱 개발자가 될 수 있습니다.)
  • 대부분의 경우 하이브리드 앱은 크로스 플랫폼을 지원합니다.
  • 개발비용과 개발시간을 줄여줍니다.
  • 네이티브 언어보다 학습 곡선이 낮습니다.(하이브리드 앱의 가장 큰 장점은 어떤 웹 개발자든 역량과 상관 없이 간단한 학습을 통해 앱 개발자가 될 수 있습니다.)


Ionic Framework란?

    • 하이브리드 어플리케이션을 쉽게 만들기위한 프레임워크 입니다.
    • 하이브리드 앱을 개발하기에 최적화된 환경을 제공하고, ionic은 HTML5 API를 사용할 수 있는 컴포넌트들과 크로스 플랫폼 빌드가 가능한 Cordova 기반으로 구성된 하이브리드 앱 개발 프레임워크 입니다.

    Ionic Framework의 특징

    • Cordova(PhoneGap과 동일) 환경을 제공합니다. (대부분의 명령어가 cordova와 동일)
    • Cordova 플러그인을 사용할 수 있습니다.
    • AngularJS를 기반으로 만들어졌으며, SPA를 MVC나 MVVM 패턴으로 개발을 할 수 있습니다.
    • 네이티브에 가까운 UI 컴포넌트들을 제공합니다.
    • HTML으로 UI를 만들고 JavaScript의 데이타 업데이트를 빠르게 적용할 수 있습니다.
    • 크로스 플랫폼 빌드가 가능합니다. (ios, android 이외에도 다양한 플랫폼을 지원합니다.)
    • 활발한 개발자 포럼을 지원합니다.



    Ionic Framework와 AngularJS

    Ionic Framework는 AngularJS를 근간에 두고 만들어졌다. Ionic에서는 다양한 UI 컴포넌트를 제공하고 있고,  자신의 UI 컴포넌트들의 태그를 직접 만들어서 사용 할 수 있습니다. 이 것은 AngularJS의 directives를 이용하여 만들어졌습니다.


    예를 들어 각 View가 전환되고 전환되는 View에 엑션과 NavigationBar를 구현하는 코드를 만들때,  이런 네비게이션이 가능한 뷰를 <ion-nav-view> 로 정의를 하였고, 네비게이션이 일어난 뷰는 <ion-nav-bar>라를 네비게이션 바와 함께 사용하여 간단하게 구현할 수 있습니다. 

    <body>
    <ion-nav-bar></ion-nav-bar>
    <ion-nav-view></ion-nav-vew>
</body> 

    <ion-nav-view>와 <ion-nav-bar>를 사용하면 자동으로 새로운 View를 요청하면 다음 네비게이션이 가능한 View가 열리고 상단에 뒤로가기 버튼과 새로운 타이틀을 가지는 View가 열리게 됩니다. 뒤로가기 버튼이 있는 네비게이션 바를 직접 구현하지 않고, Ionic에서 제공하는 <ion-nav-view>와 <ion-nav-bar>를 사용하여 간단하게 개발 할 수 있습니다.



    Ionic Framework와 SPA(Single Page Application)

    Ionic의 AngularJS 기반의 이런 Routing은 완벽한 SPA 구현을 할 수 있게 도와줍니다.
    즉, AngularJS를 사용하여 만들어진 HTML 페이지를 간단하게 routing 할 수 있습니다. 아래는 Ionic의 slidemenu sample project의 Routing을 정의한 부분입니다.

    .config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

    .state('app', {
      url: "/app",
      abstract: true,
      templateUrl: "templates/menu.html",
      controller: 'AppCtrl'
    })

    .state('app.browse', {
      url: "/browse",
      views: {
        'menuContent' :{
          templateUrl: "templates/browse.html"
        }
      }
    })
    .state('app.playlists', {
      url: "/playlists",
      views: {
        'menuContent' :{
          templateUrl: "templates/playlists.html",
          controller: 'PlaylistsCtrl'
        }
      }
    })

    .state('app.single', {
      url: "/playlists/:playlistId",
      views: {
        'menuContent' :{
          templateUrl: "templates/playlist.html",
          controller: 'PlaylistCtrl'
        }
      }
    });
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/playlists');



    Ionic Framework와 Cordova

    Ionic 은 Cordova를 사용해서 여러가지 모바일 앱에 실행할 수 있는 빌드 시스템을 갖추고 있습니다. Ionic의 초기 버전에는 Cordova 명령어를 사용하여 프로젝트를 빌드하고 디바이스에 실행하였는데, Ionic은 ionic command를 자체적으로 만들었습니다. (Ionic의 command는 Cordova의 command를 매핑하여 만든 것이라고 봐도 무방할 것 같습니다.)
    Ionic은 Cordova를 기반으로 하기 때문에 cordova command를 사용한 경험이 있으면 대부분 같은 명령어로 사용할 수 있습니다.
    예를 들어 프로젝트에    ios 플랫폼을 추가한다고 가정하면 Ionic command는 다음과 같다.

    ionic platform add ios

    이 command는 Cordova의 command로 ios 플랫폼을 추가하는 것과 동일합니다.

    cordova platform add ios

    Ionic로 프로젝트를 개발할 때 HTML, JavaScript, CSS 파일이 수정될 때마다 디바이스에 빌드해서 디버깅을 한다면 빌드시간이 길어서 코드를 업데이트하는데 굉장히 많은 시간이 소요될 것입니다. Ionic은 네이티브 자원을 사용하지 않는 코드는 디바이스에 빌드하지 않고 로컬 컴퓨터에서 Safari나 Chrome 브라우저를 이용해서 개발합니다. 이 때 Ionic 프로젝트를 디버깅할 수 있게 앱을 실행시켜주는 서버를 구동해서 개발한다. Cordova에서는 cordova serve라는 명령어를 사용하여 프로젝트를 실행시키는데 이 때 웹 자원 소스가 업데이트 되면 이 명령어를 재시작해줘야한다. 하지만 phonegap serve와 ionic serve command를 이용하면 웹 자원이 수정될 때 수정된 파일을 반영해서 서버 재시작 없이 자동으로 업데이트 되기 때문에 이 명령어를 다시 실행시키지 않아도 됩니다. Ionic을 이용하여 개발을 진행하면 웹 자원의 디버깅을 가장 많이하는데, Safari나 Chrome의 Developer Tool로 디버깅을 하면 됩니다.

    Ionic은 Cordova 기반의 장점을 사용할 수 있습니다. Cordova의 장점 중에 하나는 Plugin 입니다. 하이브리드 앱을 개발하기 위해서는 단순하게 HTML, JavaScript, CSS 만으로는 디바이스를 제어할 수 없는데 Cordova는 네이티브 브릿지와 같은 Cordova Plugins를 제공하고 이 것을 이용하여 웹과 네이티브간의 통신을 가능하게 합니다.

    네이티브앱의 퍼포먼스를 완벽하게 따라가진 못하지만, 개발하고자 하는 앱의 목적에 따라 충분히 효율적이고 경제적인 어플리케이션을 개발할 수 있도록 도와주는 프레임워크 입니다. 혼자서 ios, android 앱을 동시에 개발할때의 시간과 ionic 프레임워크를 사용하여 개발했을때는 개발속도는 굉장한 차이가 날 것으로 예상됩니다. 또한, 네이티브의 경우 앱의 크기가 확장될수록 유지보수 부담이 더욱더 증가되게 되는데 ionic 프레임워크를 사용하여 개발한다면 한번의 개발로 동시에 두가지 앱을 빌드하고 업데이트 할 수 있기 때문에 굉장한 시간적, 비용적 이점이 생기게 됩니다.



    모두 즐거운 코딩하세요~



    참고


    저작자표시 비영리

    '프레임워크 > Ionic Framework' 카테고리의 다른 글

    Ionic3 Background Mode plugin 이슈 해결  (0) 2017.12.25
    ionic 3 build --prod error Can't resolve './app.module.ngfactory' 해결법  (0) 2017.12.02
    Ionic 3에서 Moment.js 사용방법  (0) 2017.11.27
    ionic ios에서 숫자에 underline 제거 방법  (0) 2017.11.06
    ionic build error code 69 해결방법  (0) 2016.09.20
    공유하기 링크
    '프레임워크/Ionic Framework' Related Articles more
    Comments