리치윈드 (RichWind)

관련글 1: 맥북 (Mac OS) 카탈리나 기본쉘을 ZSH로 변경하기. ZSH 설치 및 커스터마이징 2020/06/01 - [맥북과 MacOS] - 맥북 터미널을 이쁘게 - ZSH 초간단 설치와 커스터마이징 맥북 프로 iOS 업그레이드 (Catalina and ZSH) 하면서 발생한일 이전 포스팅에서 언급했지만, 본의 아니게 카탈리나로 업그레이드 하고, 덩달아서 기본 쉘을 Bash에서 ZSH로 변경하게 되었다. 이로 인하여, 여러가지 번거로운 일들이 좀 발생하였다. 에구구... 바쁜데 자꾸 번거로운 일이 생기는것 같다. 정작 중요한 일은 이제 부터... ㅜ_ㅜ (이래서 업그레이드 안하려 했건만...) 결론부터 요약하면, Catalina 업그레이드 및 기본쉘 변경 (chsh)을 하게 되면, 환경변수 설정이..

개발 이야기/React-Native 2020. 5. 22. 15:04

[ 리액트 네이티브(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 -..

개발 이야기/React-Native 2020. 4. 25. 01:08

React에서, forEach 내부에 코드가 동작을 하지 않아요. Component가 출력되지 않습니다. 왜 이런 현상이 발생 할까? Map과 Foreach는 다르다. Return Value or Nothing React Native 로 개발을 하다보면, Fetch, AsyncStorage, DB 등으로부터 읽어들인 데이터 즉 Array Data를 처리하거나 중간 결과를 테스트 할 때가 있다. 나중이 되면, 결과물을 Rendering하기 위해서 FlatList 또는 Card Content 등을 사용하겠지만, 바로바로 읽어서 사용할 때는 forEach 와 Map 을 사용할 경우가 종종 발생한다. 이럴 때, map / ForEach로 사용하는 경우, 빈번하게 Map와 ForEach에 대한 오해로 버그를 야기..

개발 이야기/React-Native 2020. 3. 30. 15:39

의외로 firebase 사용하기에 어려움을 겪으신 분들이 많이 계신것 같아서, 오늘은 Firebasefirebase 사용해 보기를 작성해 봅니다. firebase에는 firestore / cloud messanging / remote-confire / realtime database 등 다양한 기능과 서비스를 제공하는데, 그 중에서 firebase/app를 먼저 설정 해야 나머지를 사용할 수 있는 기반이 됩니다. 따라서, 오늘은 firebase/app 설정을 진해행 보겠습니다 저도 기존 프로젝트를 삭제하고, 처음부터 하나씩 진행하면서 포스팅을 올립니다. 1. firebase 가입 https://console.firebase.google.com 으로 방문하셔서 firebase 가입 하시고 로그인 하세요. ..

개발 이야기/React-Native 2020. 3. 28. 10:52

너무 길어서 이전 포스팅에 이어서 진행 합니다. 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 더..

개발 이야기/React-Native 2020. 3. 28. 07:27

import { firebase } from '@react-native-firebase/admob'; AdMob 이 포스팅을 읽고 계시는 여러분.... react-native 를 통하여 앱을 제작하고, 앱스토어에 어플리케이션을 업로드 했거나, 업로드 예정일 것입니다. 그렇다면, 이제 고민이 되는 것은, 바로..... 수익 모바일 앱의 수익 구조는 어떤 것이 있을까? 3가지 유형을 생각해 볼 수 있겠습니다. 유료 애플리케이션, 구독 서비스, 광고 수익 그 밖의 많은 방법이 존재 이 중에서 이번 포스팅에서 광고수익에 대하여 포스팅 하겠습니다. 광고 플랫폼 중에서 가장 잘 알려져 있는 것이 바로 AdMob 입니다. 이러한 이유로 저 또한 AdMob을 선택하여 사용중입니다. (현 시점에서 Facebook 도 사..

개발 이야기/React-Native 2020. 3. 28. 07:23

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..

개발 이야기/React-Native 2020. 3. 27. 16:42

대부분 모바일 앱이 그렇겠지만, 리액트 네이티브 (React Native) 역시 최초 실행 시에만 처리해 주어야 할 일이 있는데요. 예를 들면, View Pager 등이 대표 적인 예입니다. 최초 실행 시에만, 앱에 대한 사용설명 Page를 출력해 주는 경우입니다. 또한, 로컬 데이터를 저장하거나 PUSH Notification 등 에도 , 최초 실행시점에만 초기화 해주는 경우 발생하지요. 이 밖에 많은 경우에 최초 실행 여부를 점검 해야 할 필요성이 존재 합니다. 지금 까지는 발생하는 그 때 그때 component에 적용을 했었습니다만, 시간을 내어서 utils로 정리를 해 봤습니다. 기본적인 방식은 Local Storage에 keyFirstLaunch라는 변수를 만들어 최초 실행 시점에는 true로 ..

개발 이야기/React-Native 2020. 3. 27. 14:36

안녕하세요. 이번 포스팅에서는 React Native의 안드로이드 아이콘 세팅을 간편하게 진행하기에 대하여 소개 드립니다. 안드로이드 앱을 Play Store에 올리거나 출시할 때, 꼭 해야 하는 일 중 하나가 다양 아이콘에 대하여 각각 만들어 주어야 하는 것입니다. 다양한 안드로이드(Android) 버전이 있기 때문에, 각 버전마다 해상도도 다르고, 해상도별로 아이콘이 개별 있어야 하는 건데요.. (이런것은 그냥 안드로이드 자체에서 지원하면 안되나?? 하는 생각이 듭니다. Large Icon 하나 등록 받고 자체 생성 하면 될텐데요.. ㅜ_ㅜ) 여하튼 여러가지 해상도 버전을 만들어서, 앱 안에 포함을 시켜야 합니다. 이 때문에, Android 앱에는 다음과 같이 res 폴더 아래 다양한 해상도의 아이콘..

개발 이야기/React-Native 2020. 3. 27. 10:00

react-native로 어플리케이션을 개발함에 있어서, 다양한 모듈들을 import하여 사용한다. 어플리케이션을 만들다 보면, 사운드의 중요성을 알게 되는데, 이 때문에 개발의 마지막 쯔음에 가면 사운드 효과를 넣기 마련이다. Reat-native에서 사운드를 가장 쉽게 접근하는 방법은, react-native-sound를 사용하는 것이 가장 쉽게 접근하는 방법이라 하겠다. react-native-sound를 적용할 때, 버그 및 어려움을 제공하는 대표적인 예는, 1) resources (사운드 파일)의 위치가 정확하지 않을 때, 2) resource 파일에 대문자나 특수문자가 포함되어 있을 때, 3) resource 파일의 중복이 발생할 때, 4) 초기화 또는 release() 처리하지 못할 때 ==..

개발 이야기/React-Native 2020. 3. 11. 19:05

구글 PlayStore에 게시해 둔 앱을 업그레이드 할 때 고려 사항을 정리해 본다. 1. 스토어 등록 및 버전 업그레이드 check list debug mode ⇒ release model 다시 빌드한다. cd android ./gradlew bundleRelease ./gradew assembleRelease cd .. 릴리즈 모드에서 변경해야 할 변수들을 수정한다. 예를 들면, 광고 ID 변경 (테스트ID -> 실제 ID값) 필요에 따라, code signing keystore 를 다시 점검 한다. 기존 앱과 변경된 앱의 keystore 파일과 패스워드는 동일하도록 유지해 준다. android/app/build.gradle 파일에서 version 정보를 변경한다. play.google.com 에서 ..

개발 이야기/React-Native 2020. 3. 10. 02:45

React Native Vector Icons Application을 개발하다 보면, 그림으로 넣기에는 과도한것 같고, 일반적으로 사용하는 Icon으로 표현하고 싶은 경우가 있다. 대표적으로 아래와 같, 별(star), 와이파이, 음악 및 알람을 표현하는 아이콘들의 경우이다. 이런 용도로 사용하기 적당한 라이브러리로 react-native-vector-icons 가 유용하다. React-Native-vector-icons의 깃허브(github)에 가면, 다양한 경우에 아이콘 (Text Font라고 생각할 수 있다.)을 활용하는 방법이 소개 되어 있다. Github for react-native-vector-icons https://github.com/oblador/react-native-vector-ic..

개발 이야기/React-Native 2020. 3. 9. 22:23

[react native x node_module core] 간혹, node core module이 react native에서 직접적으로 사용되는 경우가 있다. 대표적인 예가 gl-react-native 같은 경우이다. 이 경우에 rn-nodeify 를 사용하면, node core module을 react native에서 사용할 수 있다. https://github.com/tradle/rn-nodeify 연관된 module을 설치한다. nodeify 모듈을 설치 한다. npm i --save-dev rn-nodeify@latest 다음을 실행하여 rn-nodeify를 실행한다. ./node_modules/.bin/rn-nodeify --hack --install

개발 이야기/React-Native 2020. 3. 9. 12:12

요즈음 가장 핫한 개발언어가 무엇이 있나요? ...라고 하면 그 중하나로 React 라고 할 수 있을 정도는 되는 것 같습니다. 2000년대 Javascript에서 JQuery가 나올 때, 세상에 가져온 충격과 비슷하다고 합니다. (??!!) 사실, 저는 이 당시 Front-End에 별 관심이 없어서,, JQuery는 Javascript의 축약버전 정도로 생각하고 크게 염두에 두지 않았었습니다.. 좀더 솔직히 말하면 그 이전 Javascript는 너무 지저분해서 좋아하지 않았었습니다. 그런데 지나고 나서 보니, JQuery가 내가 Web Front End에서 싫어하는 많은 부분을 제거 했던것 이며, 이를 시작으로 다양한 분야로 확장되는 Big-Bang이 일어났던것을 깨달았죠~ 사실, 지금 생각해서 Jqu..

개발 이야기/React-Native 2020. 3. 9. 12:07

1. 개요 1.1 개발하고자 하는 기능/App 설명 1.2 기본적인 설계 환경 구성 개발 환경 구성에 가장 빠른 것은 사실,,, Cloud IDE에 설치되어 있는 이미지를 사용하는 것이다. 다만, Cloud IDE (Goorm IDE , Cloud 9 등)에 세팅된 환경은 Expo를 기반으로 하고 있다. Expo는 다양한 측면에서 매우 훌륭한 도구 이지만, Native Module을 사용하는 경우 정상동작하지 않는다. Expo eject 등을 실행하여 기존 구성된 bundle 구조를 쪼개야 하는데, 이것은 react-native-cli 로 환경을 구성하는 것 보다 더 어려운 작업을 포함한다. 따라서, 간략한 테스트는 Cloud IDE를 사용하여 테스트하고, 실제 개발 작업은 Local 환경에서 react..

개발 이야기/React-Native 2020. 3. 9. 12:04

[ 리액트 네이티브(React-Native)로 안드로이드 앱 출시 하기 ] 1.편) 리액트 네이티브 - 안드로이드 릴리즈 빌드 하기 2.편 ) 리액트 네이티브 - 코드 사이닝 (앱서명) 2020/04/25 - [개발 이야기/React-Native] - 2. 리액트 네이티브 - 코드 사이닝 (code signing - 앱서명) 개요 [ 본문 요약 ] 리액트 네이티브 코드를 릴리즈 빌드 하자. AAB 타입 번들링과 APK 파일 2종으로 구분할 수 있다. 바쁜 독자를 위해서, 안드로이드 버전 번들링과 APK 파일 만들기 명령을 먼저 표기 한다. 또한, 번들링 결과 파일의 위치 또한 참조 하길 바란다. 번들링 >> $ cd android && ./gradlew bundleRelease 결과파일 위치 : ando..

개발 이야기/React-Native 2020. 3. 9. 12:02

React Native X Goorm IDE [ 개요 ] 오늘 " 구름 IDE 환경에서 리액트 네이티브 개발하기"라는 주제로 이야기 해보고자 합니다. 구름 IDE 가입 및 사용은 다음 포스팅을 참조하여 주시기 바랍니다. https://richwind.co.kr/100 웹 IDE(구름IDE)로 개발(Coding)환경을 구축해 보자. TL;DR 개발 입문자 또는 초기단계에서는 웹 IDE로 맛을 보고 시작하자 !! [ 개요 ] 이번 포스팅에서는 웹 IDE 환경에서 개발환경에 대한 이야기를 해 보고자 합니다. 운동이든, 자기개발 이든, IT 분야 richwind.co.kr [ 시작하기 전에 ... ] 시작에 앞서 미리 말씀 드릴 내용은, 우리는 구름 IDE를 사용해서 React-Native 환경을 클릭 몇번만으..

개발 이야기/React-Native 2020. 3. 9. 12:00