Hotwire Native 디버깅: 명확한 질문부터 시작하기

Hotwire Native 앱 디버깅 시 점검해야 할 핵심 질문과 해결책은 다음과 같습니다.

1. Turbo JS 설치 확인

Hotwire iOS/Android는 TurboJS에 의존합니다. 웹 브라우저 콘솔에서 Turbo를 입력하여 객체 출력 여부를 확인하십시오. 객체가 없으면 설치 오류입니다.

2. 다양한 로그 활용

디버깅의 기본은 로그를 올바르게 확인하는 것입니다.

• 서버 로그: 앱 실행 시 서버 로그를 확인하여 경로 설정 오류나 엔드포인트 연결 문제를 파악합니다. Rails와 같은 프레임워크는 강력한 로깅을 제공합니다.

• 네이티브 로그 활성화:
  • iOS: Hotwire.config.debugLoggingEnabled = true
  • Android: Hotwire.config.debugLoggingEnabled = BuildConfig.DEBUG, Hotwire.config.webViewDebuggingEnabled = BuildConfig.DEBUG
• 웹 콘솔 로그:
  • iOS: 시뮬레이터 실행 후 Safari의 개발(Develop) > 시뮬레이터(Simulator) 메뉴를 통해 웹뷰에 연결합니다.
  • Android: Chrome 브라우저 chrome://inspect를 통해 웹뷰에 연결합니다.

3. 디버거 사용

다음 네 가지 디버거를 활용하여 프로그램 중단 시 코드 실행 및 변수 값을 검사할 수 있습니다.

• Rails 디버거 (pry, binding.irb)

• JavaScript 디버거

• iOS 브레이크포인트

• Android 브레이크포인트

4. 브릿지 컴포넌트 디버깅: 메시지 전송 및 수신

브릿지 컴포넌트 디버깅은 메시지 흐름 추적이 중요합니다.

• 메시지 전송 확인: JS this.send 호출 후, iOS/Android 네이티브 로그를 통해 메시지 전송 여부를 확인합니다.

• 메시지 수신 확인: 네이티브 onReceive 메서드 내에 로그를 추가하여 수신 여부를 확인합니다. Android Studio 태그 필터나 iOS print 문을 활용합니다.

5. 컴포넌트 또는 프래그먼트 등록 확인

작성한 컴포넌트나 프래그먼트가 Hotwire 설정 객체에 올바르게 등록되었는지 확인해야 합니다.

• iOS: Hotwire.registerBridgeComponents([ButtonComponent.self])

• Android: Hotwire.registerBridgeComponents(...) 및 Hotwire.registerFragmentDestinations(...)

6. 경로 설정(Path Configuration) 유효성 검사

JSON 파일의 구문 오류는 문제를 야기합니다. 브라우저에서 원격 경로 설정을 방문하여 JSON이 유효하며 예상되는 객체에 부합하는지 검증하십시오.