리액트 네이티브 (React Native)

리액트 네이티브 Failed to launch emulator 에러 해결하기

증상 npm run android 실행 시에 에뮬레이터는 켜지나 아래와 같은 에러가 뜬다. error failed to luanch emulator. Reason: emulator exited before boot... warn Please launch an emulator manually or connect a device. Otherwise app may fail to launch 원인 에뮬레이터의 Use detected ADB location 설정이 켜져있어서, adb.exe 파일을 제대로 못찾아서 그렇다. 해결 켜진 에뮬레이터에서 ... 아이콘을 클릭하고 Settings 항목에 들어가 Use detected ADB location 을 체크 해제하면 된다.

리액트 네이티브 푸시 알람 보내는 방법

개요 리액트 네이티브에서 푸시 알람을 보내는 방법을 알아보자. 푸시 알람의 종류 푸시 알람의 종류는 2가지가 있다. 로컬 푸시 알람 푸시 서버를 타지 않고, 앱 자체에서 폰으로 보내는 푸시 알람이다. 로컬 알람도 아래에서 설치하게 될 react-native-push-notification 패키지를 통해 보낼 수 있다. 그러므로 로컬 알람과 원격 알람을 따로 설정할 필요 없다. 원격 푸시 알람 푸시 서버를 타고 보내는 푸시 알람이다. 요즘은 FCM (Firebase Cloud Messaging) 이라는 도구를 이용해 푸시 알람을 보내는 것이 일반적이다. 푸시 알람 개발 프로세스 리액트 네이티브에 알맞은 푸시알람 npm 패키지 설치 FCM (Firebase Cloud Messaging) 에서 키 발급 bui..

리액트 네이티브 초기 프로젝트 생성 방법 (feat. Expo vs React Native CLI )

리액트 네이티브 프로젝트 생성 방법 2가지 리액트 네이티브 프로젝트를 생성하는데는 대표적으로 2가지 방법이 있다. Expo React Native CLI 리액트 네이티브 공식문서 를 보면, 아래 두가지 방법이 나오는데, 하나는 Expo 를 이용한 방법이고, 하나는 React Native CLI 를 이용한 방법이다. 아래는 공식문서 스크린샷이고, 두가지 방법이 분기되어 있다. Expo 의 특징 단점 네이티브 기능 제어를 완벽하게 할 수 없다. Expo 에서 제공하는 기능을 사용해야 한다. 장점 초기 환경 세팅이 간단하다. 빠르게 모바일 웹 개발이 가능하다. 모바일 앱 개발에 친숙하지 않은 사람에게 좋은 도구이다. 앱스토어나 구글 스토어에 출시하기 쉽다. React Native CLI 의 특징 단점 초기 환..

리액트 네이티브 apk 파일 생성하기

APK 파일 생성 방법 - 안드로이드 android/app/build.gradle 수정하기 enableSeparateBuildPerCPUArchitecture def enableSeparateBuildPerCPUArchitecture = true 이 설정은 universal apk 파일 생성이 아닌, CPU 특화된 apk 파일을 생성하기 위해 true 로 설정해준다. apk 파일을 여러개 생성하는 대신 각 안드로이드 CPU 에 최적화된 apk 파일을 생성할 수 있다. enableProguardInReleaseBuilds def enableProguardInReleaseBuilds = true proguard 를 사용할지 선택하는 것이다. 자바 바이트 코드를 줄여준다. 단, 자바 바이트코드를 줄이는 과정에..

리액트 네이티브, 헤르메스(Hermes) 란?

리액트 네이티브, 헤르메스 (Hermes) 란 React Native 에 최적화된 오픈 소스 자바스크립트 엔진이다. 헤르메스를 활성화 시키면, 앱 사이즈도 작아지고 메모리 사용량도 줄고 앱 시작시간도 짧아지는 효과가 있다. 리액트 네이티브 0.70 이후에는 헤르메스가 디폴트라 따로 활성화하기 위해 설정해야 하는 것이 없다. 리액트 네이티브 0.70 이전 버전에서는 이 문서 를 보고 따라하면 된다.

리액트 네이티브 코드 푸시(Code Push) 란, 그리고 코드 푸시 설정법

코드푸시란 react-native 혹은 cordova 로 개발한 앱을 번거로운 심사과정 없이 바로 업데이트 할 수 있도록 해주는 서비스이다. 어떻게 가능한 것일까? 리액트 네이티브 앱은 JS 파일과 이미지로 이루어져 있다. 이는 metro bundler 에 의해 번들링 된다. 이후 플랫폼에 적합한 바이너리 파일인 .ipa 혹은 .apk 파일로 배포된다. 일단 앱이 릴리즈되면, 코드를 변경할 때, 전체 바이너리를 다시 컴파일해야 한다. 컴파일된 바이너리는 당연히 까다로운 심사과정을 다시 거쳐야 한다. 코드푸시 서버는 코드 푸시 서버에 자바스크립트 파일과 이미지를 업데이트 함으로써, 즉시 앱을 업데이트하는 것을 가능하게 한다. 또한 코드 푸시는 유저에게 동작되는 버전을 제공하기 위해, 이전 버전의 업데이트를..

리액트 네이티브 앱 내 실제 기기에서 실행하기

실제 기기에서 리액트 네이티브 앱 실행 방법 윈도우즈 실제 기기에서 리액트 네이티브 앱을 실행하려면 먼저, 안드로이드 스튜디오와 안드로이드 SDK 가 깔려 있어야 한다. C:\Users\컴퓨터이름\AppData\Local\Android\Sdk\platform-tools 이 경로에 adb.exe 라는 파일이 있다. 위의 경로를 환경변수 Path 에 입력해주면 그 이후부터 명령 프롬프트에서 adb 라는 명령어가 동작하게 된다. 휴대폰을 컴퓨터와 연결하고 adb devices 명령어를 치면, 처음에는 unauthorized 라고 표기되어 있고, 휴대폰에서 USB 디버깅을 허용하겠냐는 메세지가 뜬다. 허용 을 누르고, 다시 adb devices 명령어를 치면 이후에는 unauthorized 가 아니라 아래와 같..

리액트 네이티브 안드로이드 앱 빌드 에러 해결하기

문제: Android 12 and higher are required to specify an explicit value for android:exported 안드로이드 앱 빌드 시 아래와 같은 에러 메세지가 뜰 때가 있다. Android 12 and higher are required to specify an explicit value for android:exported Manifest merger failed : android:exported needs to be explicitly specified for . Apps targeting Android 12 and higher are required to specify an explicit value for `android:exported` when..

리액트 네이티브 버전업 방법

리액트 네이티브 버전업 리액트 네이티브는 원래 1달에 1번씩 버전업을 하는게 규칙이었다. 하지만, 요즘엔 구현될 것들은 거의 구현되어 보통 2달에 한번씩 버전업이 있다. 버전업을 위해서는 upgrade-helper 링크에 방문하여, 업그레이드할 버전을 입력하고, 바뀐 부분만 따라쳐주면 된다. 단, rc 가 붙은 버전으로는 업그레이드 하지 않는 것이 좋다. 너무 최신버전으로도 하지 않는 것이 좋다.

리액트 네이티브 센트리 (Sentry) 란?

리액트 네이티브 Sentry 란? 에러, 예외처리를 자동으로 리포팅해주고, 애플리케이션의 퍼포먼스 이슈를 인지한다. @sentry/tracing 패키지를 통해 기본으로 퍼포먼스 모니터링도 이뤄진다. 실무에서는 어떻게 사용될까? 모바일 환경 특성상 수많은 이용자가 각기 다른 기기로 나의 앱에 접속하게 된다. 그나마 IOS 의 경우에는 어느정도 '아이폰', '아이패드' 와 같은 범주가 있지만, 안드로이드의 경우에는 정말 셀 수도 없이 많은 안드로이드 기기가 존재한다. 앱 내부에 Sentry 를 심어두면, 이렇게 다양한 기기에서 나오는 에러나 예외 정보를 리포팅 받을 수 있다. 앱 사용자가 자동으로 내 앱의 테스터가 되어준다. 사용방법 공식문서에 상세히 나와있다.

리액트 네이티브 앱 벡터 아이콘 추가하기 (FontAwesome, Feather ...)

리액트 네이티브 탭 아이콘 넣기 위와 같이 화면 아래에 '오더 목록', 'Delivery', '내 정보' 등의 탭이 있는데 일반적으로 이 부분에는 아이콘을 넣어 기능을 표기한다. react-native-vector-icons 패키지 설치하기 npm install react-native-vector-icons npm install -D @types/react-native-vector-icons폰트 옮기기 node_modules/react-native-vector-icons/Fonts 에 있는 모든 폰트를 android/app/src/main/assets/fonts 밑으로 전부 옮겨주자. 필요한 아이콘 찾아보기 이 링크에서 필요한 아이콘을 찾아볼 수 있다. 소스코드..

리액트 네이티브에서 앱 아이콘 변경하는 방법

리액트 네이티브 앱 아이콘 변경 방법 안드로이드 여기 링크에서 원하는 이미지 혹은 텍스트를 통해 아이콘을 설정할 수 있다. 아이콘 생성 후 압축 해제하고, android/app/src/main 디렉토리 내부에 붙여넣어주면 된다. 아이폰 여기 링크에서 아이폰용 앱 아이콘을 만들 수 있다. XCode 로 설정 가능하다.