3.Using-Hermes.md

Hermes 사용하기

Hermes 는 안드로이드에서 리액트 네이티브 앱을 실행하는 데 최적화된 오픈 소스 자바스크립트 엔진입니다. 많은 앱에서 Hermes를 활성화하면 시작 시간이 단축되고 메모리 사용량이 감소하며 앱 크기가 작아집니다. 현재 Hermes는 React Native의 옵션 기능으로, 이 가이드에서는 이를 활성화하는 방법을 설명합니다.

먼저, React Native 버전 0.60.4 이상을 사용하고 있는지 확인해야 합니다.

React Native의 이전 버전을 기반으로 하는 기존 앱이 있는 경우 먼저 업그레이드를 해야 합니다. 자세한 내용은 Upgrading to new React Native Versions를 참조하세요. 특히 React Native upgrade helper에서 안내하는 대로 android/app/build.gradle에 대한 모든 변경 사항이 적용되었는지 확인해야 합니다. 앱을 업그레이드한 후에는, Hermes로 전환하기 전에 모든 것이 잘 작동하는지 확인해보세요.

RN 호환성에 대한 참고 사항

각 Hermes 릴리즈는 특정 RN 버전을 목표로 합니다. 원칙은 항상 Hermes의 배포를 엄격하게 따르는 것입니다. 버전이 일치하지 않으면 최악의 경우 앱이 즉시 충돌할 수 있습니다.

Windows 사용자를 위한 참고 사항

Hermes는 Microsoft Visual C++ 2015 Redistributable를 필요로 합니다.

android/app/build.gradle 파일을 편집해 아래와 같이 변경하세요.

  project.ext.react = [
      entryFile: "index.js",
-     enableHermes: false  // clean and rebuild if changing
+     enableHermes: true  // clean and rebuild if changing
  ]

또한 ProGuard를 사용하는 경우, proguard-rules.pro 에서 다음 규칙을 추가해야 합니다.

-keep class com.facebook.hermes.unicode.** { *; }
-keep class com.facebook.jni.** { *; }

다음으로, 앱이 한 번 이상 빌드된 경우 빌드를 정리해야 합니다.

$ cd android && ./gradlew clean

끝입니다! 이제 정상적으로 앱을 개발하고 배포할 수 있습니다.

$ npx react-native run-android

Android 앱 번들에 대한 참고 사항

Android 앱 번들은 react-native 0.62.0 이상에서 지원됩니다.

Hermes가 사용되고 있는지 확인하기

최근에 scratch(예: react-create-app)로 새 앱을 만든 경우, 웰컴 뷰에서 Hermes가 활성화되었는지 확인해야 합니다.

JavaScript 에서 Hermes가 사용되고 있는지 확인하기 위해 전역 변수 HermesInternal 를 사용할 수 있습니다.

const isHermes = () => !!global.HermesInternal;

Hermes 의 장점을 확인하려면, 다음과 같이 앱의 배포 빌드와 디플로이먼트를 만들어 비교해보면 됩니다.

$ npx react-native run-android --variant release

이는 빌드 중에 JavaScript를 bytecode로 컴파일하여, 디바이스에서 앱의 시작 속도를 향상시킵니다.

구글 크롬 개발자 도구를 사용하여 Hermes에서 JS 디버깅하기

Hermes는 크롬 인스펙터 프로토콜을 구현함으로써 크롬 디버거를 지원합니다. 이는 크롬 도구가 Hermes, 에뮬레이터 또는 실제 물리적 디바이스에서 실행되는 JavaScript를 직접 디버그하는 데 사용될 수 있다는 것을 의미합니다.

이는 인앱 개발자 메뉴의 디버깅 섹션에 나와있는 "원격 JS 디버깅"과는 매우 다릅니다. "원격 JS 디버깅"메뉴는, 실제 개발 기기(노트북 또는 데스크탑)의 크롬 V8에서 JS 코드를 실행합니다.

크롬은 Metro를 통해 디바이스에서 실행 중인 Hermes에 연결하므로, Metro가 요청을 수신하는 곳이 어디인지 알아야 합니다. 일반적으로 localhost:8081에서 수신하지만, 이는 변경 가능합니다. yarn start 를 실행하면 시작할 때 주소가 표준 출력에 기록됩니다.

Metro 서버의 수신 위치를 알았다면, 다음 단계에 따라 크롬과 연결할 수 있습니다.

1. 크롬 브라우저 인스턴스의 chrome://inspect 로 이동합니다.

2. Configure... 버튼을 사용해 Metro 서버 주소 (일반적으로 위에서 설명한 대로 localhost:8081) 를 추가합니다.

   

3. 이제 디버거를 불러오는 데 사용할 수 있는 "검사(inspect)" 링크가 있는 "Hermes React Native" 타겟이 표시됩니다. "검사(inspect)" 링크가 표시되지 않으면 Metro 서버가 실행 중인지 확인하세요.

   

4. 이제 크롬 디버깅 도구를 사용할 수 있습니다. 예를 들어, 다음에 JavaScript를 실행할 때 중단점(breakpoint)을 설정하려면, 일시 중지 버튼을 클릭하고 JavaScript를 실행시킬 앱의 작업을 발생시키면 됩니다.