Vue+Capacitor JS로 모바일 어플리케이션 제작

Android, iOS 앱을 개발하는 방법에는 여러가지가 있습니다. 기본적으로 Xcode나 Android Studio를 사용하여 Native App을 각각 개발하는 방법이 있습니다. 하지만 iOS, Android 앱을 따로 개발하는 만큼 많은 비용이 들어갑니다.

iOS나 Android 앱을 동시에 개발하는 방법으로 Flutter, Xamarin(Maui), Cordova, Capacitor가 있습니다. Flutter, Xamarin(Maui)는 Native App 만큼 실행 속도가 빠르고 개발이 편하지만 Dart나 C#을 사용해야 합니다.

Cordova, Capacitor를 사용하면 HTML+CSS+JavaScript으로 Android App, iOS App, WebSite, Windows App을 한번에 개발할 수 있습니다. 물론 위에서 거론한 Native App이나 Flutter, Xamarin(Maui)에 비해 상대적으로 성능은 떨어지지만, 게임이나 복잡한 App이 아닌 이상 충분한 성능을 보여줍니다.

여기에서는 Capcaitor와 Vue를 사용하여 Mobile App을 개발하는 방법에 대해 소개합니다. Capacitor를 사용하면 Vue 앱을 개발하는 방법을 그대로 사용하여 Mobile App을 개발할 수 있습니다.

여기에서는 Vue 프로젝트를 생성할 수 있는 Windows OS 개발환경이 준비되었다고 가정하고 설명합니다.

1. Windows 운영체제의 시작메뉴에서 Node.js command prompt를 실행합니다.
   
2. 먼저 Vue 프로젝트를 생성하고 실행하세요. (참고: https://ko.vuejs.org/guide/quick-start)

   npm create vue@latest
   npm install
   npm run build
   

3. 이제 Capacitor를 Vue 프로젝트에 추가해야합니다. (참고: https://capacitorjs.com/solution/vue)

   npm install @capacitor/core @capacitor/cli
   npx cap init [name] [id] --web-dir=dist
   npm run build
   

   [name]에는 프로젝트명을 입력하고 [id]에는 Package Id를 입력하세요 (Android의 Application Id, iOS의 Bundle ID)
4. 개발하려는 Mobile 플렛폼을 추가해야 합니다. iOS와 Android 앱을 동시에 개발하려면 아래 명령어를 실행하세요.

   npm i @capacitor/ios @capacitor/android
   npx cap add android
   npx cap add ios
   

5. 위 명령을 실행하면 프로젝트에 ios와 android 폴더가 추가되며, 여기에 iOS Project 파일, Android Project 파일들이 생성됩니다. 아래 명령어를 입력하면 Xcode, Android Studio가 실행되며 프로젝트를 실행할 수 있게 됩니다.

   npx cap open ios
   npx cap open android
   

6. 개발 중에 Hot Reload를 사용하려면 몇가지 설정이 더 필요합니다. (참고: https://capacitorjs.com/docs/guides/live-reload) 먼저 package.json 파일을 열고 아래 그림처럼 [ --host 0.0.0.0]를 추가하세요.
   
   이를 통해 실행 중인 Vue App을 외부에서 접근할 수 있도록 네트워크가 설정 됩니다.
7. 아래 명령어를 통해 Vue 프로젝트를 실행하세요.

   npm run dev

   그러면 아래와 같이 Network 부분이 출력될 것입니다.
   VITE v6.2.6 ready in 576 ms ➜ Local: http://localhost:8080/ ➜ Network: http://192.168.0.5:8080/ ➜ Vue DevTools: Open http://localhost:8080/__devtools__/ as a separate window ➜ Vue DevTools: Press Alt(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools ➜ press h + enter to show help
8. capacitor.config.ts 파일을 열고 "server" 설정을 추가하세요.

   import type { CapacitorConfig } from '@capacitor/cli'
   
   const config: CapacitorConfig = {
     appId: 'kr.sample.test',
     appName: 'test',
     webDir: 'dist',
     server: {
       url: 'http://192.168.0.5:8080/',
       cleartext: true,
     },
   }
   
   export default config

   url 값은 이전 단계에서 출력된 Network 값을 입력해주세요.
9. 이제 앱을 실행하시면 Hot Reload가 동작할 것입니다.

   npx cap open ios
   npx cap open android