[NativeScript+Vue3] 하이브리드 앱 신규 프로젝트 생성 방법

현재 NativeScript 에서 공식적으로 지원하는 것은 Vue2 이다. 물론 다른 언어들도 공식 지원하지만, 여기서는 Vue 만으로 얘기한다.

 

뷰2 기반으로 만들어도 다양한 하이브리드 앱을 만드는 것에는 문제가 없다. 다만 코딩상 뷰2가 갖는 비효율성으로 인해 유지보수가 어려워지는 경우들이 쌓이다 보면 나중에 어려운 상황이 올 수 있다.

 

NativeScript 와 Vue3의 조합은 현재 베타 버전이 진행중인 상태이며, 크롬 뷰 데브툴 사용도 안드로이드 에뮬레이터 or iOS 시뮬레이터 환경에서만 가능하고 실제 디바이스에서는 사용이 불가함 등등 몇 가지 제약이 있다.

 

그럼에도 불구하고 Vuex 와 같은 필수적인 라이브러리를 활용하고 싶다면 반드시 뷰3 기반으로 프로젝트를 생성해야 한다. 뷰2 기반의 프로젝트에서는 제대로 동작을 하지 않고, 처리가 어려운 에러들이 발생할 수 있다.

 

뷰3 기반의 샘플 프로젝트를 신규로 다운받고 거기서 부터 개발하는 방법을 설명한다.

 

1.아래 명령어 실행, myAwesomeApp 은 원하는 폴더명으로 바꿔도 됨.

ns create myAwesomeApp --template @nativescript-vue/template-blank@beta

2. 해당 폴더로 가서 앱을 실행해보기.

cd myAwesomeApp
ns run ios|android

3. Vue DevTools 를 사용하기 위해서는  아래와 같이 명령을 친다.

ns run ios|android --env.vueDevtools

4. 안드로이드라면 다음 경로의 App_Resources/Android/src/main/AndroidManifext.xml 에 아래 내용을 추가한다.

<application ...
+  android:usesCleartextTraffic="true"
.../>

5. 실행해보면, 다음과 같은 화면을 볼 수 있다.

 

자 이제 기본 구성은 되었으니, 알아서 커스텀 시작!

 

출처 : nativescript-vue/nativescript-vue: Native mobile applications using Vue and NativeScript. (github.com)