본문 바로가기
  • Survival Plan

개발 이야기38

2. 리액트 네이티브 - 코드 사이닝 (code signing - 앱서명) [ 리액트 네이티브(React-Native)로 안드로이드 앱 출시 하기 ] 1.편) 리액트 네이티브 - 안드로이드 릴리즈 빌드 하기 (https://richwind.co.kr/99) 2.편 ) 리액트 네이티브 - 코드 사이닝 (앱서명) : 1) 안드로이드 서명 인증 일단 서명인증 - 코드사이닝 (code signing) - 할 키스토어(keystore) 부터 만들어 주어야 합니다. keytool -genkey -v -keystore [key-name].keystore -alias [key alias] -keyalg RSA -keysize 2048 -validity 10000 $ cd android/app $ keytool -genkey -v -keystore my-release-key.keystore -.. 2020. 4. 25.
애드몹(adMob) 테스트 디바이스 (testDevice) 등록 최근에 AdSense / AdMob의 무효트래픽 관련 건으로, adSense 계정이 정지 당한 사건이 겪었습니다. 확인 결과 AdSense 쪽 문제는 아니었고, AdMob 계정이 원인이었는데, AdSense와 AdMob계정이 하나로 묶여있어서 덩달아서 계정이 정지 당했던 건이었습니다. * 관련 포스팅 : https://windflex.tistory.com/90 AdMob은 테스트 광고를 실행하고, 앱을 출시하기 직전에 실제 광고로 변경해 주어야 하는 구조로 이루어져 있습니다. 이 과정에서, 최종적으로 광고가 동작하는지 확인하게 되는데, 이걸 몇번만 하면 바로 무효트래픽으로 간주 됩니다. ( * AdMob은 모바일앱에 광고를 출력해 주는 플랫폼 입니다.) 문제는 AdMob은 개발은 테스트하는 과정에서, 이.. 2020. 4. 22.
map과 foreach 혼동하지 마라 React Native 로 개발을 하다보면, Fetch, AsyncStorage, DB 등으로부터 읽어들인 데이터 즉 Array Data를 처리하거나 중간 결과를 테스트 할 때가 있다. 나중이 되면, 결과물을 Rendering하기 위해서 FlatList 또는 Card Content 등을 사용하겠지만, 바로바로 읽어서 사용할 때는 forEach 와 Map 을 사용할 경우가 더러 있다. 이런 경우 종종 발생하는 일 중에 하나.... Map 과 ForEach의 용도를 혼동하는 것이다. 결론 부터 이야기하면, Map은 각 Array의 아이템 별로 function을 실행 하고 그 결과를 반환하지만 forEach는 아이템별로 기능만 실행하고 결과값이 반환하지 않는다. 다음과 같은 Data Array가 있다고 하자... 2020. 3. 30.
Single Dex size 에러 - single dex file cannot exceed 64K React-native로 어플을 개발하다 보면, 중간쯤에서 만나는 에러 입니다. 기본적으로 react-native 가 순수 android 개발은 아니다 보니, 이런 저런 라이브러리가 많아서, 순수 JAVA개발 보다는 무거운데, 그러한 이유로, Single Dex Size 문제를 좀 더 빨리 만나게 됩니다. Stack overflow와 개발하는 두더지님의 블로그를 참조해서 아래와 같이 진행해 보았으나, minSdkVersion을 21로 올려주고, multiDexEnabled true 로 설정해 보았습니다. [ android/build.gradle ] android { defaultConfig { ... minSdkVersion 21 2020. 3. 29.
Firebase 사용법 - 초간단 Firebase 사용해 보기 의외로 firebase 사용하기에 어려움을 겪으신 분들이 많이 계신것 같아서, 오늘은 Firebasefirebase 사용해 보기를 작성해 봅니다. firebase에는 firestore / cloud messanging / remote-confire / realtime database 등 다양한 기능과 서비스를 제공하는데, 그 중에서 firebase/app를 먼저 설정 해야 나머지를 사용할 수 있는 기반이 됩니다. 따라서, 오늘은 firebase/app 설정을 진해행 보겠습니다 저도 기존 프로젝트를 삭제하고, 처음부터 하나씩 진행하면서 포스팅을 올립니다. 1. firebase 가입 https://console.firebase.google.com 으로 방문하셔서 firebase 가입 하시고 로그인 하세요. .. 2020. 3. 28.
Google AdMob 광고 적용하기 (2/2) 너무 길어서 이전 포스팅에 이어서 진행 합니다. https://windflex.tistory.com/81 3단계 : Firebase SDK 적용 Credential 파일을 다운로드하여 지정된 위치에 저장하였다면, 이제 Firebase SDK를 실행합니다. 그렇게 하기 위해서는 먼저 @react-native-firebase/app 를 설치합니다. ( * 기존 react-native-firebase 라이브러리가 있는데, 이것은 v5로써 현재버전과는 다르다.) 최신버전 (v6)에서는 Configure와 Native Module 설정이 대폭 감소하였기 때문에 최신 버전을 사용하도록 한다. yarn add @react-native-firebase/app # For iOS cd ios && pod install 더.. 2020. 3. 28.
Google AdMob 광고 적용하기 (1/2) import { firebase } from '@react-native-firebase/admob'; AdMob 이 포스팅을 읽고 계시는 여러분.... react-native 를 통하여 앱을 제작하고, 앱스토어에 어플리케이션을 업로드 했거나, 업로드 예정일 것입니다. 그렇다면, 이제 고민이 되는 것은, 바로..... 수익 모바일 앱의 수익 구조는 어떤 것이 있을까? 3가지 유형을 생각해 볼 수 있겠습니다. 유료 애플리케이션, 구독 서비스, 광고 수익 그 밖의 많은 방법이 존재 이 중에서 이번 포스팅에서 광고수익에 대하여 포스팅 하겠습니다. 광고 플랫폼 중에서 가장 잘 알려져 있는 것이 바로 AdMob 입니다. 이러한 이유로 저 또한 AdMob을 선택하여 사용중입니다. (현 시점에서 Facebook 도 사.. 2020. 3. 28.
리액트 네이티브(React Native) 앱에 Splash Image 적용하기 Splash Image 적용하기 1. Splash 화면용 이미지 준비 어플의 스플래쉬 화면에 사용할 이미지를 준비 합니다. 저는 귀찮은게 싫으므로 이전 포스팅에서 소개 해 드렸던, 웹이미지 에디터에서 간략히 그렸습니다. https://pixlr.com/x/ 여러 해상도 버전을 자동 생성하기위해서 가장 큰 해상도 XXXHDPI( 1280 x 1920 )로 준비해 주세요~ 저는 아래와 같은 Splash 이미지를 준비 했습니다. 자신이 그린 이미지는 저장 후, React Native Project 폴더로 복사 합니다. 더보기 안드로이드 스플래쉬 이미지 해상도 리스트 LDPI: Portrait: 200x320 px Landscape: 320x200 px MDPI: Portrait: 320x480 px Lands.. 2020. 3. 27.
리액트 네이티브 - 앱 처음 실행 확인 하기 대부분 모바일 앱이 그렇겠지만, 리액트 네이티브 (React Native) 역시 최초 실행 시에만 처리해 주어야 할 일이 있는데요. 예를 들면, View Pager 등이 대표 적인 예입니다. 최초 실행 시에만, 앱에 대한 사용설명 Page를 출력해 주는 경우입니다. 또한, 로컬 데이터를 저장하거나 PUSH Notification 등 에도 , 최초 실행시점에만 초기화 해주는 경우 발생하지요. 이 밖에 많은 경우에 최초 실행 여부를 점검 해야 할 필요성이 존재 합니다. 지금 까지는 발생하는 그 때 그때 component에 적용을 했었습니다만, 시간을 내어서 utils로 정리를 해 봤습니다. 기본적인 방식은 Local Storage에 keyFirstLaunch라는 변수를 만들어 최초 실행 시점에는 true로 .. 2020. 3. 27.