저는 Vue.js로 하이브리드 어플을 제작하기 위해서 안드로이드 용으로 세팅을 진행하였습니다.
그리고 이미 이전에 Node.js, Android Studio, Java 등 Vue.js를 구축할 때 필요한 사전 작업은 다 끝낸 상태에서 환경 구축을 시작하였습니다.
만일 이러한 것들이 아직 세팅되지 않았다면 먼저 세팅하고 Vue.js를 다운받아주세요!
cmd 창에서 Vue cli를 설치합니다.
npm install -g @vue/cli
그런 뒤에 vue 프로젝트를 생성합니다.
vue create [프로젝트 파일 명]
성공적으로 만들어졌다면 프로젝트 파일에 들어가서 run을 하고 cmd창에 나와있는 링크로 들어가보면 이런 화면이 나타납니다.
cd [프로젝트 파일 명]
npm run serve
위 화면이 나타났다면 Vue 환경 설정이 제대로 구축되어 프로젝트 파일이 잘 생성되었다는 뜻으로, 웹 개발을 하는 거라면 이 상태에서 src 파일로 가서 코드를 수정하시면 됩니다.
하지만 저는 하이브리드 앱을 만드는 것이 목표이기에 여기서 추가 환경구축을 더 진행하겠습니다.
Vue 프로젝트를 이용하여 어플리케이션을 만들기 위해서는 Cordova 또는 Capacitor를 사용하여 Vue.js 프로젝트를 안드로이드 앱으로 패키징해야합니다. 저는 Cordova를 이용해서 이 작업을 진행해보겠습니다.
먼저 Cordova를 다운받아서 Vue 프로젝트 내에 Cordova 프로젝트 파일을 제작해야하는데요, 과정은 다음과 같습니다.
Cordova를 다운받습니다.
npm install -g cordova
Vue 프로젝트 안에 Cordova 프로젝트를 생성합니다.
cordova create [Cordova 프로젝트 명]
그다음 Vue 프로젝트를 build 해주세요.
npm run build
이렇게 build하게 되면 Vue 프로젝트 안에 dist 폴더가 생성됩니다.
이 폴더에 있는 파일들을 Cordova 프로젝트에 복사합니다.
copy dist\* [Cordova 프로젝트 명]\www\
그런 다음 Cordova 프로젝트 폴더로 가서 안드로이드 플랫폼을 추가합니다.
cd [Cordova 프로젝트 명]
cordova platform add android@8.0.1
이때 안드로이드 플랫폼을 추가하는 과정에서 그냥 cordova platform add android만 작성해도 플랫폼이 추가되지만 컴퓨터에 저장되어 있는 gradle과 버전이 맞지 않아 오류가 날 수 있습니다.
저도 이것 때문에 너무너무 고생했어요..ㅠㅠ
그러니 꼭 본인의 gradle 버전을 확인하고 @(gradle 버전)을 언급해서 다운 받을 안드로이드 플랫폼의 버전을 직접 지정해주는 것이 좋습니다.
저는 gradle을 8.0.1 버전을 사용했기 때문에 8.0.1이라고 적었어요.
만일 본인의 gradle 버전을 모른다면 윈도우 기준으로 C:\Users\user\.gradle\wrapper\dists 에 가면 왠만하면 본인의 컴퓨터에 있는 gradle 버전용 폴더가 있을 겁니다.
만일 .gradle 폴더가 아예 없다면 Android Studio에서 build를 하신 경험이 없는거기 때문에 한번 Android Studio에서 프로젝트를 build 하시거나, 아니면 직접 인터넷에서 gradle을 다운받으셔도 돼요!
그리고 gradle이 다운받아져 있다고 하더라도 cmd 창에서 gradle -v 를 작성하고 엔터쳤을 때 아래와 같이 gradle의 버전이 나와야 합니다.
그렇지 않고 오류 메시지가 나오는 경우, 직접 환경 변수 설정을 진행해야합니다.
윈도우 검색창에 '시스템 환경 변수 편집'을 검색해서 클릭하시면 아래의 왼쪽 이미지와 같이 시스템 속성 창이 나타날텐데요.
여기서 환경 변수를 클릭하고 'user에 대한 환경 변수' 부분에서 밑으로 내려가시면 변수명이 Path인 것이 있습니다. 해당 부분을 클릭한 뒤, '편집' 버튼을 클릭하면 다음과 같은 창이 나타납니다.
여기서 '새로 만들기' 버튼을 클릭해서 gradle 실행 파일이 있는 곳까지의 경로를 복사해서 넣어주고 '확인' 버튼을 눌러주세요.
저같은 경우에는 'C:\Users\user\.gradle\wrapper\dists\gradle-8.0.1-all\aro4hu1c3oeioove7l0i4i14o\gradle-8.0.1\bin'을 gradle 경로로 설정했습니다. 이거는 사람마다 다를 수 있으니 본인 폴더명에 맞춰서 경로를 설정해주세요.
그런 다음에 터미널을 껐다가 다시 실행시켜서 gradle -v를 쳐서 gradle 경로가 제대로 설정되었는지 확인해주세요.
이 작업까지 완료되었다면 이제 Cordova에서 android를 build 합니다.
cordova build android
build가 성공적으로 완료되었다면 이제 본격적으로 실행시켜볼게요.
cordova run android
run이 성공하면 애뮬레이터(가상 디바이스)가 나타나면서 앱이 다운되고 실행됩니다.