이 블로그 검색

2019년 12월 21일 토요일

React Native의 끔찍한 버그

React Native로 개발 시, 여러 잔 버그 때문에 많이 고생해 보았는데, 이것 만큼 끔찍했던건 없었던 듯 하다.
 Render 함수 내의 에러(즉, JSX에러)는 React Native 에서 잡아 주지 않는 것이 있다.
 ==> React Native Debugger 로그에도 안뜨고, Metro Bundler 에러 메세지도 없으며, 그냥 앱이 픽 죽어 버리면서 화면이 닫힘..(심지어는 폰 자체에 뻘겋게 뜨는 에러 창에도 안나옴... ;;)

 개발을 하다가 이런 증세가 있음, Render 함수 내의 JSX에 뭔가 잘못 넣은게 있는지 확인하는게 정신 건강에 좋다. (ex, 스타일시트에서 width: 240 인데, width:'240' 으로 했는지...)
(진짜 이런거 한번 걸리면 멘탈 터짐)
하이브리드 모바일 개발에 있어 React Native 의 위상이나 인기가 개인적으로는 거품이거나 지나친 고평가 된게 아닌가 싶다. 기존에 Angular 기반의 Ionic 프레임워크로 개발시에는 프레임워크 내의 잔버그가 하나도 없었다. (정말 1도 없었다.)
 리액트 네이티브로 개발 시, 정말 수많은 짜잘한 프레임워크 내 버그와 싸웠던 기억으로 인해 스스로 내가  만든 앱의 신뢰성에 의구심이 들 정도다.. (과연 이번엔 잘 돌아가는데, 다음에 해도 잘 돌아갈까?)
 React JS의 성공으로 인해 React Native가 별 검증없이 하이브리드 모바일 개발 프레임워크로 급격한 인기를 얻은 듯 싶다.
 만약 React Native와 Ionic 에서 무엇을 메인 개발 프레임워크로 고민하는 개발자가 있다면, 두 프레임워크로 모두 개발을 해본 사람 입장에서 아이오닉을 강하게 추천한다. 리액트 네이티브는 아이오닉에 비해 너무 지저분하다.. 안정성이 많이 떨어진다.. 스트레스로 인한 생명 감소가 느껴지는 프레임워크...ㅋ 누가 이렇게 띄어 놓은거냐...대체 ㅋ




2019년 6월 28일 금요일

[react-native] 안드로이드 signed apk 만드는 방법 (안드로이드 배포 막바지 단계)
* 퍼옴: 출처 - https://iam.holy.kiwi/6


react-native 개발이 웬만큼 끝났다면!! 이제 배포를 해야한다.

안드로이드 apk 파일을 플레이스토어에 배포하기 위해서는 고유한 키스토어를 생성해서 다른 사람이 자신의 앱을 올리지 못하도록 해야한다.

안드로이드 signed apk를 만드는 방법을 알아보자!

1. 키스토어 생성


1
keytool -genkey --keystore <YOUR_KEYSTORE_NAME>.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

cs


2. 생성된 키스토어 파일을 android/app 경로 내에 넣음



3. gradles.properties에 다음 코드를 넣음


1
2
3
4
MYAPP_RELEASE_STORE_FILE=<YOUR_KEYSTORE_NAME>.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=<YOUR_PASSWORD>
MYAPP_RELEASE_KEY_PASSWORD=<YOUR_PASSWORD>
cs


4. app/build.gradle에 다음 코드를 넣음


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
...
android {
    ...
    defaultConfig { ... }
    signingConfigs {
        release {
            if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
                storeFile file(MYAPP_RELEASE_STORE_FILE)
                storePassword MYAPP_RELEASE_STORE_PASSWORD
                keyAlias MYAPP_RELEASE_KEY_ALIAS
                keyPassword MYAPP_RELEASE_KEY_PASSWORD
            }
        }
    }
    buildTypes {
        release {
            ...
            signingConfig signingConfigs.release
        }
    }
}
...
cs



5. 다음 명령어를 통해 개발자 모드를 끈다. (이 작업은 프로젝트 루트 폴더에서 해야 한다. - 다른 곳에서 안됨, 그리고 이 작업을 안하면 만든 apk가 정작 실행이 안됨..;; )


1
2
3
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
cs

6. 다음 명령어를 통해 release apk를 빌드한다.


1
cd android && ./gradlew assembleRelease
cs

7. app-release.apk 파일은 android/app/build/outputs/apk/release 경로에서 찾을 수 있다.

8. 이런 Error 가 나오는 경우가 있음

Execution failed for task ':app:mergeReleaseResources'.Error: Duplicate resources

--> https://stackoverflow.com/questions/53239705/react-native-error-duplicate-resources-android

 그 중 첫 번째 이게 답임

--> After bundling delete the drawable folder from Android Studio. You could find this in android/app/src/main/res/drawable

안드로이드 스트디오까지 갈것 없고 그냥 찾아서 지워주면 됨. drawable 어쩌구 폴더를 전부 다 지워주면 됨.