크로스 플랫폼/React-Native <JSX> 33

[React-Native] android CodePush 를 통해 업데이트 진행하기

이 글은 앞선 React-Native 프로젝트의 app center 설정이 완료된 전제하에 진행합니다. 설정을 완료하지 않은 경우 먼저 app center sdk 설치 관련 글을 참고하세요. android CodePush 가이드 - 1. [React-Native] android App Center SDK 등록하기 - 2. [React-Native] android CodePush 시작하기 - 3. [React-Native] android CodePush 를 통해 업데이트 진행하기 (현재 글) Staging Developement 진행 먼저 프로젝트 디렉토리에서 appcenter 로그인을 진행합니다. appcenter login ... Logged in as appcenter사용자이름 아래 명령을 통해 st..

[React-Native] Flipper는 무엇인가?

소개 flipper 는 페이스북(메타)팀에서 개발, 운영하는 오픈소스 디버거 입니다. iOS, Android, React-Native 등의 모바일 플랫폼 개발에 활용할 수 있습니다. 일반적으로 데스크탑 어플리케이션 형태로 제공되어 사용할 수 있습니다. React-Native 에서의 Flipper React-Native 프로젝트에서는 기본적으로 Flipper가 설치되어 있습니다. 디버그 모드에서 개발 도중 에러 발생 시 아래와 같은 에러모달을 자주 확인하셨을 텐데요, 이게 flipper의 기능입니다. 데스크탑 앱 형태가 아니라 React-Native에 내장되어 있습니다. Flipper는 gradle 스크립트를 통해 디버그 모드에서만 의존성 목록에 포함되어 있습니다. 위 스크린샷은 metro 서버가 응답하지..

[React-Native] android :app:checkDebugAarMetadata Failed to transform react-native-0.71.0-rc.0-debug.aar 에러 해결

발생 에러 > Task :app:checkDebugAarMetadata FAILED 4 actionable tasks: 4 executed FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':app:checkDebugAarMetadata'. > Could not resolve all files for configuration ':app:debugRuntimeClasspath'. > Failed to transform react-native-0.71.0-rc.0-debug.aar (com.facebook.react:react-native:0.71.0-rc.0) to match attributes {ar..

[React-Native] android gradle Configuration with name 'compile' not found. 에러 해결

발생 에러 FAILURE: Build failed with an exception. * What went wrong: Configuration with name 'compile' not found. * Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights. * Get more help at https://help.gradle.org 해결 방법 이 글에서 제시하는 방법은 빌드 시 사용하는 gradle 버전이 7 이상일 상황에 한합니다. 프로젝트/android 디렉토리를 안드로이드 스튜디어로..

[React-Native] android :app:processDebugResources Could not find com.facebook.fresco:fresco:2.2.0 에러 해결

발생 에러 FAILURE: Build failed with an exception. * What went wrong: Could not determine the dependencies of task ':app:processDebugResources'. > Could not resolve all task dependencies for configuration ':app:debugRuntimeClasspath'. > Could not find com.facebook.fresco:fresco:2.2.0. Searched in the following locations: - https://repo.maven.apache.org/maven2/com/facebook/fresco/fresco/2.2.0/fresco-..

[React-Native] 구 버전(0.63.4) android 프로젝트 빌드하기

React-Native는 정말 많이, 빠르게 변화하고 있습니다. 크로스 모바일 플랫폼이다 보니 android, iOS 생태계의 변경에 민감하고 추가 적인 라이브러리에 매우 의존적입니다. 조금이라도 React-Native 버전이 최신 버전과 차이가 날 경우 늘 새로운 에러를 마주합니다. 이번 글엔 구 버전, 이 글에선 0.63.4 버전을 기준으로 빌드에 성공하는 방법에 대해 설명합니다. android 빌드에 한해 서술합니다. flipper 버전 수정 프로젝트/android 디렉토리를 안드로이드 스튜디오로 열어 gradle.properties 내 flipper 버전을 수정합니다. 0.99.0 으로 버전을 수정해 주세요. 의존성 라이브러리의 호환성 문제(fresco 등)를 해결하기 위해 버전을 수정해야 합니다..

[React-Native] android app:installDebug FAILED INSTALL_FAILED_UPDATE_INCOMPATIBLE 문제 해결

안드로이드 빌드 시에만 해당되는 문제로 빌드 대상이 되는 기기에 동일하지만 빌드 서명키가 다른 어플리케이션이 이미 설치되어 있는 경우 발생하는 에러입니다. 저의 경우 이미 플레이스토어에 올라와 있는 프로덕션 키가 서명된 앱을 설치한 기기에 동일한 앱 빌드(디버그 서명키를 통해)를 시도하여 발생한 문제였습니다. 기존 프로덕션 서명 앱을 지우고 다시 빌드를 시도하니 잘 설치되었습니다. > Task :app:installDebug FAILED 161 actionable tasks: 6 executed, 155 up-to-date ... com.android.ddmlib.InstallException: INSTALL_FAILED_UPDATE_INCOMPATIBLE: Existing package com.iter..

[React-Native] android CodePush 시작하기

앞선 app center sdk가 정상적으로 설치되어 있다는 전제하에 진행합니다. 먼저 app center sdk 설치 관련 글을 참고하세요. android CodePush 가이드 - 1. [React-Native] android App Center SDK 등록하기 - 2. [React-Native] android CodePush 시작하기 (현재 글) - 3. [React-Native] android CodePush 를 통해 업데이트 진행하기 react-native-code-push 설치 react-native 프로젝트에 필요한 프로젝트를 설치합니다. npm 으로 설치 시 에러가 나면 yarn으로 시도해 보세요. npm install --save react-native-code-push App Cente..

[React-Native] android App Center SDK 등록하기

CodePush를 사용하기 위해 먼저 각 운영체제에 맞는 세팅을 해주어야 합니다. 이 글에선 안드로이드 앱에 관한 SDK 세팅에 관해 서술합니다. android CodePush 가이드 - 1. [React-Native] android App Center SDK 등록하기 (현재 글) - 2. [React-Native] android CodePush 시작하기 - 3. [React-Native] android CodePush 를 통해 업데이트 진행하기 SDK 추가 React-Native 프로젝트에 아래와 같이 SDK를 설치합니다. npm install appcenter appcenter-analytics appcenter-crashes --save-exact appcenter-config.json 파일 추가 ..

[React-Native] Recoil 사용하기

상태 관리 라이브러리 Recoil을 React-Native 에서 사용해 보겠습니다. Atom 관리의 대상이 되는 상태 단위입니다. 한 가지의 변수 뿐만 아니라 배열, Object 등 다양한 종류의 자료 구조 또한 Atom이 될 수 있습니다. key는 해당 Atom에 할당되는 고유한 id 입니다. 단순히 상태 업데이트 시 사용되는 것 뿐 아니라 캐싱을 통한 성능 개선을 위해 사용합니다. // 수 const numberTmpState = atom({ key: 'numberTmpState', default: 0, }); // 배열 const ArrayTmpState = atom({ key: 'ArrayTmpState', default: [], }); Selector 생성한 Atom을 활용하기 위해 Select..