Vue.js로 스마트폰 앱을 개발할 때 가장 많이 사용하는 것이 아마도 네이티브스크립트(NativeScript)일 것입니다. 그냥 웹을 개발하는 것과 달리 모바일 앱을 개발할 때는 JDK나 SDK등 여러가지를 설치하고 세팅하는 것이 헷갈리고 번거로울 수 있는데 그 환경 세팅을 하는 것에 대해서 포스팅하려고 합니다.
사전설치
장비는 Windows 10과 갤럭시 S10을 기준으로 설명하도록 하겠습니다.
Chocolatey 설치
Chocolatey는 Windows용 패키지 관리툴이라고 보시면 됩니다. 리눅스나 맥OS는 패키지 관리툴을 많이 사용하지만 Windows는 패키지 관리툴이 있는지도 잘 모르는 사람들이 많습니다. 쉽게 설명하면 보통 윈도우에 프로그램을 설치하려면 웹사이트에 접속해서 설치프로그램을 다운로드 받은 다음 설치프로그램을 클릭해서 실행해서 설치를 합니다. 하지만 패키지 관리툴은 그냥 명령창(CMD)에 명령어 한 줄 실행시키면 해당 설치프로그램을 자동으로 다운 받은 다음 설치까지 해줍니다. 한번 사용해 보면 상당히 편리합니다.
Chocolatey 자체를 설치하는 것은 아래의 명령어를 명령창(CMD)에 실행하면 됩니다.
- 관리자 권한으로 명령창(CMD)을 실행하세요.
- 아래의 스크립트를 복사하여 명령창(CMD)에 붙여 넣습니다.
@powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\binNode.js LTS 설치
이제 Node.js를 choco에서 설치할 수 있습니다. 만약 이미 Node.js를 설치했다면 건너뛰시면 됩니다.
- 아래의 스크립트를 복사하여 명령창(CMD)에 붙여 넣습니다.
choco install nodejs-lts -yChrome 설치
NativeScript 앱을 디버깅하는 데 크롬브라우저가 필요합니다. choco를 설치했으니 아주 간단하고 멋지게 크롬을 설치 할 수 있습니다.
- 아래의 스크립트를 복사하여 명령창(CMD)에 붙여 넣습니다.
choco install googlechrome -yVue.js와 NativeScript에 관한 설치
이제 Vue.js와 NativeScript로 모바일 앱 개발을 위해 필요한 프로그램이나 패키지를 설치 합니다.
Vue Cli 설치
@vue/cli는 명령창(CMD)에서 Vue에게 명령을 실행시키는 명령어 모음이라고 보시면 됩니다.
@vue/cli-init는 기초 Template을 설치해주는 기능을 제공합니다.
Vue CLI는 글로벌(전역)으로 설치합니다.
npm install -g @vue/cli @vue/cli-initNativeScript CLI 설치
이제 Vue를 모바일App로 변환해 주는 NativeScript CLI를 설치 합니다. NativeScript CLI는 글로벌(전역)으로 설치합니다.
npm install -g nativescriptJDK 8 설치
JDK도 쉽게 설치 할 수 있습니다.
- 아래의 스크립트를 복사하여 명령창(CMD)에 붙여 넣습니다.
choco install adoptopenjdk --version 8.192Android SDK 설치
Android SDK도 설치합니다.
- 아래의 스크립트를 복사하여 명령창(CMD)에 붙여 넣습니다.
choco install android-sdk -ySDK의 모든 패키지 설치
Android SDK Platform 28, Android SDK Build-Tools 28.0.3 이상, Android Support Repository, Google Repository 및 기타 필요한 SDK에 대한 모든 패키지를 설치합니다.
"%ANDROID_HOME%\tools\bin\sdkmanager" "emulator" "platform-tools" "platforms;android-28" "build-tools;28.0.3" "extras;android;m2repository" "extras;google;m2repository"설치 및 설정 확인
이제 시스템이 올바르게 설치 및 설정되었는지 확인 합니다.
tns는 NativeScript CLI 명령어 입니다.
tns doctor아래와 같이 No issues were detected. 가 나오면 정상적으로 설치된 것입니다.
샘플 프로젝트 설치 및 스마트폰에서 확인
기본 설치는 모두 완료하였습니다. 이제 테스트 프로젝트를 생성하고 스마트폰에서 확인해 보도록 하겠습니다.
테스트 프로젝트 생성
vue init 명령어로 템플릿을 통해 기초 프로젝트를 다운로드 받아 생성할 수 있습니다.
vue init nativescript-vue/vue-cli-template <project-name>
cd <project-name>
npm install<project-name>이름은 임의로 작성하면 됩니다.
<project-name>명으로 폴더가 생성되고 템플릿코드가 다운로드 되어 있을 것입니다. 이제 해당 폴더로 이동(cd <project-name>)해서 사용된 패키지를 모두 설치(npm install) 합니다.
이제 아래의 명령어로 실행합니다.
tns run100% 오류가 발생할 것입니다. 왜냐하면 스마트폰을 개발자 모드로 설정하고 USB로 컴퓨터와 연결을 해야 하기 때문입니다.
스마트폰 설정하기
스마트폰에 해당하는 USB드라이버 설치하기
기본적으로 설치되어 있지 않은 USB드라이버를 설치해야 합니다. 저는 갤럭시 S10을 사용하기 떄문에 해당 스마트폰의 USB드라이버 홈페이지로 이동하여 설치합니다.
스마트폰 USB디버깅 모드로 전환
스마트폰을 이제 USB디버깅 모드로 전환해야 합니다. 그래야 스마트폰에서 확인할 수 있습니다.
- 설정 화면입니다.
2번위치에 개발자 옵션이라는 메뉴가 있어야 하지만 이 메뉴는 순수하게 개발자를 위한 옵션이므로 기본적으로 이 메뉴는 숨겨져 있습니다. 이제 이 메뉴를 활성화 시켜서 USB디버깅 옵션을 설정해야 합니다.- 개발자 옵션을 활성화 하기 위해 휴대전화 정보 메뉴를 클릭해서 들어갑니다.
휴대전화 정보로 들어왔다면 소프트웨어 정보 메뉴로 들어갑니다.
특이하지만 빌드번호 메뉴를 4~5차례 연타로 계속 누릅니다. 그러면 개발자 옵션이 활성화되었다는 Alert을 볼 수 있습니다.
다시 설정화면 처음으로 이동해 봅니다.
이제 숨어있던 개발자 옵션 메뉴를 볼 수 있습니다.
이 메뉴를 클릭해서 들어갑니다.
개발자 옵션 중간 쯤에 가장 중요한 USB디버깅 모드가 있으니 활성화 시키시면 됩니다.
혹시나 USB디버깅 모드가 비활성화 된 모습을 본다면 스마트폰에서 USB케이블을 제거하고 보시면 활성화 되어 있을 수 있습니다. USB케이블 연결 전에 활성화를 먼저 시키고 연결해야 합니다. 그래도 여전히 비활성상태라면 스마트폰의 보안프로그램 때문일 수 있으니 그부분도 살펴보시면 됩니다.
다시한번 명령어 실행시키기
설정이 완료되었습니다. 다시한번 명령창(CMD)에서 아래의 명령어를 실행시킵니다.
tns run아래와 같이 정상적으로 나온 화면을 볼 수 있습니다.
이제 개발만 잘 할 일만 남았습니다. ^^
