우분투에 구글 NativeScript 설치

웹과 앱이 하나로 통합 될 거라는 얘기를 종종 한다.

개인적인 생각이지만, 웹을 중심으로 앱이 통합되는 형태 보다는, 앱이 살아남고, 웹은 서포트 역할이 될거다 라고 생각한다.

웹은 URL을 외우고, 접속하기 위해 키보드가 필요하지만, 앱은 설치하고 터치하면 된다.
구글 글래스에서 동작하는 방식을 키보드로 할 수 없다. 냉장고에 키보드를 포함할 수도 없다.
TV 에서 넷플릭스를 보기위해 블루투스 키보드를 사야되나?

웹을 사용하려면 브라우저를 탑재해야 하는데, 브라우저는 다양한 기능을 소화할 수 있도록 개발되기 때문에 무겁다.

어떤게 더 편할까 생각이 들었고, 앱을 만들어야 겠다는 생각을 했다.

앱개발의 지식이 없기 때문에, 가지고 있는 기술을 활용할 수 있는 테크트리를 선택하고 싶었고 자바스크립트로 작성할 수 있는 선택지가 있었다.

--> (수정) 웹이 앱이 되어가고 있음.

프레임워크

Fuse

Fuse

예전부터 풍부한 예제들이 탐나서, 해야지 해야지 했는데, 2018년을 기점으로 사업을 접겠다는 기사가 났다. 이유는 거대한 대기업의 잠식으로 이길수 없겠다고는 했는데, 아쉬운 부분.

Google Native-Script

Google NativeScript

2년전인가 테스트 해보려고 접속했을 때는, 어마무시하게 엉망인 웹사이트 였으나, 오랜만에 접속하니 아주 깔끔하고, 구조도 잘 잡혀 있어서 향후 지원이 더 기대된다.

React-Native

React-Native

VUE.js 와 같이 React 의 진입장벽이 Angular 에 비해 원만했기에, 사용자층이 높고, 생태계 또한 잘 활성화 되어 있다.

Google Flutter

Flutter

구글에서 만든 크로스플래폼 UI SDK 이다. WEB/APP 다 이거로 하면 된다고 만든듯 싶은데, 구글은 완성본을 오픈하는 회사가 아니라
베타를 지속적 업데이트 하기 때문에, 조금 지나서 사용해봐야겠다.

이것들은 자바스크립트 코드로 작성하면, Android & Ios 앱파일 로 build 해준다.

가상화 환경 구성하기

OS 선택하기

React 는 이상하게 손이 안가고, Angular 선호 하기도 해서, Google Native Script 를 선택했다.
개발하려고 필요한 환경을 윈도우, 맥에 설치하는데 왜인지 모르겠지만, 원클릭으로 되지 않는다.

"권한이 어쩌구 저쩌구"
"adbmanager 킷이 어쩌구 저쩌구"
"jdk 버전이 어쩌구 저쩌구"

진입장벽은 저런것들 이다. 저런 환경을 만들다가 지쳐버리고 포기하고 싶게 만드는 러닝커브의 대표적 장벽이다.
윈도우는 그나마 설치하는데 매끄러웠다.

Android Studio 를 설치하고,
Nativescript-Sidekick 설치 후에,

터미널에 접속하여

command> tns doctor

명령어를 입력하면, 관련된 프로그램들을 알아서 설치해줘서 문제가 없었다.

맥에서는 권한문제, 폴더문제, Nodejs 문제 등등.. 대부분 권한문제가 대부분 이였고, 리눅스권한에 어두운 나는 공장초기화를 진행하고,
클린설치된 맥에서 다시 하나하나 설치하다 보니, 다른 개발환경이랑 또 다른 버전문제/권한문제 를 일으키겠구나 싶었다.

나는 이걸 다시 반복할 자신이 없다. (윈도우 98 설치하던 때가 떠오르며)
가상화 환경(VirtualBox/Vmware) 에 해당개발에 필요한 최소설치 만이 된 백업본이 필요하다.

처음에는 가상화환경 OS를 CentOS 로 했는데, 뭔가가 잘 작동하지 않는다. 이유없이 멈추거나 한다.
Ubuntu 를 설치했더니, 아주 만족스러운 성능이 나왔다.

우분투 설치하고, 한글 언어팩 등록하기

• 우분투 Desktop 이미지
• Vmware
• Virtualbox
• 한글언어 변환

괴로운 설정은 아니여서 설치법은 링크로 대체한다.

개발환경 설치하기

Nodejs 10 버전 설치하기

NativeScript 는 Nodejs 10 버전 이상 을 필요로 한다. 우분투의 터미널을 열고 아래를 실행하자.
(vim은 vi 편집기 보다 유용하므로, 옵션설치 항목이지만 설치하는 것을 추천한다.)
(git이 기본으로 탑재됐을거 같은 느낌이지만, 그렇지 않기 때문에 설치하는 것을 추천한다.)

command> sudo apt update
command> sudo apt install vim
command> sudo apt install git
command> sudo apt install build-essential apt-transport-https lsb-release ca-certificates curl
command> curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
command> sudo apt install nodejs
command> node --version
v10.16.0

나는 NodeJS 설치 까지만 한 상태를 기본으로 두고, 가상화머신을 복제 해서 쓰기로 했다.
(다음 설치를 하다가 문제 생기면 시원하게 지워버리고 다시 복제하기 위해서..)

Nodejs 를 사용한다면 아래와 같이 권한을 획득해 두는게 정신건강에 좋다.

command> sudo chown -R $(whoami) ~/.npm

JDK 설치

Android SDK는 자바 8버전 에서 최적호환 되는듯 하다.

command> sudo apt-get install openjdk-8-jdk
command> vim $HOME/.bashrc

키보드 화살표로 제일 아래로 내려가서, i키 누르고 JAVA_HOME 을 추가후, esc키 누르고 wq 로 저장종료.

[추가:i]

export JAVA_HOME=$(update-alternatives --query javac | sed -n -e 's/Best: *\(.*\)\/bin\/javac/\1/p')

[저장:esc:wq]

command> source $HOME/.bashrc

KVM 설치 (옵션)

리눅스 계열에서 가상화환경의 작업관리를 해주는 것이 KVM 인듯 한데, 정확히는 모르겠지만,
안드로이드 스튜디오는 이게 성능이 좋으니 연동해서 쓰라고 조언해 준다. 모르겠고 설치...

command> egrep -c '(vmx|svm)' /proc/cpuinfo
4

0 이면 host 운영체제가 가상화 지원상태가 아니기 때문에, 이후 설치는 skip 하자

command> sudo apt install qemu-kvm libvirt-bin ubuntu-vm-builder bridge-utils

그룹권한 처리를 해야 하는데

command> sudo adduser $(whoami) libvirtd

만약 그룹이 없다고 나오면

command> groups

하고, libvirt 가 있는지 확인하고 그거라면

command> sudo adduser $(whoami) libvirt

kvm 그룹에도 추가

command> sudo adduser $(whoami) kvm
command> sudo virsh -c qemu:///system list
command> apt install virt-manager

설치하고 나면 애플리케이션 목록에 "가상머신 관리자" 생긴다

command> reboot

안드로이드 스튜디오 설치

• 안드로이드 스튜디오 설치 권고안

아래의 설치는 권고안 대로 설치하지 않고, 블로그를 참조해서 만든 설치 방법이다.

command> sudo apt install libcanberra-gtk-module 

?? 뭔지는 모르겠지만 설치 안하면 없다고 에러난다.

command> sudo add-apt-repository ppa:maarten-fonville/android-studio
command> sudo apt update
command> sudo apt install android-studio

이렇게 하면 설치는 끝나는데, 안드로이드 스튜디오를 실행해서, 각종설정을 마치고 나면, Android SDK 나 그 외에 필요한 소프트웨어를
자동으로 설치해 준다.

command> /opt/android-studio/bin/studio.sh

이 과정이 끝나면 ANDROID_HOME 을 환경변수에 추가해 줘야 한다.

command> vim $HOME/.bashrc

키보드 화살표로 제일 아래로 내려가서, i키 누르고 JAVA_HOME 을 추가 후, esc키 누르고 wq 로 저장종료.

[추가:i]

export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

[저장:esc:wq]

command> source $HOME/.bashrc

모든 설정이 끝났다.

native-script 설치는 JAVA_HOME, ANDROID_HOME 설정이 필수로 요구되기 때문에, 꼭 환경변수에 추가해 두자.
혹시 설치 후 /opt/android-studio 권한문제가 있다면

command> sudo chmod 777 -R /opt/android-studio

혹여 뭔가 부족한게 있을까 싶어서, 안드로이드 스튜디오의 adbmanager 디바이스 하나 추가하고, sdkmanager 에서 안드로이드 8.0 이상 체크하고 설치를 해두었다.

네이티브 스크립트 설치하기

설치되는 것들이 정확히 뭔지는 모르고, 관심도 없어서, 필요하다 싶은거는 죄다 설치했다.

command> sudo apt-get install libc6-i386 lib32stdc++6 lib32gcc1 lib32ncurses5 libbz2-1.0:i386 libstdc++6:i386 lib32z1     
command> sudo npm install nativescript -g --unsafe-perm

설치과정에서 에러를 뱉어내지 않았다면은, 정상설치가 되었을 거고, nativescript의 tns 명령어를 사용할 수 있다.

아래와 같이 android sdk 확인하고 build-tool 을 설치하자

command> $ANDROID_HOME/tools/bin/sdkmanager
command> $ANDROID_HOME/tools/bin/sdkmanager "build-tools;25.0.2"

NativeScript 는 Android SDK 28 또는 그 이상의 버전도 요구한다.

안드로이드 스튜디오의 Configure > SDK Manager 에 가서 Android SDK 28 버전 설치를 하자.

이제 tns doctor 로 부족한 환경이 있는지 확인한다.

command> tns doctor

No issues were detected 가 나오면 성공

마지막으로 구글이 제공해주는 코드샘플과 에뮬레이터 도우미 도구인 sidekick 를 다운받아 설치하면 끝이다.

linux version 을 다운로드 하면 .deb 파일이 받아지는데, 설치패키지 파일이므로 실행하면 설치된다.
(아이콘이 없는 상태로 설치되는데 왜그런지 모르겠음.)

터미널에서 설치하고 싶으면, 터미널을 열고 다운로드 받은곳으로 이동해서

command> sudo dpkg -i NativeScriptSidekick__amd64.deb
command> sudo apt-get install -f # Install dependencies

마무리

이렇게 하면 Native Script 사용에 필요한 최소한의 설치(?)가 되었다.

이 가상화파일을 기준으로 프로젝트가 생길때 마다 복제 하여, 독립된 개발환경으로 사용하기로 했다.

처음에는 성능문제가 있지 않을까 심히 고민했는데, 그냥 virtualbox, vmware 의 스펙을 최대한 올려서 구동했더니, 나름 빠르게 동작해서 불편함 없이 사용할 수 있었다.

포토샵은 설치가 안되서 이미지편집은 GIMP 로 하는방법 뿐인거 같다.

• Linux 이미지 편집툴