[React Native] react-native-bottom-sheet, AndroidManifest.xml 내 android:windowSoftInputMode 설정 충돌 방지하기
2023. 6. 7. 20:39
Front-end/App
https://github.com/gorhom/react-native-bottom-sheet gorhom/react-native-bottom-sheet는 React Native로 bottom sheet를 구현할 때 필요한 거의 대체 할 수 없는 필수 라이브러리이다. GitHub - gorhom/react-native-bottom-sheet: A performant interactive bottom sheet with fully configurable options 🚀 A performant interactive bottom sheet with fully configurable options 🚀 - GitHub - gorhom/react-native-bottom-sheet: A performant inte..
[React Native] WebView로 Android PDF 링크 띄우기
2023. 5. 17. 17:53
Front-end/App
안드로이드의 WebView에서 PDF 관련 링크를 띄우려고 할 때, SSL 인증서의 문제로 발생할 수 있다. 기본적으로 WebView는 안전하지 않은 SSL 인증서를 가진 웹 사이트에 대해 경고를 표시하고 해당 사이트에 접속을 차단한다. 차단을 풀고 접속하는 방법에 대해 알아보자. 1. WebView 컴포넌트의 ignoreSslError 추가 2. AndroidManifest.xml에서 보안 설정 변경 매니페스트에서 "android:usesCleartextTracffic" 속성을 추가하여 앱이 텍스트 트래픽을 사용할 수 있게 변경한다. ... 3. 강제로 구글 드라이브로 이동하여 표시하기 const { url } = route.params; const googleDriveUrl = `https://dri..
[React Native] 개발 모드, 배포 모드 설정하기 (RN, Native Android, Native iOS)
2023. 5. 9. 19:30
Front-end/App
깃 브랜치를 분리하여 개발(develop)과 배포(production) 버전의 코드를 나눌 수도 있겠지만, 제공하는 전처리기 변수를 활용하여 분기 처리하는 식으로 관리를 할 수 있다. React Native 코드단에서 뿐만 아니라, 네이티브 코드단에서도 해야하는 경우도 종종 있는데, 간단하니 익혀 활용하면 좋을 듯 하다. 1. React Native React Native에서는 "__DEV__" 전처리기 변수를 사용하여 개발 모드와 릴리즈 모드를 구분한다. "__DEV__" 변수는 React Native에서 내장되어 있는 전역 변수로, 개발 모드에서는 true로 정의되고, 릴리즈 모드에서는 false로 정의된다. if (__DEV__) { // 개발 모드에서 실행되는 코드 console.log('This..
[React Native] rsync error ~ Command PhaseScriptExecution failed with a nonzero exit code 에러 해결법
2023. 5. 4. 18:16
Front-end/App
외부 라이브러리 설치 시, 해당 라이브러리가 Pods의 소스코드를 rsync를 통해 프로젝트를 복제할 때 rsync 명령어 자체에서 실패하여 생기는 문제이다. 에러 문구는 아래와 같다. sent 350748 bytes received 302 bytes 702100.00 bytes/sec total size is 412121 speedup is 1.17 rsync error: some files could not be transferred (code 23) at /AppleInternal/Library/BuildRoots/a0876c02-1788-11ed-b9c4-96898e02b808/Library/Caches/com.apple.xbs/Sources/rsync/rsync/main.c(996) [sende..
[React Native] 안드로이드 빌드 에러 - This version of the Android Support plugin for IntelliJ IDEA (or Android Studio) cannot open this project, please retry with version 20xx.x.x or newer.
2023. 3. 19. 21:51
Front-end/App
(React Native 뿐만 아니라 Native에서도 적용되는 에러이자 해결 방안입니다.) This version of the Android Support plugin for IntelliJ IDEA (or Android Studio) cannot open this project, please retry with version 20xx.x.x or newer. 해당 에러는 현재 사용 중인 Android Studio 지원 플러그인과 실행하려는 프로젝트의 세팅된 플러그인과 호환이 안되기 때문이다. 해결 방안은 Help탭에 "Check for Updates" 검색하여 Android Stduio의 버전을 업데이트하면 된다. 안드로이드 스튜디오는 Visual Studio Code와 같이 여러 프로그래밍 언어를 ..
[React Native] Native Module 연동(구현)하기 (2) - iOS
2023. 3. 15. 00:51
Front-end/App
이어서 iOS도 모듈화해보자. (이전 포스팅 : Android 모듈화 과정 https://cotist.tistory.com/27 ) 아래 경로로 Module의 헤더파일을 생성해주고 코드를 작성. // RCTIOSTestModule.h #import @interface RCTIOSTestModule : NSObject @end 앞서 만든 헤더파일의 같은 경로에 본체인 메인 파일을 생성하자. 내보낼 함수들을 작성하고 모듈을 export하자 (주석 참조) // // RCTIOSTestModule.m // ReactNativeNativeModuleSample // // Created by user on 2023/02/15. // #import "RCTIOSTestModule.h" #import @implemen..
[React Native] Native Module 연동(구현)하기 (1) - Android
2023. 3. 14. 00:04
Front-end/App
Native Module은 Native 코드를 javascript 코드로 연동하는 작업이다. 해당 작업을 하는 이유는 반드시 사용해야 할 SDK 및 라이브러리가 네이티브인 경우가 대다수이다. 다른 이유는 성능 때문일 수도 있겠다. 성능에 관해 무거운 작업일 경우 네이티브로 작업을 하는 경우 아무대로 번들링 되는 과정이 없다 보니 그럴 수도 있겠는데.. (이 경우로 직접 모듈화를 해보지는 않아 개인적인 지표는 없어, 혹시 경험하신 분 있으시면 공유주시면 감사하겠습니다. ㅎㅎ) 간단하게 모듈화하는 과정을 Android부터 해보자. // android/app/src/main/java/com // ModuleTest.java package com.reactnativenativemodulesample; // 앱..
[React Native] 빌드 속도 향상시키기 (캐쉬화)
2023. 3. 12. 15:59
Front-end/App
리액트 네이티브의 고질적 문제점 하나인 답답한 빌드 속도는 한 번이라도 RN 셋업을 경험해봤다면 공감할 것이다. 게다가 외부 라이브러리의 설치의 의존도가 높아지면 그 정도는 심해진다. 원인은 javascript 코드와 native 코드 간의 번들링 과정이 가장 큰 요인이다. 그리고 앱을 끄고 재실행하게 되면 처음부터 다시 모든 파일을 번들링한다. 이는 캐쉬화가 되지 않았기 때문인데, 캐쉬화를 시키게 된다면 캐싱된 소스들은 번들링을 할 필요가 없기 때문에 극단적으로 번들링을 해야 할 소스코드가 줄어든다. 결과적으로 빌드 속도를 향상시켜준다. 캐쉬화 세팅을 통해 생산성을 높여보자! 안드로이드(AOS) (1) Gradle 설정 변경 Android 앱을 빌드할 때 Gradle은 종속성을 다운로드하고 캐시에 저장..
[React Native] Android 실기기 연결 후 빌드하기
2023. 2. 14. 23:58
Front-end/App
실기기 설정에 개발자모드로 변경 후, 개발자옵션 -> USB 디버깅 ON 로 맞춘다. 기기 연결 후 # 연결된 디바이스 리스트 확인 adb devices # 연결된 기기 포트로 타겟팅 변경 adb reverse tcp:8081 tcp:8081 # 실행 npm run android 포트 변경하는 쉘 명령어를 맨날 까먹어서 기록한다..