🤐 ionic live-reload 해보기

🫣 live-reload란?

하이브리드 앱을 개발하다보면 , web으로 만든 소스를 모바일에서 디버깅 하고 싶을때가 있다. 처음에 입사할 당시에 기존직원은 "ionic build => android studio 오픈 => android studio 버튼 통해 앱 실행"을 하였다. 이렇게 하게 되면 코드를 수정할 때마다 매번 빌드 시키고 android studio 를 켜야 한다는 단점이 있다. ionic에서는 live-reload를 통해 실시간으로 코드 변경하면 모바일 화면에 바로 적용이 된다. 예를 들어 푸시알림, 파일저장, 목소리 녹음 같은 것은 앱의 권한을 받고 앱에서만 동작하는 기능이다. 웹에서는 할 수 가 없다.

 

live-reload를 통해 변경된 코드를 모바일에서 바로바로  적용할 수 있다.

 

 

💆‍♂️ live-reload cordova

ionic은 두가지가 존재한다. cordova / capacitor 가 존재한다. 최근에는 capacitor를 밀어주는 듯 하다.

첫번째로 cordova를 진행해보고자 한다.

매우 간단하다. 아래 코드를 실행시킨다.

 

android

ionic cordova run android -l

ios

ionic cordova run ios -l --external

 

참고로 android/ios는 서로 명령어가 약간 다르다.

 

💆‍♂️ live-reload capacitor

다음으로 capacitor으로 live-reload를 실시하고자 한다.  capacitor는 cordova 보다 조금더 복잡하다.

 

일단 현재 만들어진 프로젝트는 vue + capacitor이다.

 

1. capacitor.config.json 세팅하기

//capacitor.config.json
{
  .
  .
  .
  "server": {
    "url": "http://192.168.35.113:8080", //npm run serve를 실행시켰을때의 나오는 로컬주소
    "cleartext": true
  }
}

처음으로 npm run serve를 통해 나오는 로컬주소를 세팅해준다.

 

2. npx cap copy

npx cap copy

npx cap copy를 통해 웹 소스를 android 으로 옮겨준다.

 

3. npx cap open android

npx cap open android

npx cap open android 를 통해 android studio를 실행시켜주고 , 앱을 실행시켜준다. 그러고나면 파일을 저장할때마다 모바일에서 화면이 스스로 reload가 된다.