Ionic + Vue3 + Typescript 환경으로 모바일 크로스플랫폼 앱을 개발하면서 필요한 내용을 정리해본다. 지도 연동은 매우 빈번하게 사용하는 기능 중 하나이다. 오늘은 가장 보편적으로 사용되는 네이버지도 API를 연동해보도록 하겠다. 1. 네이버지도 API Key 발급 받기 https://www.ncloud.com/product/applicationService/maps NAVER CLOUD PLATFORM cloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology Certification www.ncloud.com 위 페이지로 가서 네이버지도 사용 등록 및 키를 받..

NativeScript + Vue3 베타를 계속 공부하면서 여러 가지 베이스 프로젝트들을 만들어 보고 있다. 각종 기능이 담긴 나만의 베이스 프로젝트를 만들어두면 나중에도 검색하는 시간을 줄이고 바로바로 복붙으로 가져다 쓸 수 있기 때문에 자신만의 베이스 프로젝트를 만들어 두는 것을 추천한다. 이번에는 지난 번에 만들었던 NativeScript BottomNavigation 을 좀 더 업그레이드 된 플러그인으로 교체하여 동작하는 것 까지 해보려고 한다. 사실 지난글 2023.10.05 - [IT/Vue] - [Vue3] NativeScript Bottom Navigation 만들기 에서는 아주 기본적인 BottomNavigation 플러그인으로 만들었기 때문에 약간 볼품(??)없는 형태여서 마음에 계속 ..

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

NativeScript + Vue3 는 현재 베타가 진행중이며, 베타 버전은 9로 확인되고 있다. NativeScript + Vue3 프로젝트 생성은 아래 링크를 확인하기 바란다. 2023.09.18 - [IT/Vue] - [NativeScript+Vue3] 하이브리드 앱 신규 프로젝트 생성 방법 [NativeScript+Vue3] 하이브리드 앱 신규 프로젝트 생성 방법 현재 NativeScript 에서 공식적으로 지원하는 것은 Vue2 이다. 물론 다른 언어들도 공식 지원하지만, 여기서는 Vue 만으로 얘기한다. 뷰2 기반으로 만들어도 다양한 하이브리드 앱을 만드는 것에는 문 suncastlefafa.tistory.com 프로젝트 생성 후 기존에 사용하던 RadSideDrawer 플러그인을 이용하여 사..

최근 NativeScript + Vue3(w/TypeScript)로 하이브리드 앱 개발을 계속 하고 있다. 사실 타입스크립트 사용은 고려대상에 없었으나, 네이티브스크립트 + 뷰3 하이브리드 앱 베이스가 타입스크립트 기반으로 되어 있어서 어쩔 수 없이 사용하고 있다. 타입스크립트의 장점은 명확한 타입 사용을 강제하여 코드 품질을 향상시키고 이슈가 될 만한 것들을 컴파일 시 알 수 있게하여 고품질의 코딩을 가능케 한다라고 나와 있으나.. 사실 엄격한 코딩룰이 있기 때문에 코딩을 하면서 신경 쓰이는 게 한 두가지가 아니고.. 이로인해 코딩 속도가 더욱 떨어지는 느낌이다 ㅠㅠ 구글링 하다 보면, Vuex 적용 시 타입스크립트 모듈화에 익숙해지면 훨씬 편하다곤 하는데 아직 그 정도의 실력자가 아닌지라 적응하는게 ..

디바이스와 연결하여 디버깅을 한참 하고 있는데, 갑자기 Error is: Invalid Version: null. 이런 에러가 나면서 디버깅이 제대로 안되기 시작했다. 구글링을 해보니 안드로이드 앱 버전 0으로 설정되어 발생하는 에러라는데, 나의 경우는 package.json 에 버전이 잘 설정되어 있었기 때문에 해당되지 않았다. Searching for devices... Preparing project... Using @nativescript/android which requires nsconfig.json to be present. Writing nsconfig.json based on the values set in nativescript.config.(js|ts). You may add nsco..