2024-04-07
작성
이번에 앵귤러 모바일 프로젝트에 투입되었다. 애플리케이션 서버를 실행할 때 ng serve가 아닌 ionic serve로 서버를 실행하더라...? 생전 처음 들어본 inoic이 무엇인지 알아봤다.
사전지식
- 반응형 웹 (웹) : html, css, js로 이루어진 웹을 모바일 상의 화면으로 보는 것
- 네이티브 앱 (앱) : android(코틀린) 혹은 ios(스위프트) 환경의 코드로 제작된 모바일용 애플리케이션
- 하이브리드 앱 (앱) : 웹 코드로 이용해 각 플랫폼(android, ios)으로 패키징 한 애플리케이션 (웹+앱)
- 프로그레시브 웹앱 (웹) : 하이브리드 앱처럼 보이지만 설치가 필요하지 않고, 네이티브앱 기능을 사용할 수 있는 애플리케이션
ionic Framework (아이오닉)
2013년에 등장한 아이오닉은 하이브리드 모바일 앱
개발을 위한 프레임워크이다. 네이티브 앱에 비해서 다양한 플랫폼을 지원하고, 서드파티(third-party) 코드를 이용할 수 있다. ionic 공식 홈페이지에서는 React, Vue, Angular 같은 서드파티 코드 기반으로 모바일 앱을 구축할 수 있는 모바일 UI 툴킷이라고 소개하고 있다.
아이오닉 최초 버전은 AngularJS와 아파치 코도바(Cordova)로 제작되었지만, 최신 버전은 React, Vue, Angular 그 어떤 UI 프레임워크라도 선택할 수 있다. 특히 모바일 앱은 이러한 웹 기술로 제작한 다음, 코도바나 캐파시터를 이용해 네이티브 앱 스토어를 통해 배포하여 기기에 설치할 수 있다.
스마트폰에 최적화된 UI를 디자인할 수 있고 무엇보다 크로스 플랫폼 개발이 가능하며, HTML5의 부족한 API는 네이티브 API로 보완할 수 있다. 아이오닉은 주로 typeScript를 사용하고 Angular를 통해 하나의 코드로 android/ios/web을 동시에 시작할 수 있다.
ionic 장점
- 웹 표준을 사용하여 제작한다.
- 신속한 수정, 업데이트 및 배포가 가능하다.
- 각 플랫폼에서 네이티브 앱으로 실행된다.
ionic 단점
- 인터페이스가 표준 네이티브 앱과 다를 수 있다.
- 그래픽, 멀티미디어 성능이 네이티브 앱에 비해 떨어질 수 있다.
- 일반적으로 장치의 모든 센서 및 하드웨어에 접근할 수 있지만 새 기능을 지원할 때까지 다소 시간 지연이 발생할 수 있다.
- 개발자는 웹 앱을 네이티브 앱으로 변환시키기 위한 부가적인 소프트웨어를 사용해야 한다.
ionic Framework 특징
- Cordova 환경을 제공하며, Cordova 플러그인을 사용할 수 있다.
- AngularJs를 기반으로 만들어졌으며, SPA를 MVC, MVVM으로 개발할 수 있다.
- 네이티브에 가까운 UI 컴포넌트들을 제공한다.
- 위에 장점에 있듯이 크로스 플랫폼 빌드가 가능하다.(android, ios, 이외에도 다양한 플랫폼 지원)
ionic 사용 전 알아야 하는 기술
- AngularJs : spa를 개발할 때 사용하는 프레임워크로 양방향 바인딩을 지원하며 Dom 조작에 있어 쉽고 간편하다
- TypeScript : AngularJs2가 기본적으로 TypeScript를 내세우며 필요하게 된 기술
- Cordova : 하이브리드 웹 애플리케이션 개발을 위한 프레임워크이다.
- Node.js : 자바스크립트를 활용하는 소프트웨어 플랫폼으로 확장성 있는 네트워크 애플리케이션 개발에 사용된다.
참고
'Frontend > Angular' 카테고리의 다른 글
Ionic Life cycle (아이오닉 앵귤러 생명주기) 정리 (0) | 2024.05.18 |
---|---|
앵귤러 문서 까기 @NgModule (0) | 2024.04.14 |
앵귤러 NullInjectorError: No provider for _HttpClient! 오류 해결 (1) | 2024.03.29 |
앵귤러 Could not fine the '@angular-devkit/build-angular:dev-server' builder's node package. 오류 해결 (0) | 2024.03.25 |
앵귤러 컴포넌트 데이터 전달 방법 및 Todo 리스트 예제 응용하기 (1) | 2024.03.23 |