React 프로젝트에서 Capacitor로 Android 빌드하기

React 프로젝트 개발 중 Android를 빌드해야할 일이 생겼다.

우리 서비스에서는 백그라운드에서 위치 추적해서 알림을 보내주는 기능이 필수적이었는데

웹에서는 보안, 성능 등등 여러 이유로 백그라운드 위치 추적이 안되는 것이다..!!

PWA로 알림 테스트까지 다 해놨는데.. 코드를 통으로 날려버렸다 우헤헷

난 괸찬아.. (띵릥링..)

---

진짜 Android 개발을 해야되나?! 고민 또 고민하고 있는데 (마감기한 내에 Android 공부와 구현을 모두 해낼 자신이 없었다..!!!)

팀원들이 여기저기 수소문한 결과 "Capacitor"라는 걸 알게 됨

Capacitor란?

JavaScript, HTML, CSS만으로도 iOS, Android, PWA 크로스 플랫폼을 만들어주는 크로스 플랫폼 네이티브 런타임이다.

진짜 대박인데.. 문제는 단 한가지, capacitor가 angular.js를 만든 ionic이라는 회사에서 만든 프레임워크이기 때문에 React를 사용한 예제가 많이 없었다.

특히 이미 개발이 어느정도 진행된 리액트 프로젝트에서 Capacitor 세팅하고, 안드로이드를 빌드하고, 앱이 백그라운드일 때 위치 기반 알림을 날리는.. 그런 레퍼런스는 더더욱 부족했기에 삽질을 생각보다 매우 많이 함!!

그래서 삽질 끝에 구현해낸 React + Capacitor + Android 앱 설정 방법을 포스팅하려고 한다. 잘못된 정보나 추가적인 피드백은 압도적으로 감사합니다. 🙇‍♀️

---

일단 React를 개발할 node.js 설치, create-react-app, eslint+prettier 설정같은 것들은 미리 되어있다고 가정함

React, Capacitor, Android 환경 설정

1. 안드로이드 스튜디오 설치

나는 당시 최신이었던 2023.2.1.24 버전을 썼는데 버전때문에 생긴 문제는 없었고 버전이 중요한 프로젝트라면 더 심사숙고해서 골라주시면 되겠다.

안드로이드 스튜디오 설치 과정은 구선생님께 물어봐서 다른 포스팅들을 참고함

2. 필요한 package 설치

{
  // ...
  "scripts": {
    // ...
    "build": "기존 build 명령어 && npx cap sync",
    "android": "npx cap add android", // 최초 android 파일 생성 시 입력
    "android-open": "npx cap open android"
  },
  "dependencies": {
    // ...
    "@capacitor/android": "^6.0.0",
    "@capacitor/cli": "^6.0.0",
    "@capacitor/core": "^6.0.0",
  },
}

• npx cap sync: 우리가 만든 플랫폼들 동기화
• npx cap add android: android 플랫폼 추가
• npx cap open android: android studio 실행

이렇게 자주 사용하는 명령어를 scripts에 넣어뒀다.

(npx cap add android 같은 경우엔 자주 사용할 이유가 없지만 나는 삽질하느라 계속 삭제했다가 다시 만들음..)

이제 cmd 창에 아래 명령어들을 입력한다.

> pnpm i		// 패키지 설치
> npx cap init	// capacitor configuration 초기화

init하면 capacitor.config.ts 파일이 생기는데, 필요한 설정 추가해주시면 되겠다.

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.company.appname',
  appName: 'My Capacitor App',
  webDir: 'www',
};

export default config;

Capacitor Configuration 여기 다양한 설정이 많으니까 확인해주셈

  android: {
    allowMixedContent: true,
  },
  // server 연결을 위해 필요한 코드 (없으면 화면 로딩 안됨)
  server: {
    cleartext: true,
    hostname: 'localhost:5173',
    androidScheme: 'http', // 카카오맵 도메인 등록을 위한 url scheme 설정
  },

나는 이런거 추가해줬다.

다음은 아래 3개 명령어를 cmd에 입력하면

> pnpm build		// 빌드
> pnpm android		// 안드로이드 생성
> pnpm android-open	// 안드로이드 스튜디오 실행

안드로이드 스튜디오에서 안드로이드 프로젝트가 짠!하고 실행되는 신기한 일이 발생함..

3. 안드로이드 permission 추가

자동으로 생성된 안드로이드 폴더에 들어가면 AndroidManifext.xml 파일이 있는데

아래 쯤에 여기다가 permission 추가하세요~ 하는 주석이 있다. 그 밑에다 필요한 권한을 추가해주면 된다.

필수적인거는 이렇게 네트워크, 위치 권한 정도 될 듯

    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

다음 포스팅에서 백그라운드 위치 추적 기능이랑 FCM 푸시 알림 기능 다뤄보겠음