Expo Module 개발

1. 프로젝트 생성

npx create-expo-module boot-printer

초기 생성 코드에서 필요 없는 코드 삭제

• 네이티브용 View 모듈이 아니라면 View 관련 코드를 삭제한다.
• 튜토리얼에 따라 진행

모듈 아키텍처

boot-printer/
├── src/                    # TypeScript 브릿지 코드
│   ├── index.ts           # 메인 export 파일
│   ├── BootPrinterModule.ts
│   └── bixolonConstants/  # 타입 정의
├── android/               # Android 네이티브 코드 (Kotlin)
│   └── src/
│       ├── main/java/     # Kotlin 모듈 코드
│       ├── libs/          # JAR 라이브러리
│       └── jniLibs/       # SO 네이티브 라이브러리
├── ios/                   # iOS 네이티브 코드 (Swift)
│   ├── BootPrinterModule.swift
│   └── libs/             # iOS 프레임워크
├── example/              # 테스트용 예제 앱
│   ├── App.tsx
│   ├── android/          # 빌드 시 생성
│   └── ios/             # 빌드 시 생성
└── build/               # 컴파일된 JS 코드 (npm run build 후 생성)

2. 브릿지 Typescript 코드 컴파일 ( src/ )

src 디렉토리의 TypeScript 를 Javascript 로 컴파일하기

# 루트에서 실행
# expo-module build 가 실행 되어, src 의 TypeScript 코드를 JavaScript로 컴파일하여 build/ 디렉토리 .js 파일로 생성된다. 
# 컴파일된 파일들은 모듈이 다른 프로젝트에서 사용될 수 았도록 준비 된다. 
npm run build

• 이 명령어는 Android와 iOS 네이티브 소스를 컴파일하지 않는다.
• 오직 TypeScript 소스 코드(src/)를 JavaScript로 변환하는 작업만 진행.

3. 네이티브 코드 컴파일

새로운 터미널을 열어서 실행한다.

cd example

# 안드로이드 ( expo run:android )
npm run android

# ios ( expo run:ios )
npm run ios 

네이티브 코드를 example 안에서 빌드하는 이유

• React Native 모듈은 네이티브 코드를 소스로 제공한다.
• 실제 앱을 컴파일 할 때, 개발환경에 맞게 모듈의 네이티브 코드를 컴파일한다.
• example 의 dependencies 에 모듈 코드를 연결 하여 example 빌드 시 네이티브 코드를 함께 빌드한다.

example/package.json

{
  "expo": {
    "autolinking": {
      "nativeModulesDir": ".."
    }
  }
}

example(앱) 의 npm run android 프로세스

1. expo run:android 실행
2. expo prebuild
   • android 디렉토리 생성
   • app.json / app.config.js 설정을 기반으로 AndroidManifest, build.gradle 등을 업데이트
3. example 은 autolinking 으로 모듈을 직접 참조 -> gradle setting.gradle 속성에 포함됨
4. example > android 의 gradle 빌드 ( 네이티브 모듈의 android 소스가 함께 빌드 됨 )
5. adb install 로 에뮬레이터 또는 물리 기기에 앱이 설치 됨.
   • Metro Bundler 연결하여 JS 코드 실행

TypeScript 빌드 vs 네이티브 빌드

| 구분 | TypeScript 빌드 | 네이티브 빌드 | |------|-----------------|--------------| | 명령어 | npm run build | npm run android/ios | | 위치 | 루트 디렉토리 | example 디렉토리 | | 대상 | src/*.ts | android/, ios/ | | 결과물 | build/*.js | APK/IPA 앱 | | 빌드 시간 | 수초 | 수분 | | 필요 환경 | Node.js | Android Studio/Xcode |

네이티브 코드를 Android Studio, xcode 에서 코딩하기

라이브러리 코드 보기, 자동완성 등을 사용할 수 있다.

# 터미널에서 안드로이드 스튜디오를 연다. 이렇게 하면 현재 PC 환경이 그대로 적용된다. 
npm run open:android

# 터미널에서 xcode 를 연다. 
npm run open:ios

example 앱 설치관련 명령어

# adb 서버 재시작
adb kill-server
adb start-server

# 현재 연결되어 있는 기기 보기 
adb devices

# 모든 에뮬레이터 종료 
adb devices | awk '/emulator/ {print $1}' | xargs -I {} adb -s {} emu kill

# 기존 설치 앱 데이터 삭제 
adb shell pm clear host.exp.exponent

# 물리기기 무선 페어링
# 기기의 설정 > 개발자 모드 > 무선디버깅 > 코드로 페어링 
adb pair 192.168.0.4:41573 

# 페어링만 해도 연결됨. 만약 안된다면 컨넥팅!
adb connect 192.168.0.4:43713 # 코드 페어링 포트와는 다른 포트다. 

# 이후 example > npm run android 를 하면 물리기기에서 앱이 실행된다. 

Expo Module 코딩하기

구조

• src : 네이티브와 앱을 연결해 주는 모듈의 Typescript 브릿지 코드
• android : 모듈의 안드로이드 네이티브 코도
• ios : 모듈의 ios 네이티브 코드
• example : 모듈 코드를 autolinking 으로 참고하여 빌드하는 예제 앱.

코딩 순서 ( 안드로이드 기준 )

1. 네이티브 코드 작성

(1) Android Studio 열기
루트에서 npm run open:android 로 Android Studio 열기

(2) 네이티브 코드에서 참조하는 특정 라이브러리 복사

• JAVA jar : android/src/libs
• C/C++ so : android/src/main/jniLibs 밑에 아키첵쳐별로 복사

(3)모듈 정의 후 코딩

...
override fun definition() = ModuleDefinition {
    Name("BootLabelPrinterProxy")

       ...

2. 브릿시 코드 작성

1. src 디렉토리에 네이티브 측의 모듈 클래스와 1:1 로 브릿지 코드 작성

// BootLabelPrinterProxy.ts 하단에 export 시 
// 모듈 이름을 안드로이드 코드에서 정의한 Name("BootLabelPrinterProxy")와 동일하게 한다.
export default requireNativeModule<BootLabelPrinterProxy>('BootLabelPrinterProxy');

2. index.ts 에서 앱(example)에서 사용할 수 있게 통합하여 export

3. 루트의 expo-moudle.config.json 에 사용하는 모듈을 정의

3. 앱(example) 코드 작성

example>App.tsx 에서 해당 모듈 임포트 하여 사용하기

import BootPrinter, { BootPrinterLookup, InterfaceType, Label_MediaType } from 'boot-printer';
...

• import 하는 boot-printer 라는 이름은 module 루트의 package.json 의 name 항목에 정의 되어 있음

TODO

• USB 프린터가 연결된 상태에서 프린터 전원을 껐다 키면, USB address 가 바뀌어서, 기존 연결을 해제를 못한다.