분류 전체보기

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

실제 기기에서 리액트 네이티브 앱 실행 방법 윈도우즈 실제 기기에서 리액트 네이티브 앱을 실행하려면 먼저, 안드로이드 스튜디오와 안드로이드 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 로 설정 가능하다.

리액트 네이티브 스플래시 스크린 (Splash Screen) 적용하기

개요 리액트 네이티브에서 스플래시 스크린을 적용하는 방법을 알아보자. 스플래시 스크린 (Splash Screen) 이란? 앱을 켰을 때, 로고 등이 잠시 보였다가 사라지는 화면이다. 스플래시 스크린을 적용하는 이유는? 앱의 정체성을 나타내는 로고를 보여주기 위해 사용자가 알 필요 없는 작업을 가리기 위해 스플래시 스크린을 적용하는 목적에는 앱의 정체성을 나타내는 목적도 있겠지만, 사용자가 알 필요 없는 작업을 가리는 역할도 있다. 보통 로그인 처리가 필요한 앱에서는 앱이 켜진 직후 잠시동안 사용자의 토큰을 확인하고 로그인 처리등을 한다. 이 과정에서 보통 약간의 화면 깜빡임이 발생한다. 약 0.5초간 로그인 창이 떴다가 메인 화면으로 가는 등의 진행 과정이 필요할 수 있다. 또한 초기에 데이터를 받아와야..

리액트 네이티브에서 티맵 사용하는 방법

리액트 네이티브에서 티맵을 사용하는 방법 기본적으로는 공식문서 를 보고 따라하면 된다. 티맵을 이용하기 위해서는 API 키가 필요한데, 이는 이 웹사이트 에서 발급받을 수 있다. 안드로이드 gradle.build 에 의존성 추가하기 implementation files('libs/com.skt.Tmap_1.67.jar') .jar 파일에서 의존성을 가져오도록 설정하면 된다. AndoridManifest.xml 파일에 내용 추가하기 이 부분은 공식문서에 없는데, 작성하지 않으면 에러가 날 수 있다. 위 소스코드는 안드로이드에 TMap 앱이 설치되어 있는지 알아보기 위해 필요하다. 위의 내용이 필요한 이유는 안드로이드 11 이상부터 모든 패키지에 대한 공개가 이루어지지 않고 있기 때문이다. 안..

node_modules 를 수정하고 프로젝트에 적용하는 방법

타인의 NPM 패키지 수정하기 라이브러리를 조금 커스터마이징해서 적용하고 싶을 때 유용한 방법이다. 수정 전 주의사항 최초 제작자의 라이선스 설정을 꼼꼼히 살펴보아야 한다. 간혹 무단 수정하면 안되는 라이브러리도 있다. 최초 제작자가 작성한 라이브러리 이용법을 꼼꼼히 살펴보아야 한다. 내가 원했던 기능이 이미 존재했을 수도 있고, 라이브러리 동작방식을 아는데도 도움이 된다. 수정 방법 1: Github Fork 뜨기 Github 프로젝트 Fork 뜨기 Github 에서 원본 라이브러리 프로젝트를 찾아 Fork 를 떠서 내 계정으로 들고오면 된다. package.json 에서 의존성 주소 수정하기 초기 의존성은 "react-native-nmap": "^0.0.66" 이와 같이 버전 정보만 표기되어 있는데,..

윈도우즈에서 node_modules 빨리 지우기 (rm -rf 사용하기)

문제 윈도우즈 VSCODE 에서 node_modules 폴더를 지우면 너무너무너무 느리게 지워진다. 빠르게 지우려면 rimraf 명령어를 이용하면 된다. 이를 이용하면, 윈도우즈에서도 rm -rf 와 같은 명령을 이용할 수 있다. 해결 npm install -g rimraf rimraf node_modules

리액트 네이티브 이미지 첨부하기 (카메라, 갤러리)

리액트 네이티브 이미지 첨부 리액트 네이티브에서 이미지 첨부 기능을 이용하기 위해서는 2가지 방법이 있다. 카메라 모듈을 사용하여 즉시 찍어 올리기 갤러리에 저장된 이미지를 첨부하여 올리기 설치해야 하는 패키지 react-native-image-crop-picker 패키지를 통해 두 방식 모두 이용할 수 있다. 이미지 리사이즈를 위해 react-native-image-resizer 도 반드시 깔아주는 것이 좋다. 이미지 리사이즈 등 압축을 해주지 않으면, 요즘 스마트폰 카메라 기본 화질이 매우 좋아서 이미지 크기 자체가 매우매우 크기 때문에 서버에 큰 부담이 된다. 사용 방법 이미지 찍어 올리기 import ImageResizer from "react-native-image-resizer"; import..

리액트 네이티브 클라이언트에게 권한 받기

리액트 네이티브 권한 리액트 네이티브에서 권한을 받는 코드는 보통 react-native-permissions 라는 의존성을 통해 구현한다. 그 이유는 안드로이드와 IOS 의 권한 체계가 다른데 그것을 각자 코딩하려면 너무 공수가 많이 들기 때문이다. 그럼에도 네이티브에서 수정해야되는 내용들이 꽤 있다. IOS 네이티브 권한 설정 어떤 권한을 쓸지 명시해주기 ios/Podfile 내부에 아래와 같은 내용을 추가해주면 된다. target 'FoodDeliveryApp' do config = use_native_modules! # Flags change depending on the env values. flags = get_default_flags() permissions_path = &#3..