아이오닉(Ionic) + 뷰(Vue)

원문 : https://blog.ionicframework.com/a-vue-from-ionic/

지난주, VueConf Toronto에서 아이오닉 프레임워크(Ionic Framework)용 뷰(Vue) 지원에 대해 첫 공식 시사회를 열었다. 아이오닉의 개발자 Josh Tomas (@jthoms1)는 @ionic/vue 첫 알파 릴리즈에 대한 통찰과 개발자들한테 뷰 + 아이오닉 프레임워크가 안성맞춤인 이유를 공유했다. 그러나 이러한 본론으로 들어가기에 전에 아이오닉 프페임워크와 뷰의 역사를 먼저 이해하는 것이 중요하다.

아이오닉 프레임워크가 무엇인가?

이미 뷰 사용자라면 아이오닉 프레임워크가 무엇이고 왜 신경 써야 하는지 궁금해할 것이다.

자, 한 걸음 물러나서 "안녕, 우린 아이오닉이다!"라고 말해보자. GE, Nationwide, 및 Untappd에서 아이오닉을 이용하고 있으며 이러한 회사들과 같이 약 500만 개에 달하는 강력한 앱이다.

아이오닉은 고품질의 크로스 플랫폼 앱을 제작하기 위해 UI 컴포넌트의 모음이 핵심인 오픈 소스 프레임워크로 매우 잘 알려져 있다. 이 컴포넌트는 모두 HTML, CSS와 자바스크립트로 작성돼 있으며, 네이티브 iOS, 안드로이드 디바이스에 앱으로, 일렉트론을 이용한 데스크탑 앱으로, 또는 PWA를 이용한 웹으로 쉽게 배포될 수 있다. 이 내용이 중요한 이유는 웹은 어마어마하기 때문이다! 아이오닉을 사용하면 개발자가 네이티브 개발을 위해 어떤 특별한 도구나 CSS 서브셋을 사용할 필요가 없고 앱 일부를 재작성할 필요가 없다. 아이오닉은 웹의 안정성을 유지하면서 기존 기술을 재사용하도록 허락한다. - 하나의 코드 베이스로 여러 플랫폼에서 작동한다.

아이오닉 프레임워크는 컴포넌트/UI 레이어에 중점적이기 때문에, 사용하고 있던 프레임워크의 빌드 도구와 CLI를 그대로 유지할 수 있다. 앱이 어떻게 제작되는지가 아니라 어떻게 보이고 행동하는지에 관심을 가진다. 역사적으로, 아이오닉 프레임워크는 오직 앵귤러(Angular)를 가지고 제작되었다. 이러한 이유로, @ionic/vue에 대한 세부사항을 공유하게 되었다.

초기 테스트

아이오닉 4를 개발하면서 주요 의도 중 하나는 프레임워크에 얽매이지 않는 것이었다. 개발자들이 그들의 니즈(needs)에 적합한 프레임워크를 고를 수 있다고 생각했기 때문이다. 훌륭한 개발자 경험을 제공하기 위해서는 통합 레이어를 추가해야 한다고 깨달았다.

예를 들어, 앵귤러를 사용하면 컴포넌트가 타입 검사 시스템(type checking system)과 호환 가능한 @ionic/angular를 만들었다. 그러나 뷰와 같은 다른 프레임워크를 사용한다면 어떻게 보일까?

아이오닉 프레임워크과 뷰의 첫 데모는 그야말로 index.html에 스크립트 태그와 CSS 링크를 그대로 사용하였다. 동작은 하였지만, 뷰 생태계의 관련 패키지에서 봤던 전형적인 경험을 확실하게 제공하지 못했다.

아이오닉 프레임워크와 뷰를 사용한 첫 데모는 여기에서 볼 수 있다.

커뮤니티 지원

이맘때, 아이오닉에서는 Modus Create의 Grgur Grisogono 와 Michael Tintiuc와 연락을 하기 시작했다. Modus 팀은 아이오닉 프레임워크에서 뷰를 지원하고 적절한 개발자 경험을 제공하기를 열렬히 바랐다. 그래서 그들의 노력과 함께 ionic/vue 래퍼(wrapper)가 형태를 잡기 시작했고, 첫 번째 버전을 볼 수 있었다. 추가로, 더 큰 커뮤니티를 지원하기 위해 Modus팀은 아이오닉 프레임워크의 코어 레파짓토리에 래퍼 부분을 작성하여 풀리퀘스를 보냈다.

그러나 그들은 통합 레이어 상에서 작업하는 것이 아니었다. 통합 모드에서 잘 동작하여진다는 것을 증명하기 위해, Modus팀은 아이오닉 프레임워크, 뷰와 Capacitor를 사용하여 Beep이라는 앱을 제작하였다. Beep은 이메일이 데이터 유출(HaveIBeenPwned API 사용)의 일부인지 확인하는 앱이다. 현재 성공적으로 출시되었으며, iOS 앱스토어, 구글 플레이에서 그리고 PWA로 이용 가능하다.

Beep에 대한 자세한 내용은 Modus 팀의 블로그 게시물을 확인해라.

시작부터 단순함

이제 @ionic/vue를 알파(O.O.1)로 이용 가능하다는 것을 알리게 되어 기쁘다. 관심 있다면, 콘퍼런스의 Josh의 프레젠테이션을 여기에서 볼 수 있다.

시작하려면 뷰 프로젝트에 패키지를 간단히 설치해주기만 하면 된다.

npm install @ionic/vue

그런 다음 main.js에 라이브러리를 import 해서 사용할 수 있다.

import Vue from 'vue';
import App from './App.vue';

import { Ionic } from '@ionic/vue';

Vue.use(Ionic);
new Vue({
  render: h => h(App)
}).$mount('#app');

모든 준비가 끝났다.

이 새로운 기능을 사용하면 뷰 프로젝트에 아이오닉 프레임워크를 추가하고 뷰의 친근한 형식으로 모든 API를 액세스할 수 있다.

예를 들어, 뷰에서 프로퍼티 바인딩과 이벤트 바인등을 다루기 위해 :prop과 @eventName을 사용할 수 있다.

<ion-content>
  <ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
    <ion-refresher-content
      :refreshingSpinner="dynamicIcon"
      :refreshingText="refreshMessage"
    >
    </ion-refresher-content>
  </ion-refresher>
</ion-content>

앱에 로딩 표시기 같은 오버레이를 보여주고 싶다. 이는 뷰에서 전역 $ionic 객체를 통하여 수행할 수 있다.

export default {
  name: 'LoadingScreen',
  methods: {
    async showModal() {
      const loading = await this.$ionic.loadingController.create({
        spinner: 'hide',
        duration: 5000,
        message: 'Please wait...',
        translucent: true,
        cssClass: 'custom-class custom-loading'
      });
      loading.present();
    }
  }
};

이 통합이 아이오닉의 API를 뷰 라우터 또는 뷰엑스(Vuex)와 같은 전형적인 뷰 라이브러리로 작업하는 것처럼 느껴질 것이다.

다음은?

@ionic/vue는 아직 초기 단계여서 프로덕션(production)용으로 권장하기 전에 테스트해야 할 것이 많다. 이제 커뮤니티에 아이오닉을 공개하고, 여러분의 의견을 들을 수 있게 되어 기쁘다.

아이오닉의 가장 거대한 자산은 크고 열정적인 커뮤니티이며, @ionic/vue에 대한 피드백이 필요하다. 뷰의 팬이면서 아이오닉 프레임워크를 한 번 해보기를 원한다면, 한 번 시도해보고 포럼, 슬랙 및 깃헙으로 피드백 주길 바란다.

@ionic/vue를 위한 훌륭한 첫걸음이라고 생각한다. 아이오닉 프레임워크를 사용하여 앱을 제작하는 것은 흥미로운 시간이며, 여러분의 앱 제작을 보는 게 너무 기다려진다!

다음 시간까지, 힘내자! 🍻

• 아이오닉 Vue
• 아이오닉 문서
• 아이오닉 월드와이드 슬랙
• 아이오닉 포럼