Flipper와 Hermes:: 리액트 네이티브 개발자의 성능 최적화

Video

Summary

React Native는 계속해서 기능과 도구를 발전시키고 있기 때문에, 항상 가능한 최신 버전(LTS)을 사용하고 업데이트하는 것이 중요하다. Flipper를 사용하여 디버깅 속도를 향상시키고 auto-linking을 사용하여 종속성 관리를 자동화하고, Hermes를 사용하여 Android 애플리케이션의 시작 시간을 최적화할 수 있다.

Facts

• 🔧 항상 최신 React Native 버전을 사용하는 것이 좋다.
• 🐛 Flipper를 사용하면 더 빠르게 디버깅할 수 있다.
• 📦 Auto-linking으로 종속성 관리를 자동화할 수 있다.
• 📈 Hermes를 사용하여 Android 애플리케이션의 시작 시간을 최적화할 수 있다.

🐰 dongmin,yu

React Native Pedometer 모듈을 개발하던 중 React에서 만든 네이티브 관련 여러 인터페이스들을 접하게 되는데, 이 중에서 flipper라는 라이브러리가 자주 등장합니다. 페이스북에서 만든 것은 알고 있었고 양 플랫폼에에 공통 디버그 인터페이스를 제공하는 도구인 줄만 알았는데, 플리퍼가 기능에도 영향을 미치는 최적화 도구인가요? No Flipper 옵션을 선택할 수 있게 되어있지만, 네이티브 레이어의 시스템 로그를 자바스크립트 브리지 콘솔보다 더 쉽게, 더 많이 볼 수 있다고 해서 관심이 있습니다. 나는 가능한 한 최소한의 필수 라이브러리만을 사용해야 한다는 주의라서, 꼭 필요하지 않다면 끄는 옵션도 고려하는 게 좋을 것 같은데, 설명을 해주면 좋겠다.

🤖 ChatGPT Davinci

플리퍼는 리액트 네이티브 앱을 포함한 다양한 모바일 앱의 디버깅 인터페이스를 제공하는 툴입니다. 개발자들은 앱의 상태, 로그, 네트워크 트래픽 및 기타 정보를 실제 기기와 가상 기기, 데스크톱 컴퓨터 모두에서 검사할 수 있습니다. 플리퍼는 기능적 최적화 도구가 아니라, 주로 디버깅과 테스트를 위한 도구입니다.

리액트 네이티브 개발의 맥락에서 플리퍼는 네이티브 Pedometer API를 사용하는 당신의 네이티브 모듈 프로젝트처럼 리액트 네이티브와 통합된 네이티브 코드를 디버깅하는 데 유용할 수 있습니다. Flipper를 사용하면 네이티브 모듈의 상태를 검사하고 로그를 확인하며 실시간으로 상태를 수정할 수 있으므로 복잡한 문제를 디버깅하는 데 매우 유용합니다.

그러나 dongmin이 언급한 것처럼 플리퍼는 리액트 네이티브에서 작고 가벼운 모듈이 아니기 때문에, 앱에 오버헤드를 추가하고 특히 저가형/구형 기기의 성능을 저하시킬 수 있습니다. 경우에 따라 Flipper를 비활성화하고 React Native Debugger, Xcode 또는 Android Studio와 같은 플랫폼별로 다른 디버깅 도구를 사용하는 것이 더 나을 수 있습니다.

일반적으로 Flipper를 사용하는 것이 좋을지의 여부는 프로젝트의 기술적 요구사항에 따라 달라집니다. 네이티브 모듈을 자주 디버깅하거나 앱 상태에 대한 낮은 수준의 정보(하드웨어 센서나 네트워크 프로토콜 등)에 액세스해야 하는 경우 Flipper가 유용한 도구가 될 수 있습니다. 그러나 주로 JavaScript의 npm 라이브러리들을 조합해서 앱을 개발해 네이티브 디버깅 기능이 필요하지 않다면 성능을 향상시키기 위해 Flipper를 비활성화하는 것이 더 나을 수 있습니다. 리액트 네이티브는 이에 관해 간단한 환경변수 설정으로 옵션을 끌 수 있도록 장치했습니다.

🐰 dongmin,yu

다음으로, 리액트 네이티브 개발에서 자바스크립트 코드 네이티브 적용을 위한 컴파일러를 선택하는 옵션이 있으며, JSC라는 범용적인 컴파일러와 Hermes라는 비교적 최근의 개발 도구 중에서 선택할 수 있습니다. 각 옵션을 선택할 때 개발자의 개발 경험이나 제품의 퍼포먼스에 큰 차이가 있습니까? 동료 개발자의 말에 따르면, 일반 디버깅 툴로는 Hermes 리액트 네이티브 앱은 디버그가 어려워 많이들 사용하지 않는다는데, 최근에 나왔고 오랫동안 성능에 대해 지적받아온 리액트 네이티브의 최신의 결과물인데 어느 정도 성능이 더 나올지 궁금합니다.

🤖 ChatGPT Davinci

리액트 네이티브 앱의 자바스크립트 엔진으로 JSC와 헤르메스 중 하나를 선택하는 것은 개발자 경험과 앱의 성능 모두에 상당한 영향을 미칠 수 있습니다. 다음은 두 엔진의 주요 차이점입니다:

1. 성능: 헤르메스는 일반적으로 JSC보다 빠르며, 특히 저가형/구형 기기에서 더 빠르다. 헤르메스는 자바스크립트 코드 실행 전 네이티브 머신 코드로 컴파일하는 선행 컴파일(AOT)을 사용하는 반면, JSC는 런타임에 코드를 컴파일하는 JIT(Just-in-Time) 컴파일을 사용하기 때문입니다.
2. 메모리 사용량: Hermes는 일반적으로 JSC보다 메모리를 적게 사용하는데, 이는 메모리 제한 장치에서 실행되어야 하는 앱에 장점이 될 수 있습니다.
3. 디버깅: 헤르메스는 기본적으로 자바스크립트 콘솔이나 다른 디버깅 도구에 대한 접근을 제공하지 않아 브레이크 포인트와 같은 간단한 디버그가 어렵고, 따라서 JSC보다 진입장벽이 있는 편이다. 그러나 Hermes를 Flipper와 같은 다양한 향상된 디버깅 도구와 함께 사용한다면 이 문제를 완화하는 데 도움이 될 수 있습니다.
4. 호환성: 헤르메스는 간혹 타사 라이브러리와 호환되지 않으며 이에 따라 기존의 라이브러리의 코드를 직접 수정해서 개발을 해야 할 수도 있습니다. JSC는 자바스크립트 그 자체로 동작하기 때문에 대부분의 npm 모듈과 더 널리 호환되지만, 헤르메스보다 더 느리고 더 많은 메모리를 사용할 수 있습니다.

일반적으로 성능과 메모리 사용이 앱의 주요 관심사라면 헤르메스가 좋은 선택일 수 있습니다. 그러나 간편한 디버깅과 넓은 호환성이 더 중요하다면 JSC가 더 나은 옵션이 될 수 있습니다. 궁극적으로, JSC와 Hermes 중에서 선택하는 것은 당신의 앱과 당신의 개발팀의 특정한 요구에 달려있습니다. 두 엔진 모두 장단점이 있으며, 최상의 선택은 앱의 성능 요구 사항, 디버깅 및 호환성의 필요성, 개발자의 경험 및 선호도와 같은 요소에 따라 달라질 것입니다.