Nativescript-vue 사용 (1)

웹 개발자로서 모바일 앱을 개발하려고 했을때에 어떤 프레임웍을 사용할 것인지 고민해 보았습니다. 

우선 고려대상은 플러터(Flutter), 네이티브스크립트(Nativescript-vue), 아이오닉(Ionic) 3가지 였습니다.

 

1. 기본 소개

◆ Flutter

플러터는 구글에서 개발한 Dart 언어를 기반으로한 프레임워크입니다. 구글에서 밀고 있다보니 지원도 많이 되고, 사용자 관심도 높은 편입니다. 단 dart 언어를 새로 배워야 합니다.

 

◆ Nativescript-vue

javascript 기반으로 native 앱을 개발할 수 있습니다. 미리 빌드된 구성요소를 제공하며 vue 문법을 그대로 사용하지만 html기반은 아니므로 제가 익숙하게 사용하고 있는 vuetify 같은 웹UI 요소는 사용할 수 없습니다. 구글 검색을 해보니 사용자가 그리 많은것 같지는 않습니다.

 

◆ Ionic

하이브리드 앱 개발 프레임워크로서 ionic에서 제공하는 UI 요소 및 vuetify 등도 그대로 사용 가능합니다. ionic에서 제공하는 vue ui component 는 vue3 기반으로 보입니다.

 

2. 장단점

◆ 재사용성

아이오닉이 가장 높고 플러터, Nativescript 순 이네요. (나머지는 React-native 와 Andorid(Java), IOS(Swift) 입니다.

 

◆ Rich pre-styled component libary (미리 스타일이 지정된 UI 구성요소 제공성)

아이오닉은 자체 UI component 도 제공하고 다른 UI framwork 도 사용 가능해서 직접 css 를 수정하지 않아도 꽤 보기 좋게 만들 수 있습니다.

 

◆ Ecosystem / Third-party 라이브러리

Nativescript 는 아무래도 사용자가 적습니다.

 

◆ Popularity & Coverage

고래대상인 셋 중에는 플러터가 인기가 제일 높네요.

 

◆ Performance

성능부분에서는 하이브리드인 Ionic 보다 당연히 native 계열이 더 우수합니다.

 

◆ 장치 접근성

 

3. 결정

고려 사항은 다음과 같았습니다. 

- 학습 기간 최소화 ( vue.js 를 그대로 사용하거나, 최소한 javascript 계열 )

- cross-flatform

- 성능 및 장치 접근성

 

완전 native는 새로 배워야 할게 많아 고려대상이 아니였고, react-native 나 flutter 둘 중에는 어차피 새로 배워야 하니 flutter에 좀 더 점수를 주었습니다. ionic은 가장 빠르게 적응할 수 있을 것 같았지만, 성능면이 너무 걸려서 탈락시키고, 

결국 flutter와 Nativescript-vue 둘 중 마음은 flutter지만, 학습 기간을 줄이고자 Nativescript-vue 를 먼저 배워보기로 했습니다. 

 

4. 설치

Nativescript-vue를 사용해 보기로 하고 우선 설치부터 하였습니다. 공식 문서가 잘 되어 있어 따라하기만 하면 될것 같네요.

https://nativescript-vue.org/ko/docs/getting-started/installation/

NativeScript-Vue - A NativeScript plugin for building truly native applications using Vue.js

- Windows-Android setup

제 OS가 windows 인 관계로 windows-andriod 를 setup 하겠습니다.

우선 cmd 창을 관리자 권한으로 open합니다.

Node와 JDK를 설치합니다.

choco install -y nodejs.install openjdk8

안드로이드 스튜디오를 다운로드후 설치 합니다.

https://developer.android.com/studio

 

설치 후 환경변수를 설정합니다. (시스템 -> 시스템 정보 -> 고급시스템설정 -> 환경변수 -> 새 사용자 변수 추가

변수명: 'ANDRIOD_HOME'

값: %LOCALAPPDATA%\Android\Sdk

환경변수에서 사용자변수의 'Path' 를 선택 -> 편집 -> 새로 만들기 후 아래 경로를 추가합니다.

%LOCALAPPDATA%\Android\Sdk\platform-tools

- native cli 설치

npm install -g nativescript

설치 완료를 확인 하기 위해 CMD 창에서 다음 명령어를 실행합니다.

ns doctor android

이상 없이 설치된 경우 No issue 메시지가 나옵니다.

5. 샘플 프로젝트 설치 및 확인

기본 설치는 모두 완료하였습니다. 이제 테스트 프로젝트를 생성하고 확인해보겠습니다.

테스트 프로젝트 생성

ns create 명령어로 프로젝트를 생성할 수 있습니다. (vue 2.x 기준)

프로젝트명으로 폴더가 생성되고 이동하여 관련 패키지를 모두 설치 npm install 합니다.

ns create <프로젝트명> --vue

ns create <프로젝트명> --vue --ts // typescript 사용시

프로젝트 생성 후 경로로 이동하여 npm install 로 관련 패키지를 install 하고 실행해 봅니다.

cd <프로젝트 폴더>
npm install
ns run android

위와 같이 에뮬레이터가 실행되고 기본 화면이 보이게 되었습니다.

 

다음에는 코드를 수정해 가면서 nativescript 제공하는 기능을 사용해 보도록 하겠습니다.

 

참고로 nativescript를 설치하지 않고 경험해보고 싶으신 경우 playground site를 방문해 보시기 바랍니다.

https://play.nativescript.org/

NativeScript Playground

https://youtu.be/iGa1HQbtDmU

감사합니다.