JavaScript 활용팁
2018.05.03 / 01:05

Ionic2 초간단 파헤치기

인사이드자바
추천 수 81

꽤 오랫동안 글을 쓰지 않아 시작을 어떻게 해야할 지 막막하지만 일단 써보는 Ionic 2 간단 개념 리뷰!

간단하게 쓰기 위해 목록 형식으로 작성하며, 추가적인 설명은 차차 달도록 하겠습니다.


  • Ionic 간단 설명

  1. Ionic은 하이브리드 앱 개발을 위한 프레임워크
  2. Angular + Cordova + Ionic 의 결합
  3. Ionic1은 앵귤러1(= AngularJS)로, Ionic2는 앵귤러2(= Angular)
  4. 작성일(2017-06-07) 기준 Ionic2는 그냥 Ionic으로 불리며 CLI는 3버전까지 나옴
  5. Angular1은 AngularJS로 Angular2이상은 Angular로 불림. Angular는 현재 4버전까지 릴리즈 됨

  • Ionic 빠르게 실행하기

  1. npm install -g cordova ionic
    * 위의 명령어를 따라하면 설치가 됨 (Node.js 사전 설치 필수)
    * 에뮬레이터를 이용하려면 따로 추가적인 설치가 필요, 추가 설치는 아래 링크 참고
    2016/07/23 - [Programing/Ionic_1] - 윈도우 환경에서 아이오닉 프레임워크 세팅하기#1
  2. ionic start myApp tabs
    * 위의 명령어 사용시 기본적인 프로젝트가 설치가 되는데. tabs 말고 blank, sidemenu가 추가로 존재함아래링크 참고 
    http://ionicframework.com/getting-started/
  3. Ionic의 기본 템플릿은 3개가 있음. 하지만 2개가 더 존재함.
    * 2번의 링크에는 blank, tabs, sidemenu가 기본으로 나와있지만 docs에 들어가 보면 tutorial과 super 도 존재함. 
    * ionic 앱을 전체적으로 훑어보고 싶다면 초심자는 tutorial 을, 프로그래밍 경험이 어느정도 있다면 super를 확인하는게 빠르게 도움이 될 것.
    http://ionicframework.com/docs/intro/tutorial/
  4. ionic serve -lab (또는 ionic serve -l)
    * 위 명령어를 이용하면 웹에서 iOS, Android, Window 모드로 모두 확인이 가능함
    * PC웹에서 확인하는 것이기 때문에 cordova 플러그인은 확인 불가
    * cordova 플러그인 테스트는 에뮬레이터, 실제 디바이스에서 가능
    * 에뮬은 굉장히 느림 (에뮬+웹뷰), 디바이스로 확인하는게 정신건강에 좋음

  • Ionic 장점

  1. Angular만 할 줄 알면 공짜로 하나 얻는 기분.

  2. Angular를 몰라도 구현 가능(본인이 그랬음)

  3. 웬만한 UI 컴포넌트가 잘 구현이 되있기 때문에 빠르게 구현 가능.

  4. 테스트 또한 굉장히 빠름

  5. AgularJS(Ionic 1) 와 Angular (Ionic 2 이상) 중 원하는 버전으로 개발 가능

  6. 업데이트가 활발함(장점이자 단점. 점점 나아지고 체계화 되는 것이 하루하루 눈에 보임)

 

 

  • Ionic 단점

  1. React Native나 다른 네이티브앱에 비하면 속도가 느림. (하지만 텍스트 위주의 앱, 정보제공 목적이라면 충분히 빠름. 느리다고 못 느낄 정도)

  2. Angular 러닝커브가 꽤 있음.

  3. 레퍼런스 앱이 부족. React Native의 경우, Airbnb, Facebook 등 거대 레퍼런스가 있지만 Ionic은 상대적으로 레퍼런스가 부족함. (국내 앱 중에서는 해먹남녀(iOS / ionic 1 추정)가 유명한 레퍼런스에 속함. https://www.slideshare.net/deview/124-67552757)

  4. 국내(한국어) 자료를 얻기가 쉽지않음. 기본적인 설치 및 튜토리얼 정도가 전부. (Angular와 Cordova 위주로 검색을 하면 꽤 정보를 얻을 수 있음, 하지만 공식 docs와 forum이 꽤 잘 되어있음.)

 

 

현재 간단하게 적어 놓았지만 추가적으로 생각나거나 쓸 내용이 있으면 날짜와 함께 계속 작성해 나갈 것!

 



출처: http://steambread.tistory.com/18 [너찐빵 Blog]