[번역] React Native 개발 과정에서 배운 것 10개

원문 링크: 점프 점프 (국내 방문 불가)
React Native는 사람을 흥분시킨다.iOS와 안드로이드를 개발한 앱은 흥미로운 경험이 됐다.하지만 저와 제 동료인 니콜라스 앨런 브라운은 저희가 개발을 준비하는 앱을 개발하는 데 필요한 요점을 알고 있다고 생각합니다.
비록 우리는 모두 전업을 하고 있지만, 우리는 오래된 인도교 종교 텍스트를 위해 iOS 앱을 만들기로 결정했다.나는 인도의 대학에서 이런 수업을 들은 적이 있는데, 나는 이것이 간단한 숙련공 프로젝트가 될 것이라고 생각한다.다음은 이 앱의 마지막 제품 캡처입니다. 앱스토어에서도 얻을 수 있습니다.
그림 1
그림 2
그림 3
그러나 우리가 이 앱을 개발할 때 우스갯소리처럼 우리는 개발 과정에서 약간의 장애에 부딪혔다.나는 아래에서 우리가 직면하고 있는 10시를 밝게 보여주고 많은 방법을 통해 최종적으로 해결할 것이다.나는 이것이 충분한 시간이 없거나 대형 기업처럼 충분한 자원을 가진 다른 독립 개발자들에게 어느 정도 도움이 될 것이라고 생각한다.
1. 앱을 묶어서 앱스토어에 올리기 전에
여기에는 어색한 어려움이 있지만, 그는 확실히 많은 React Native 개발자들, 특히 Xcode/Swift 개발 경험이 없는 개발자들에게 발생했다.제때에 당신의 앱이 X코드의 시뮬레이터에서 순조롭게 실행될 수 있지만, 당신은 여전히 묶어야 합니다.만약 당신이 앱스토어에 포장해서 제출하지 않았다면 애플 직원들은 아래의 그림과 같이 당신의 제출을 계속 거절할 것입니다.
그림 4
너는 그가 내가 확실히 잘못했기 때문에 두 가지 거절을 했다는 것을 알게 될 것이다.가능한 한 빨리 시작하여 앱을 앱스토어에 발표하는 것은 감동적이지만, 나는 다음과 같은 경우를 제외하고는 이렇게 하는 것을 권장하지 않는다.너는 너의 설비에서 이 가방을 뛸 수 있다.너는 너의 설비에서Test Flight의 베타 테스트를 순조롭게 통과할 수 있다.여기에 당신의 앱을 포장하는 정보가 있습니다.물론 이 문서들 중의 포장 방법은 약간 어렵지만, 우리는 다음에 보충할 것이다.
2. React Native 버전 업데이트
이것은 우리에게 약간의 어려움이 있을 수 있다.우리가 최신 버전으로 업그레이드할 때마다 모든 것에 문제가 생긴다.그리고 우리는 안정적인 버전을 만들기 어려울 것이다.이 문제에 대한 해결 방법은 node 삭제modules라는 폴더는 모든 프로세스를 닫고 npm install를 사용한 다음에 command + shift + k로 전체 앱을 정리하고 command + shift + b로 전체 앱을 재구성한 다음에 command + r로 전체 앱을 다시 실행한다.이 방법을 배우는 것은 재건에 성공하지 못하거나 다음 버전을 사용하려고 하는 과정에서 매우 유용하다.
3. 장면 교환 애니메이션
Reddit Thread에서, 우리는 이 팀에게 왜 Navigator 이 컨트롤을 사용하여 페이지의 이동을 매우 느리게 하는지 물었다.우리가 간단하게 Navigator 컨트롤을 사용하면 인터페이스의 점프 애니메이션이 영원히 끊기고 끊기는 것을 발견할 수 있다.안탁단에서 이 끊기고 끊기는 현상이 더욱 뚜렷하다. 설령 내가 최신 버전을 사용했다 하더라도 마찬가지다.이 React Native 팀은 NAtive 코드에서 JS 애니메이션을 제거하는 것이 해결책이라고 응답했습니다. JS에서 코드가 쌓여 프레임이 떨어졌기 때문입니다.사실상 하나의 모듈InteractionManager이 존재하고 문서 연결이 있는데 Navigator과 InteractionManager가 함께 일할 때 그는 매우 잘 작동할 것이다.그러나 우리의 많은 것들이 더 빠르고 더 원시적인 NavigatorIOS를 사용할 때이 단점은 그가 복잡한 앱(예를 들어 안드로이드, iOS 원생이기 때문)에서 각 인터페이스의 상태를 관리할 수 없다는 것이다.다행히도 우리의 앱은 상당히 간단해서 많은 인터페이스의 루트 교환이 필요하지 않다.앞으로 우리는 Navigator로 그를 대신할 것이다
4. 사용자 분석
전체 개발에서 가장 방해가 되는 것은 사용자에 대한 분석이다. 왜냐하면 우리가 이 위에 너무 많은 시간을 들였기 때문이다.우리가 시작했을 때 우리는 사용자 분석이 우리의 마케팅과 발전 전략의 시장 투입에 커다란 영향을 미칠 것이라는 것을 알고 Google Analytics로 전체 문제를 해결하려고 시도했지만 사용할 수 있는 React Native 패키지를 발견하지 못했다. (이 페이지에서 찾을 수 있다. 클릭해서 점프하기)
마지막으로 우리는 Segment Analytics를 사용하는 우리의 연결 파일을 쓰기로 결정했다.Chris Smothers도 이렇게 한다는 말을 듣고 나는 매우 고무되었다.다음은 작성 방법입니다.

Segment를podfile에 통합하고 통합 방법으로 주소를 연결합니다.React Native에서 podfile을 사용하는 방법: 링크 주소.

같은 부분에서 예를 들면 여기서SEGAnalyticsConfiguration이라고 하는데 설정 파일을 AppDelegate에 넣는 것을 말한다.m 파일에서

Segment 분석 함수를 앱에 쓰기 위한 도움말 모듈을 작성하세요. 요점은 여기에 있습니다.마지막으로 사용자가 로그인하고 어떤 페이지를 열 때 앱에서 AnalyticsHelper 모듈 함수를 호출하여 사용자 데이터를 기록할 수 있다.

5. 애니메이션
애니메이션은 많은 앱에 있어서 좋은 부분이다. 적당한 사용자가 댓글(아이폰에 있는 알림 메시지의 슬라이딩 알림)을 제출하든 인터페이스에 들어갈 때 슬라이드하거나 애니메이션을 슬라이드하든 이것은 절대적으로 중요하다.
또한 React Native의 애니메이션 모듈도 훌륭합니다.동시에 그도 좋은 문서를 가지고 있다.이것은 우리가 사용하는 과정에서 더욱 간단하게 한다.Animatable 모듈을 발견할 때까지 모든 컨트롤에 애니메이션 모듈을 사용할 수 있습니다.만약 당신이 이전에 CSS 라이브러리animated.css를 사용한 적이 있다면 이 애니메이션 라이브러리는 CSS 라이브러리와 매우 비슷하고 그는 사용하기 편리한 애니메이션도 많으며 설정도 매우 편리하다.우리는 화면 맨 위에서 들어오고 메인 화면에 들어갈 때 펼치며 투명도를 낮추는 애니메이션을 사용합니다
6.@notbrent(큰 소의 이름)
이 녀석은 매우 놀랍다. 닉과 내가 문제가 있을 때마다, 인터페이스의 상호작용, 목록의 진입, 슬라이딩 애니메이션, 모든 해결 방법은 Brent Batne에서 나온다.이 녀석은 React Native에 큰 공헌을 한 동시에 많은 예에서 데모, 당신은 그의 Github, Brent, 당신의 도움에 감사합니다:)
7. CodePush 사용
그것을 사용하다.Just Do IT.나를 믿어라, 이것은 가치가 있다.React Native NYC 이후에 CodePush를 사용하는 법을 배웠습니다.Delivery.com에서 Jesse Sessler와 Bruno Barbieri 두 큰 소는 React Native를 Delivery에 통합했다고 말했다.com의 iOS App에서 그들의 소개를 보실 수 있습니다.그들은 회사의 개발에 혁명적인 변화를 일으키기 위해 CodePush를 어떻게 사용하는지 보여 주었다.CodePush는 전통적인 앱 스토어의 업데이트를 거치지 않고 코드를 앱에 직접 push할 수 있다.이것은 사용자가 가지고 있는 앱이 소리 없이 업데이트될 것이라는 것을 의미한다.이것은 또 많은 장점이 있다. 예를 들어 후속 버전을 통해 그들을 교체하는 것이 아니라 프로그램을 끊임없이 리뷰할 수 있다.또한 프로그램의 버그를 신속하게 복구할 수 있습니다.너는 이 문서에서 그것을 어떻게 사용하는지 아주 쉽게 이해할 수 있다.
8. 사회 공유
공유 문제는 우리로 하여금 계속 고민하게 했다. 우리가 앱을 Test Flight에 올렸을 때 같은 문제는 우리가 공유 버튼을 눌렀을 때 이번에는 공유의 옵션 인터페이스를 뛰어넘는 데 오랜 시간이 걸린다는 것이다.우리는 예전에 react-native-activity-view 가방을 사용했고 그를 버리고 싶었다.현재 우리가 사용하고 있는react-native-social-share 그는 다른 것이 없다. 예를 들어 이메일, 트위터 같은 공유, 그는 페이스북밖에 없다. 우리는 공유의 속도가 현저하게 향상되었지만 여전히 좋지 않다는 것을 발견했다.사실은 공유가 영원히 느리고 원생적인 스위프트 앱을 제때에 사용하지만 이것은 미래에 큰 개선이 있을 것이다.
9. App 아이콘, 로드 인터페이스 등
만약 네가 이전에 iOS 개발 경험이 없었다면 이런 것들은 너에게 어느 정도 방해가 될 것이다.다행히도 닉은 전담 모바일 제품 매니저이기 때문에 나는 그에게 이런 문제를 해결하라고 했지만 이것은 여전히 우리를 곤혹스럽게 한다. 설령 네가 앱 아이콘과 마운트 인터페이스를 얻었고 정확하게 작동할 수 있다 하더라도 너는 여전히 다른 종류의 화면을 제출하여 앱 스토어의 제출 인터페이스에 캡처해야 하기 때문이다.나는 이 분야의 전문가가 아니지만, 나는 이 사이트가 서로 다른 아이콘의 사이즈를 얻는 데 매우 도움이 된다는 것을 발견했다.그리고 Ray Wendlich의 레슨 수업도 도움이 된다는 것을 알게 되었습니다. 앱 제출 방식이 일치하게 바뀌어도 그를 두려워할 필요가 없다고 생각합니다.
10.react-native 패키지 명령
우선, 이곳의 내용은 최신 버전에 적용되지 않는다.react-native의 패키지 명령이 새 버전에서 변경되었습니다.현재 그는 매우 많은 다른 옵션을 가지고 있다.다음과 같이 나열됩니다.

-platform iOS인지 안드로이드인지 결정

-bundle-output 이것은 당신main.js의 bundle 파일의 위치입니다.

-dev는 보통false

로 설정해야 합니다

-entry-file는 당신index.ios.js의 파일 위치입니다.

-assetsdest 이것은 당신의 파일 자원을 포장하는 것 같기 때문에 혼란스러운 매개 변수입니다.그러나 많은 경우에 그를 특별히 신경 쓸 필요가 없다.상대적으로, 당신의 node_modules/react-native/packager 경로 아래에 있는 파일은 이미 당신의 파일 자원 (assets) 을 포장했습니다.왜 그가 그렇게 기록을 잘 했는지 나는 잘 모르겠다. 아마도 우리가 포장을 하려고 할 때 관련 정보를 다시 찾기가 매우 번거로울 것이다.어쨌든 node_modules/react-native/packager/react-native-xcode.sh만 운행하면 그는 너의 자원을 모두 포장할 것이다.

총결산
나는 네가 이 글을 좋아하길 바란다. 비록 이렇게 많은 어려움을 겪었지만, 나는 React Native가 미래의 모바일 시장에 아름다운 미래가 있을 것이라고 믿는다.저와 제 동료는 처음부터 끝까지 2개월밖에 안 남았어요.
(번역자 주석, 뒤에 광고가 가득하기 때문에 번역을 하지 않겠습니다.)