좋은앱개발자가되고싶다

현재 앱에는 

이런 기능들이 붙어있다.

현재 firebase crashlytics 를 추가하는데

해당 에러가 발생했다.

내용을 읽어보고

해당 내용들을 추가했다.

추가 후 정상작동한다.

firebase 의 analytics 를 적용했다.

를 사용하고 있었기 때문에, navigation 의 state 가 변경될때마다

화면을 기록하기로했다.

기존 네비게이션 컨테이너에 추가한 코드로, 페이지별 어느 상품인지를 확인하기위해

param도 추가했다.

ios 에서 빌드시 initiateOnDeviceConversionMeasurementWithPhoneNumber 해당 에러가 났는데, 찾아보니

18.5 버전부터 추가가되었다고한다.

현재 사용하고있는 

버전이 18.3 버전이기 때문에

 yarn upgrade @react-native-firebase/analytics@18.3.0

을 통해 버전을 통일시켜주니 해결되었다.

정상 작동하는 것으로 확인 할 수 있다.

RN의 가장 큰 장점을 꼽으라면, 나는 code push를 꼽는다.

hotfix 가 있을때 빠른 대응을 할 수 있기 때문이다.

주로 나는 코드푸쉬를 할때, 코드푸쉬할 것이 있으면, 로딩화면을 띄워주고 업데이트 후 재시작을 하는 편이다.

https://liveforownhappiness.tistory.com/69

이번에 앱업데이트를 하면서 안드로이드에서는 정상작동을 하는 것을 확인했지만,

ios에서 앱업데이트가 되고나서 롤백이 되는 현상을 경험했다.

롤백이 될뿐아니라, 업데이트가 완료되고 앱이 꺼지는 현상을 발견했다.

해결책은 patch-package 였다.

현재 rn 0.72.3 버전을 사용 하고있는데

해당파일에

를 추가해주었다.

정상작동 확인

그냥 TextInput 을 사용하면

이런식으로 가운데 정렬이 된다.

이는 TextInput 의 textAlignVertical prop 로 지정해줄수가 있는데, 

해당 Props 만 textAlignVertical='top' 으로 적용하면 원하는대로 나오지않고

multiline 도 true 값으로 줘야 적용된다.

해당 코드는

이고 적용된 화면은

이다.

react native 로 UI를 그리다보면

해당 에러를 많이 만난다.

이는 스크롤의 축이 같은 Flatlist, scrollview, sectionlist 등의 컴포넌트안에 

또 넣으면 발생하는 에러이다.

horizontal, vertical로 축이 다르면 문제가 되지 않는다.

지금 그리는 화면에서, Flatlist 의

를 사용하지않고

큰 scrollview 안에 같은 스크롤축이 있는 flatlist 를 넣어야 하는 경우가 발생했다.

결국, Flatlist 를 map 형식으로 view 를 찍으면서 큰 scrollview 하나만 사용하도록 변경하였는데,

페이징 처리가 문제였다.

이런식으로, 스크롤을 할때, 남은 offset을 계산하여 pagenation 을 적용했다.

현재 앱에 fastlane 을 적용하여

명령어만 치면 테스트플라이트로 자동 업로드되도록 구축해놓았다.

이틀전에 테스트로 한번 배포 하고 오늘 다시 배포하는데

No signing certificate "iOS Distribution" found

라는 에러가떴다.

앱을 혼자개발하기때문에, p12 certification 파일을 절대로 한번세팅하고 변경하지 않는 내입장에서는

무슨일인지 궁금했다.

일단 로글를 읽어보니 아카이브는 잘되고,

testflight로 업로드 하는 과정에서 문제가 발생한것으로 보아

xcode 로 oraginzer에서 업로드를 해보았다.

xcode 에서는

unable to process request - pla update available

해당 에러가 보였는데,

이는 ios 정책이 업데이트 되고나서

새로운 정책을 확인하지않아서 나는 에러였다.

해당페이지에서 계약을 읽고 확인을 누르면

다시 업로드가 잘된다.

react-native-webview 를 사용하다보면 

안드로이드에선 가끔 앱 크래시가 난다

해결법은 여러가지가 있는데, 

해당 값을 false로 바꿔주거나

(false 로 바꿔주면 해결은 되지만, 다른 화면에서 화면이 안나올수있다. video 등..)

webview style 에 opacity : 0.99, minHeight : 1

을 추가해주는 방법들이다.

상품 소개 페이지에서 html 을 

해당 라이브러리로 뿌려주는데

안드로이드에서 그냥 앱이꺼져버리는 에러가 나왔다.

로그캣으로 보니

fatal signal 11 (sigsegv), code 1 (segv_maperr)

해당 에러문구가 보였다. 아마 webview 를 사용한 react-native-autoheight-webivew 에서 흔히 나는 크래시 에러라고 생각하고

로 해결하였다.

최종코드는

으로

androidLayerType 속성을 주면 react-native-webview 에서도 크래시가 나지 않는다.

이런식으로 onSubmitEditing props 를 통해, onPress 이벤트를 넣을 수 있고, 

해당 키보드의 기본인 '완료' 버튼도 변경할 수 있다.

ios같은 경우 search 로 세팅하면 '검색'으로 나오고, 안드로이드는 돋보기 모양으로 나온다.

많은 RN 개발자들이 화면에 웹뷰를 띄울때, react-native-webview 해당 라이브러리를 사용하는 것으로 알고있다.

하지만 해당 라이브러리는 치명적인 약점이 있다.

종종 안드로이드에서, 웹뷰사용시 app crush 가 나는 경우가있는데, 해당 에러를 찾아보면

의 android:hardwareAccelerated를 false 값으로 바꾸라는 해결방법이 많다.

하지만, 해당 방법으로 문제해결을 하면, 웹뷰에서의 crash는 사라지지만, react-native-video에서 동영상이 소리만 들리고 화면이 나오지않은 버그가 새로 생긴다.

따라서 옳은 workaround 방법으로

android:hardwareAccelerated 는 true 값으로 유지한채,

webview 컴포넌트의 props 에 minHeight : 1, opacity : 0.99 를 넣어주는 방법이 있다.

정확히 왜 해결되는지는 모르지만, 

react-native-webview를 사용시 안드로이드에서 앱꺼짐도 막아주고 비디오도 잘 나오는 해결방법이다.

스플래시화면부터 강렬한 인상을 주고싶은게 모든 앱 제작자의 마음이다.

지금 하고 있는 프로젝트에서는 주 타겟층이 힙한 20/30대기때문에, 많은 애니메이션 효과를 사용하고있다.

앱 로딩시 애니메이션 효과를 위해 내가 고민했던 문제는 총 3가지였다.

1.처음 splash screen 자체에 gif 를 넣는 방법

2.react-native-lottie-splash-screen 을 사용하여 lottie 파일로 넣는방법

3.splash screen 별도의 영상을 띄우는 방법

현재 앱에 최종적으로 적용된 방법은 3번이다.

1.5초 정도가 되는 동영상을 lottie 와 gif 로 변경하여 넣어보니 프레임이 많이 떨어지는 느낌을 받았다.

react-native-splash-screen 과 react-native-video 를 통하여

splash 스크린을 띄우고, 그뒤에 react-native-video 컴포넌트를 띄운다.

해당 컴포넌트에서 동영상이 모두 플레이가되면 앱화면이 나오도록 하였다.

UX적으로, 컴포넌트를 교체하는 것이아닌, 동영상 재생시 컴포넌트 위에 띄워주고 해당 컴포넌트만 제거하는 것이 안정감이 있어서 해당 방법으로 구현하였다.

스플레시 화면에서 동영상으로 넘어가는 부분을 매끄럽게 하기위해서, 동영상 부분의 첫 이미지를 스플래시화면으로 넣어놓는 방법도 있는데

자연스럽게 로고다음에 동영상이 플레이되는 것이 디자인팀에서 예쁜것 같다는 피드백이와서 해당 화면으로 최종 결정 하였다.