React Native에서 빌드하는 동안 배운 교훈

Unsplash에 Sean Lim의 사진

React Native에서 앱을 구축하기위한 소프트웨어 엔지니어링 역할 제안을 받았을 때 무엇을 기대해야할지 모르겠습니다.

한편으로는 단일 코드베이스를 사용하여 iOS 및 Android 용 모바일 애플리케이션을 빌드 할 수 있다는 점이 흥미로 웠습니다. 다른 한편으로, 에어 비앤비와 같은 회사가 플랫폼을 테스트했으며 궁극적으로 플랫폼에 대해 결정을 내렸다고 들었을 때, 앞으로 수많은 도전이있을 것 같은 느낌이 들었습니다.

이제 몇 달이 지났으며 여기에 내가 배운 교훈이 있습니다.

올바른 라이브러리 선택

React Native에 대해 처음 알게 된 것 중 하나는 타사 라이브러리의 선택이 종종 제한된다는 것입니다. JavaScript 웹 개발자로서 다양한 프로젝트에 맞게 라이브러리를 선택할 수있었습니다.

React Native 라이브러리는 빌드하기가 더 복잡합니다. 여러 플랫폼에서 작동하려면 iOS 및 Android 용 기본 코드에 대한 지식이 필요합니다. 이 때문에 React Native 라이브러리를 개발하는 사람은 많지 않습니다.

React Native에는 실제로 많은 선택이 없습니다.

GitHub에서 쓸데없는 검색을 한 후에 React Native Community 리포지토리에서 대부분의 앱 라이브러리를 선택했습니다. 이들은 일반적으로 최신 버전의 React와 함께 작동하는 것이 가장 잘 유지되고 거의 보장됩니다. Native Directory는 React Native에서 사용 가능한 항목을 빠르게 검색하는 데 유용한 또 다른 곳입니다.

RN 커뮤니티 저장소 내에서도 모든 라이브러리가 즉시 작동하지는 않습니다. 때로는 레포를 포크하고 내 자신을 약간 조정해야했습니다. 다른 경우에는 앱에 나타나는 특정 버그를 수정 한 버전으로 다운 그레이드해야했습니다. 라이브러리와 관리자가 적은 경우 버전 관리가 더욱 중요합니다.

Flexbox에 익숙해지기

Android 전용으로 10,000 가지가 넘는 유형의 기기를 사용하면 모든 화면 크기에서 작동하는 앱을 만드는 것이 까다로울 수 있습니다. iPhone SE만큼 작고 Pixel 2XL만큼 큰 기기에서 잘 보이도록 앱이 필요했습니다.

처음에는 React Native의 내장 Dimensions 클래스를 사용하여 각 화면의 너비와 높이를 찾아 앱의 스타일을 지정했습니다. 궁극적으로 앱이 성장함에 따라 유지하기에는 너무 복잡했습니다. 대신 Flexbox는 화면 크기에 따라 스타일을 우아하게 처리 할 수있는 열쇠입니다. Flexbox Froggy 도구를 빠르게 실행하는 것이 속도를 높이는 좋은 방법입니다.

Flexbox는 모든 스타일 문제를 해결하지 못했습니다. iPhone X 시리즈의 SafeAreaView와 같은 자체 스타일링 솔루션이 필요한 기발한 화면 크기가 여전히 발생했습니다. 또한 많은 화면에서 다양한 iOS 및 Android 스타일에 조건문을 사용해야했습니다. 그러나 전반적으로 React Native에서 앱을 디자인하는 데 유용한 도구입니다.

전원을 껐다가 다시 켜기

새 타사 라이브러리를 설치하고 반응 네이티브 링크를 실행 한 후 종종 "정의되지 않은 개체가 아닙니다"오류가 발생했습니다. React Native는 설명이 아닌 오류 메시지로 알려져 있습니다. 이것이 무엇을 의미하는지 알아내는 데 시간이 걸렸습니다. 처음에는 도서관에 문제가 있다고 생각했습니다. 또는 내가 설치 한 React Native 버전에서는 작동하지 않습니다.

그런 다음 하나의 특정 라이브러리에 대한 GitHub 문제 스레드의 깊이에서, 내 라이브러리 중 어느 것도 원활하게 작동하지 않는 이유를 마침내 밝히는이 의견을 발견했습니다.

많은 개발자와 마찬가지로 반응 네이티브 런 안드로이드 또는 반응 네이티브 런 iOS를 실행하는 동안 단순히 프로젝트를 다시로드하는 습관을 들었습니다. 핫 리로딩은 시간을 절약하고 앱의 스타일을 미세 조정하고 화면을 체크 아웃하는 데 유용합니다. 그러나 새 라이브러리를 앱에 통합하는 데 도움이되지 않습니다. 모든 시뮬레이터 / 에뮬레이터를 닫고 장치 연결을 끊고 npm을 다시 실행하여 Metro 번 들러를 다시 시작할 때까지 새 라이브러리가 작동하지 않습니다.

다시 말해, 잘못된 오류 메시지없이 타사 라이브러리를 원활하게 통합하려면 모든 것을 껐다가 다시 켜야했습니다.

디버거없이 작업

Pexels의 Mikes 사진 사진

웹 개발자로서 Chrome 디버거에서 버그를 검색하는 연습을했습니다. React Native에서는 Chrome에서 디버깅 할 수있는 능력을 잃기까지 불과 몇 주가 걸렸습니다.

내 앱의 제약 중 하나는 Realm을 기본 데이터베이스로 사용해야한다는 것입니다. 그러나 Realm은 Chrome 디버거를 잠식하여 사용할 수없는 문제를 자주보고합니다. 다른 해결책을 찾아야했습니다.

React Native에는 반응 네이티브 log-android 또는 반응 네이티브 log-ios를 사용하여 console.logs를 터미널에 기록 할 수있는 내장 디버거가 있습니다. 이것은 Android에서 잘 작동하지만 iOS 용이 디버거를 사용하는 데 문제가 발생했습니다. 안드로이드에 대한 개발 우선 접근 방식을 채택하기 시작했습니다. 안드로이드에서 모든 것을 빌드하고 테스트하여 console.logs에 쉽게 액세스 한 다음 필요에 따라 iOS 버전을 조정합니다. 또한 앱 내에서 더 나은 오류 메시지를 작성하는 데 투자하여 사용자와 저 모두에게 이익이되었습니다.

또한 XCode와 Android Studio를 사용하여 디버깅을 실험했지만 궁극적으로 Android 우선 접근 방식이 화면 전환을 최소화하는 가장 쉬운 솔루션이라는 것을 알았습니다.

프로덕션 빌드를 조기에 실행

숙련 된 React Native 개발자는 프로덕션 모드에서 아직 개발 중에 보거나 해결하지 않은 문제는 거의 발생하지 않는다고 말했습니다. 그건 내 경험이 아니 었어 실제 장치에서 프로덕션 빌드를 실행할 때 이전에는 발견하지 못한 몇 가지 오류를 발견 할 수있었습니다.

준비, 설정, 생산

한 가지 예는 탐색이었습니다. 모바일 앱에서 내비게이션을 설정하는 것은 처음에는 머리를 감쌀 까다 로웠으며, 반응 탐색 라이브러리를 설정하여 데이터를 적시에 사용자에게 전달하는 방식을 약간 변경해야했습니다. 실제 기기를 사용하면 사용자가 내 앱을 실행하는 모든 방법 (즉, 새 화면으로 이동하는 시점과 뒤로 버튼을 누르는 시점)을 시뮬레이션하고 그에 따라 탐색을 설정할 수 있습니다.

프로덕션에서 발견 한 또 다른 문제는 위험한 Android 권한과 관련이 있습니다. 최신 Android 휴대 전화에는보다 명시적인 권한 요청이 필요하며 실제 기기에서 테스트 한 후 앱의 사진 갤러리에 올바르게로드하려면 이러한 권한이 필요하다는 것을 깨달았습니다.

결론

React Native는 문서화가 잘되어 있으며 특히 React를 이미 알고 있다면 비교적 빨리 배울 수 있습니다. 단일 코드베이스로 iOS와 Android 모두에서 작동하는 모바일 애플리케이션을 구축하는 것은 대단히 만족 스럽습니다.

위에서 언급 한 문제는 까다로운 부분 이었지만 React Native에서 앱을 개발하는 데 큰 장애물은 없었습니다. 대부분, 나는 모바일 개발의 기발한 일로 내 머리를 감싸고 어색한 오류 메시지에 익숙해 져야했습니다. 이 초기 학습 곡선을지나 Android 우선 접근 방식에 정착 했으므로 개발 속도가 훨씬 빨라졌습니다.

React Native에서 다시 개발할까요? 물론.