Ionic이 무엇인가
여기를 클릭하여 Ionic Vue 공식 문서를 참고하세요
Ionic Vue Overview | Ionic Documentation
Ionic Vue Overview | Vue.js Framework Documentation
ionicframework.com
공식문서를 둘러보자
Ionic이란?
Ionic은 모바일 및 웹 애플리케이션을 개발하기 위한 오픈 소스 프레임워크입니다. HTML, CSS, JavaScript를 사용하여 멋진 사용자 인터페이스와 기능을 갖춘 모바일 앱과 웹 앱을 빠르게 개발할 수 있도록 도와줍니다. Ionic은 웹 기술을 활용하여 다양한 플랫폼에서 일관된 경험을 제공하는 데 중점을 둔 프레임워크입니다.
Ionic의 특징은 다음과 같습니다:
- UI 컴포넌트: Ionic은 다양한 사전 디자인된 UI 컴포넌트를 제공하여 앱의 빠른 개발과 디자인을 간소화합니다. 버튼, 입력란, 리스트, 탭, 모달, 알림 등 다양한 컴포넌트가 포함되어 있습니다
- 크로스 플랫폼 개발: Ionic은 한 번의 개발로 iOS, 안드로이드 및 웹 앱을 동시에 개발할 수 있도록 지원합니다.개발한 코드를 다양한 플랫폼에 배포할 수 있어 개발 생산성을 높여줍니다.
- 웹 표준 사용: HTML, CSS, JavaScript를 사용하여 개발하므로 웹 개발자들에게 익숙한 기술을 활용할 수 있습니다.
- Cordova와의 통합: Cordova 플러그인을 사용하여 모바일 앱에서 네이티브 기능에 접근할 수 있습니다.카메라, 지도, 알림 등 다양한 기능을 활용할 수 있습니다.
- Vue.js, Angular, React와의 통합: Vue.js, Angular, React와 함께 사용할 수 있어 개발자가 선호하는 프레임워크를 선택하여 개발할 수 있습니다.
- 개발 및 테스트 용이성: 개발용 서버를 제공하여 변경 사항을 실시간으로 확인하고, 브라우저에서 앱을 테스트할 수 있습니다.
Ionic은 모바일 앱 개발에 초점을 맞추었지만, 웹 앱 또한 개발할 수 있습니다. 이러한 특징으로 인해 Ionic은 모바일 및 웹 개발자들 사이에서 매우 인기 있는 프레임워크 중 하나입니다.
Ionic Vue 개요
Ionic Vue는 Vue.js와 Ionic 프레임워크를 결합한 도구로, 멋진 UI와 웹 개발 경험을 제공합니다. Vue.js의 간결하고 직관적인 문법과 Ionic의 다양한 UI 컴포넌트를 활용하여 웹 및 모바일 애플리케이션을 빠르게 개발할 수 있습니다.
기능 및 장점
- Vue.js와 결합: Vue.js의 강력한 기능과 컴포넌트 기반 아키텍처를 활용하여 앱을 구축할 수 있습니다.
- Ionic UI 컴포넌트: 미리 디자인된 다양한 UI 컴포넌트를 사용하여 효율적이고 아름다운 앱을 개발할 수 있습니다.
- Vue CLI 통합: Vue CLI를 사용하여 프로젝트를 설정하고 빌드할 수 있습니다.
- 애니메이션 및 전환: Vue의 트랜지션과 애니메이션 기능을 사용하여 사용자 경험을 향상시킬 수 있습니다.
시작하기
- Node.js 및 Ionic CLI 설치: 먼저 Node.js를 설치한 다음, 아래 명령으로 Ionic CLI를 전역으로 설치합니다
npm install -g @ionic/cli - Ionic start my-ionic-vue-app blank --type vue: 먼저 Node.js를 설치한 다음, 아래 명령으로 Ionic CLI를 전역으로 설치합니다
ionic start my-ionic-vue-app blank --type vue - 개발 서버 실행: 생성한 프로젝트 디렉토리로 이동한 후, 아래 명령으로 개발 서버를 실행합니다.
cd my-ionic-vue-app ionic serve - 앱 개발 및 빌드:
src디렉토리 내에서 Vue 컴포넌트를 작성하고 개발합니다. 빌드는 아래 명령으로 수행할 수있습니다.ionic build
살펴보기
프로젝트 생성 시 트리 구조다.
Vue 프로젝트와 똑같은 구조다.
Android 와 ios 는 따로 Build 해서 살펴보니 사용하는 구조인 것 같다.
나는 Xcode를 사용할 수 없는 사람이기 때문에 ios 는 아직 디버깅 할 수 없다.
얼른 mac을 구해야 할 것같다.
다음 시간엔 Android studio만 사용해서 간단한 Application 을 만들어 보겠다.
