Nativescript + Vue.js = Nativescript-vue

NativeScript는 자바스크립트로 실제 네이티브 모바일 어플리케이션을 만들기 위한 오픈소스 프레임워크로

NativeScript-Vue는 Vue.js 를 이용해 모바일 어플리케이션을 만들도록 도와주는

네이티브-스크립트 플러그인입니다.

이미 Vue.js를 사용해 보신 분이라면 NativeScript-Vue는 빠는 시간에 개발을 시작 할 수 있습니다.

 

5버전부터 이용해서 현재까지 3년 정도 개발경험으로는

웹앱의 장점과 네이티브앱의 장점이 있어 프로토타입 및 기타 캐쥬얼한 앱 개발에는

탁월할 선택이 될수 있습니다.  물론 리엑트네이티브에 비해서는 레퍼런스 자료가 부족한점은

아직 아쉬운 부분입니다.

 

 

밑의 내용은 NativeScript-vue.org 에서 발최

 

모바일앱을 만들기 위한 다양한 옵션들이 있습니다. 여기에 NativeScript-Vue가 잘 맞을 상황들이 있습니다.

 

진짜 네이티브 iOS와 안드로이드 앱이 필요할 경우: 네이티브-스크립트는 iOS와 안드로이드의 네이티브 사용자 인터페이스 구성요소를 이용하여 앱을 만듭니다. 이렇게 만들어진 앱은 웹베이스가 아니기때문에 웹뷰기반(WebView-based) 프레임워크들이 가지는 한계를 따르지 않습니다. 네이티브-스크립트는 또한 다양한 플러그인을 통해 네이티브 장치의 기능들과 연결됩니다. 만약 여러분의 앱이 iOS나 안드로이드의 API나 기능들을 사용해야 한다면, 네이티브-스크립트로 그렇게 할 수 있습니다.

 

자바스크립트를 좋아한다면: 네이티브-스크립트와 함께라면 Object-C나 Swift, Java가 아니라 자바스크립트로 여러분의 모바일앱을 작성할 수 있습니다. 만약 자바스크립트를 좋아하신다면, 여러분의 웹이나 노드 앱을 만들때와 같은 언어로 네이티브 iOS와 안드로이드 앱을 작성하는 이 방법을 좋아하실 겁니다

 

Vue를 좋아한다면: Vue 뷰계층에 대한 간단하고 간편한 접근으로 유명합니다. 웹앱을 Vue로 만드는 것을 좋아한다면 같은 데이터 바인딩이나 이벤트 핸들링처럼 공통된 작업을 같은 문법으로 작성할 수 있는 NativeScript-Vue가 집처럼 편안하게 느껴지실 겁니다.

무엇을 배워야 하나요?

Vue에 이미 경험이 있다면 성공적으로 NativeScript-Vue를 배우기 위해 다음 두 가지를 중요하게 고려해야 합니다.

 

네이티브-스크립트 CLI로 작업하기: 네이티브-스크립트는 웹앱이 아닌 iOS와 안드로이드 앱을 만들기 위한 프레임워크입니다. 여러분은 네이티브-스크립트 CLI 의 몇가지 명령어와 iOS 시뮬레이터, 안드로이드 가상장치의 작동방식에 대해서 배울 필요가 있습니다.

 

네이티브-스크립트 UI 컴포넌트 배우기: 네이티브-스크립트는 네이티브 사용자 인터페이스 컴포넌트를 사용하기 때문에 <div> 나 <span> 같은 HTML 태그가 존재하지 않습니다. 대신 여러분의 인터페이스를 렌더링하기 위해 필요한 새로운 컴포넌트들을 배워야 합니다.

하지만 걱정하지 마세요. NativeScript-vue를 사용하기 위한 러닝커브가 있는 건 사실이지만, iOS 나 안드로이드 개발을 처음부터 배우는 것 보다는 훨씬 쉽습니다. 어쨌든 여러분은 이미 익숙한 자바스크립트와 Vue로 소스코드를 쓰는 것이니까요.

 

 

네이티브스크립트뷰에서 제공하는 UI Component

 

ROUTING

수동 라우팅

Vue Router

 

UTILITIES

v-template 컴포넌트

v-view 디렉티브

 

ELEMENTS:LAYOUTS

고정 (AbsoluteLayout)

독 (DockLayout)

플렉스박스 (FlexboxLayout)

그리드 (GridLayout)

스택 (StackLayout)

랩핑 (WrapLayout)

 

ELEMENTS:ACTION-BAR

액션바 (ActionBar)

액션아이템 (ActionItem)/li>

네비게이션 버튼 (NavigationButton)

 

ELEMENTS:COMPONENTS

ActivityIndicator

버튼 (Button)

날짜선택 (DatePicker)

HTML뷰 (HtmlView)

이미지 (Image)

레이블 (Label)

ListPicker

리스트뷰 (ListView)

프로그레스 (Progress)

스크롤뷰 (ScrollView)

검색바 (SearchBar)

세그먼트바 (SegmentedBar)

슬라이더 (Slider)

스위치 (Switch)

탭뷰 (TabView)

텍스트필드 (TextField)

텍스트뷰 (TextView)

시간 선택 (TimePicker)

웹뷰 (WebView)

 

ELEMENTS:DIALOGS

액션다이얼로그 (ActionDialog)

경고창 (AlertDialog)

확인창 (ConfirmDialog)

로그인창 (LoginDialog)

PromptDialog