1. Quasar project 만들기
먼저 퀘이사 프로젝트를 만들어야 한다. 이를 위해 terminal에 yarn create quasar을 입력한다.
이때 yarn이 깔려있지 않다면 이전 과정을 먼저 거쳐야 한다.
a. homebrew 설치 - b. brew로 node.js 설치 - c. npm install -g yarn을 통해 yarn 설치
이제 위 과정이 모두 완료되면 다시 yarn create quasar 입력, 그 후에는 what would you lite to build?라는 문구가 나온다. 이때 나는 앱을 만들것이므로 App with Quasar을 선택한다. 그 후 사용하려는 vue.js의 버전을 정하고, 사용하려는 스크립트의 종류(자바스크립트, 타입스크립트)를 지정, 그 뒤 generating files가 설치된다. 마지막으로 install project dependencies를 물어보는데, 이 의존성들은 일단 설치해준다.
2. Start Developing
개발을 시작하기 앞서 개발 서버로 내가 만들고 있는 애플리케이션을 브라우저에서 볼 수 있게 yarn quasar dev 를 명령한다.
3. Capacitor App
이제 컴퓨터에 Android Studio와 SDK를 설치해야 한다. 그리고 terminal에서 SDK가 설치된 위치를 찾고 이 위치를 복사하고, vi ~/.zshrc로 열린 환경변수에서 path부분에 추가해준다. 이후 source ~/.zshrc로 변경사항을 바로 재실행하면 끝이다.
4. Add Quasar Capacitor Mode
모바일 앱을 개발하고 빌드하기 위해서 Quasar 프로젝트에 Capacitor mode를 추가해야 한다. yarn quasar mode add capacitor 그러면 capacitor CLI를 사용하여 /src-capacitor 디렉토리에 이 프로젝트를 생성한다.
HMR 개발 서버 시작
내가 만들고 수정한 코드의 결과를 브라우저로 바로 확인하려면 HMR 기능을 사용해야 한다. 이를 위해 다음 명령어를 작성한다 yarn quasar build -m capacitor -T android
이후에는 cursor .과 같이 에디터에서 열어서 작업을 해주면 된다.
