vue(5)
-
[Vue3] NativeScript Bottom Navigation 만들기2 (MDBottomNavigationBar + MDTabContent
NativeScript + Vue3 베타를 계속 공부하면서 여러 가지 베이스 프로젝트들을 만들어 보고 있다. 각종 기능이 담긴 나만의 베이스 프로젝트를 만들어두면 나중에도 검색하는 시간을 줄이고 바로바로 복붙으로 가져다 쓸 수 있기 때문에 자신만의 베이스 프로젝트를 만들어 두는 것을 추천한다. 이번에는 지난 번에 만들었던 NativeScript BottomNavigation 을 좀 더 업그레이드 된 플러그인으로 교체하여 동작하는 것 까지 해보려고 한다. 사실 지난글 2023.10.05 - [IT/Vue] - [Vue3] NativeScript Bottom Navigation 만들기 에서는 아주 기본적인 BottomNavigation 플러그인으로 만들었기 때문에 약간 볼품(??)없는 형태여서 마음에 계속 ..
2023.11.01 -
[NativeScript] Can't find stylesheet to import.(@nativescript/theme/scss/variable/blue) 오류 해결
오늘도 즐거운 하이브리드 앱 코딩을 하고 있었으나, 여지없이 발생하는 컴파일 오류들을 해결해보자. 오늘은 네이티브스크립트에서 기본으로 제공하는 테마를 SCSS로 추가하였으나, 해당 파일을 찾지 못해 발생하는 오류였다. 휴.. 틀림없이 모든 모듈을 설치하고 시작한 줄 알았으나, 계속진행되는 개발로 인해 모듈이 없는지도 모르고 개발을 하여 발생한 오류.. 저 오류를 해결하기 위해서는 네이티브스크립트에서 기본 제공하는 테마 모듈을 설치해야 한다. "npm install @nativescript/theme" 아래의 명령어로 모듈 설치 후 컴파일을 진행하면 바로 해결되는 것을 알 수 있다.
2023.09.13 -
[NativeScript] ns run android 명령어 실행이 되지 않는 경우(sdk 버전 미스)
NativeScript 로 하이브리드 앱을 코딩하고 빌드하고 실제 안드로이드 에뮬레이터에서 동작을 확인해보려고 하면, 실행이 잘 되지 않는 경우가 발생한다. 주로 개발컴에서 셋팅을 다 해두고 깃허브 같은 곳에 푸시한 다음, 집 컴퓨터에서 깃 클론으로 땡겨서 빌드하는 경우에 종종 발생할 수 있는데, 주로 원인은 SDK 버전과 Build Tool 버전이 안맞아서 발생한다. 그런 경우 아래와 같은 에러 로그를 볼 수 있다. 에러 문구를 잘 보면 컴파일에 호환되는 SDK 버전이 잘 맞지 않는다고 나오는 것을 알 수 있다. Execution failed for task ':app:checkDebugAarMetadata'. 4 issues were found when checking AAR metadata: 1. ..
2023.09.12 -
NativeScript 로 Vue 샘플 프로젝트 생성 오류 해결 (ns create app PSSecurityException , powershell)
NPM 으로 NativeScript 설치 후 Vue 기반 샘플 프로젝트 생성 시 오류가 발생하였다. npn install -g nativescript 설치 까지는 잘 되었다. 문제는 그 다음.. ns create myCoolApp을 하는데 자꾸 아래 같은 에러가 발생하였다. 그래서 처음에는 powershell 에 관리자 권한을 주고 재실행하였으나, 역시나 똑같은 증상이 나타났다. 조금 더 구글링해보니, "set-executionpolicy RemoteSigned" 명령어를 치고 보안 해제 후 해보라는 답을 얻었다. 난 그냥 모두 예를 해서 넘어갔다. 그리고 다시 ns create myCoolApp을 하니 드디어 햅삐엔딩! 물론 위 보안 위협은 있겠지만... 실행할 수 있는 방법을 찾아 기쁘다..
2023.09.11 -
[VSCode] ESLint 에 Prettier(코드 포맷터) 설정 적용하기
VSCode를 사용하여 코딩을 하다보면, 문법적 오류 방지나 코드 문서화 등을 하기 위한 정적 분석 툴을 필요로 할 때가 있다. 이 때 필요한 것이 바로 ESLint 입니다. JSLint, JSHint 등의 툴도 있는데, 오픈소스이면서 확장성이 뛰어난 ESLint 가 대세가 되는 것 같습니다. VSCode 의 Extention에서 ESLint와 Prettier를 설치하도록 합시다. Settings 에 들어갑니다. ESLint로 가서 Edit in settings.json 클릭 아래 내용 붙여넣기(적당히 커스텀 해도 됨) "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "[vue]": { "e..
2023.08.28