이온 4+ 소개

Ionic은 모든 최신 모바일 및 데스크톱 브라우저에서 사용할 수 있는 사용자 정의 요소와 섀도우 DOM API를 사용하는 분산된 웹 구성 요소 세트입니다. Ionic 프레임워크에는 프레임워크로 쉽게 가져올 수 있는 자체 사용자 정의 HTML 태그 세트가 포함되어 있습니다.

Ionic에는 번들 크기와 로드 성능 면에서 선두를 달리는 스텐실 구성 요소가 포함되어 있습니다. 이 웹 프레임워크는 React 및 Angular와 함께 사용하여 더 높은 성능 수준에 도달할 수 있습니다.

Ionic에는 플랫폼 전체에서 사용할 수 있는 다양한 맞춤형 테마 디자인이 있습니다. 다음은 일부 기능의 작은 샘플입니다.

Ionic의 또 다른 흥미로운 측면은 사용하는 다른 웹 프레임워크에 특정한 번들링 및 도구를 사용할 수 있다는 것입니다. 즉, Ionic을 Angular와 함께, React CLI를 React와 함께 사용할 때 Angular CLI를 사용할 것입니다.

Ionic을 시작하려면 매우 간단합니다.

npm install -g ionic # Update the Ionic CLI
ionic start awesome-app

이것은 모든 관련 요구 사항을 충족하는 ionic 앱을 만듭니다. 그런 다음 원하는 작업에 따라 다른 프레임워크를 잡고 꿈의 프로젝트를 구축하세요.

마지막으로, 첫 번째 Ionic 홈페이지를 만들려면 Ionic CLI를 활용하기만 하면 됩니다.

운영:

ionic generate page HomePage

그리고 보일러 코드가 0인 Ionic 홈페이지를 만들었습니다.

다음 단계는 src/app/app.module.ts에서 페이지를 가져오는 것입니다. 코드는 다음과 같습니다.

import { HomePage } from '../pages/home/home';

@NgModule({
declarations: [
    MyApp,
    HomePage
    ],
imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
    MyApp,
    HomePage  
    ],
providers: [
    /* .... */
]
})
export class AppModule {}

이제 작동하는 홈페이지가 생겼습니다. 축하합니다!

그렇다면 Ionic을 사용하는 이유는 무엇입니까? 확실히 주된 이유는 단순성입니다. Ionic을 사용하면 크로스 플랫폼 앱을 쉽게 구축할 수 있습니다. 앱의 전반적인 성능을 향상시키는 다양한 플러그인이 있으며 여기에는 개발에 몇 가지 간단한 코드만 추가하면 됩니다. 이러한 모든 측면에서 사용자 인터페이스는 매우 잘 수행됩니다. Ionic은 또한 멋진 UI를 금지하기 위해 머티리얼 디자인의 모션, 깊이 및 아름다운 색상을 지원합니다. 유용성을 키우는 Ionic의 마지막 측면은 테스트의 용이성입니다. 플랫폼 간 테스트가 그 어느 때보다 쉬워졌습니다. 실제 플랫폼에서 앱 네이티브 또는 하이브리드를 테스트하여 앱이 어떻게 작동하는지 알 수 있습니다.

전반적으로 Ionic은 모든 하이브리드 앱을 구축할 수 있는 우수한 옵션 중 하나입니다. 선택한 프레임워크의 고유한 페어링을 활용합니다.