Migrating from Firebase JobDispatcher to WorkManager Note: If your app targets Android 10 (API level 29) or above, your FirebaseJobDispatcher and GcmNetworkManager API calls will no longer work on devices running Android Marshmallow (6.0) and above. Follow the migration guides for FirebaseJobDispatcher and GcmNetworkManager for guidance on migrating. Also, see the Unifying Background Task Schedu..
우선 이번 프로젝트의 react native version은 0.61.5이고, 0.63.4 버전으로 업그레이드할 것이다. 업데이트하게 된 계기는... 0.61.5 버전에서 ios 이미지들이 보이지 않는 이슈가 존재했는데, 대안으로 react-native-fix-image를 사용했다. 하지만 해당 버그가 해결된 버전이 나온 터라 언제까지 이 라이브러리에 의존할 수 없었다. 최근 들어서 이 프로젝트들을 하나씩 버전을 올리고 있다. 벌써 3번째... 앞에 두번째 모두 다음 사이트를 참고했다. react native upgrade helper Upgrade React Native applications react-native-community.github.io 그러다 보니 이 부분까지 바꿔줘야 하는 건가?라는 ..
React Native로 android / ios 환경을 개발하면서 아무 생각 없이 pod install & pod update를 남발하고 있었다. 그러던중 최근에 xcode 12.0.1 ARC Semantic Issue Group 관련 이슈를 겪었다. 요약하자면 프로젝트에서 Weibo SDK를 사용하고 있는데 Weibo SDK 함수를 불러오지 못하는 문제였다. 하지만, 협업하고 있는 개발자분 작업환경에서는 잘 동작했다.... 그래서 clean-install, rm -rf ./node_modules, npm install, pod install, pod update를 한참동안이나 남발한 것 같다. 결국에는 이게 문제가 아니었음을 알게된건 한참동안의 삽질 후였다... pod install React Nat..
React Native 환경에서 개발하고, Apple Login 기능이 필요한 상황이라면 RN Apple Login Library를 사용하는 것이 상당히 편하다는 것을 느낄 수 있다. 최근에 Apple Login 작업을 진행하면서 겪었던 이슈와 해결 방법에 대해서 알아보자. 문제 상황 일단 마케팅 용도로 이메일 정보가 필요한 상황에서 문제는 시작되었다. 우선 애플로그인시 나타나는 화면을 살펴보자. 위 이미지처럼 애플로그인을 진행하면 나의 이메일 공유하기, 나의 이메일 가리기 두가지 항목이 존재한다. 이메일을 공유한다면 유저의 실제 이메일 정보 값을 받아올 수 있었고, 가린다면 나름 암호화된 메일 주소를 받게 된다. 여기까지는 순조로웠다. 하지만. 애플 로그인은 보안상 문제로 처음 로그인시에만 email값..
갑자기 왜? Apple Login을 사용해야 하는가 바야흐로... 2019년 09월 12일 애플 뉴스에 따르면 신규앱은 당일부터, 기존의 앱과 업데이트는 2020년 4월 중으로 해당 가이드라인 ( Apple 로그인 관련 )을 따라야 한다고 기재되어 있다. 실제 본인이 참여한 프로젝트에서 애플 로그인 관련해서 2020년 7월 2일 심사에서 거부를 당했다. 실제 IOS 앱 심사를 경험한지는 얼마되지 않았지만, 리젝 사유는 매번 천차만별인 것 같다. 결론은, 앱에서 사용자의 기본 계정을 설정 또는 인증하기 위해 타사 또는 소셜 로그인 서비스 ( facebook, google, wechat 등 )을 사용하는 앱은 Apple 로그인 역시 제공해야 한다. ( 자세한 사항은 링크(4.8) 참조. ) Setting A..
React Native Hook을 사용하게 된 가장 큰 이유는 Hook을 학습하게 된 가장 큰 이유는 Class를 쓰지 않고 function에서 state를 관리할 수 있기 때문이다. 이렇게 된다면 함수형 컴포넌트를 사용하면서, '독립적으로 state를 관리할 수 있게 되고, 테스트가 편해질 것' 이라고 생각했다. 1. 함수형 컴포넌트 상태 관리 ( useState ) Hook을 사용하기 전에는 클래스단에서 state를 선언하고 가감연산 부분에서 setState를 해주었을 것이다. 하지만 Hook을 사용하게 된다면 이제는 함수형 컴포넌트에서도 state를 쉽게 관리할 수 있다. Counter(): JSX.Element { const [count, setCount] = useState(0); const o..
협업을 진행하며 다음과 같은 에러 문구를 보게되었다. SDK location not found. Define location with an ANDROID_SDK_ROOT environment variable or by setting the sdk.dir path in your project's local properties file at '~/android/local.properties'. 문구 그대로 SDK 위치를 찾을 수 없는 것이 문제의 원인이었다. React Native에서는 다음과 같은 방법으로 이 문제를 해결할 수 있다. 1. React Native 프로젝트에서 android 디렉토리로 접근한다. 2. android 디렉토리에서 local.properties 파일을 생성한다. 3. 아래 코드를..
VSCode를 이용하여 react-native 프로젝트를 진행하던 시기, 회사에서는 commit - create pull request - review - merge .. 의 과정으로 협업을 진행하고 있었다. commit과 review 과정을 겪으면서 개발자마다 코딩 스타일이 다르고, 이를 구두 또는 일반 문서로 합일화 하는 것은 어렵다고 생각했다. 그래서 코딩 스타일을 하나의 스타일로 규제할 수는 없을까 라는 생각을 시초로 EsLint, Prettier에 접근하게 되었다. 스타트업에서의 기술부채가 늘어가는 것은 당연한 것이라고 생각하고 있고, 기술부채를 꾸준히 지워가는게 중요하다고 생각한다. 그래서 ESLint를 적용해야겠다. ESLint ESLint is designed to be completely..
React Native Navigation undefined is not an object error
2019. 11. 20.
React Native( 이하 RN ) 개발을 시작하면서 처음 난관에 부딫쳤던 에러가 있다. 개발해야 하는 피쳐는 아래와 같다. rootView안에 FlatList에서 사용하는 CustomView가 존재한다. 이 CustomView에 TouchableOpacity를 씌우고 onPress시에 detail 화면으로 이동해야한다. 이전까지 너무 쉬웠던 navigate였기에 방심했던걸까.. 우선 에러는 다음과 같다. undefined is not an object... stackoverflow를 열심히 뒤져 보아도 모두 같은 내용일 뿐 해결되지 않았다. ( 너무 기본이라서 나오지 않았던 걸까...? ) constructor에 bind하는 방법이며, rootView에서 navigation을 넘겨주는 방법이며.....
사내에서 예약 게시기능을 처음으로 사용해보면서 이게 될까 라는 의문을 많이 가졌습니다. ' 이렇게만 하면 된다고..? ' 라는 생각 이 글 보고 지워버리셨으면 좋겠습니다. 우선 예약 게시 기능을 이용하기 전에 알아 두어야할 중요한 사실은 예약 게시 기능은 업데이트에만 사용할 수 있고, 앱을 처음 게시할 때는 사용할 수 없는 기능입니다. 또한 인앱 상품 페이지를 변경하거나, 가격을 업데이트하거나 '이번 버전의 새로운 기능' 섹션에 출시 노트를 추가한 경우 변경사항이 즉시 게시됩니다. 보다 자세한 사항은 Play Console 고객센터에서 확인하실 수 있습니다. Google Play Console 설정 Google Play Console -> 앱정보 -> 스토어 등록정보 및 가격 및 배포 등 이 섹션에 있는..
Navigation React-Native에서 stack navigator는 앱이 화면간에 전환 및 탐색 기록을 관리 할 수 있는 방법을 제공한다. 앱에서 stack navigator를 하나만 사용하는 경우 웹 브라우저가 탐색 상태를 처리하는 방식과 개념적으로 유사하다. 사용자가 앱과 상호 작용할 때 앱이 탐색 stack에서 항목을 push 및 pop하여 사용자에게 다른 화면이 표시된다. React-Native stack navigator와 웹 브라우저의 차이점은 React Navigation의 stack navigator는 스택의 경로 사이를 탐색 할 때 Android, IOS에서 예상되는 제스처 및 애니메이션을 제공한다. 환경 설정 1. 우선 expo-cli를 설치한다. npm i -g expo-cl..
포스팅을 시작하기 전 저의 경우 회사내에서 앞으로 코드리뷰 과정을 진행하기 위해 기존 보기 힘들었던 자바스크립트 코드에 TypeScript를 적용하기로 했습니다. 기존 안드로이드 개발자라서 타입 명시를 할 수 없었던(?) 자바스크립트가 상당히 어색했는데, 이번 기회에 TypeScript를 바로 적용해보기로 했습니다. TypeScript를 적용한 이유를 설명드리자면, 안드로이드 개발시 혼자 코드를 작성하더라도 타입명시를 꼭 하는 편입니다. 혼자 개발하는 경우에도 작성하다가 이 변수의 타입이 뭐였더라 찾는 경우가 많았습니다. 하물며 대규모 인원이 투입된 프로젝트라면... 더 심하겠죠. 그래서 적용해보기로 했습니다. ( 정말 쉽습니다. 해보세요! ) 적용하기전에 TypeScript '너무 생소한데... 써도되..