환경 : NativeScript Vue3 beta9 + TypeScript 기반 본격적인 모바일 하이브리드 베이스 앱을 만들고 있다. 저번에는 Navigation Drawer(Side Menu) 를 만들어 보았으니, 이번에는 하단 탭 구조(BottomNavigation)를 만들어 볼 차례가 되었다. 하단 탭 구조는 네이티브 스크립트에서 기본 제공하는 TabView / TabViewItem 등을 이용해서 만들거나, ui-material-component 플러그인, Vuetify 플러그인 등을 이용해서 만들 수 있는데, 이번에는 ui-material-component 플러그인으로 만들어 보도록하겠다. ui-material-component 플러그인으로 선택한 이유는 실제로 되기 때문이다. Vuetify는 아..

뷰3로 버전업이 되면서 변경된 점 중 하나만 Composition API 의 추가여부이다. 뷰2와 어떤 부분이 달라지는지 다음의 예시로 감을 잡아보자. 예시) 할 일 목록에 할 일을 추가하고, 완료 상태를 토글할 수 있는 기능 Vue3 컴포지션 API 사용하여 만든 예시(함수 내부에서 상태와 로직을 명확하게 구성하여 관리하여 재사용성 및 가독성이 좋음) // 화면 표시 부분 Add Pending Tasks {{ task.text }} Complete Completed Tasks {{ task.text }} Uncomplete // UI 커스텀 Vue2 로 만든 예시(data, computed, methods) Add Pending Tasks {{ task.text }} Complete Completed ..