[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] 안드로이드 빌드 에러 - 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 연동(구현)하기 (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 포트 변경하는 쉘 명령어를 맨날 까먹어서 기록한다..
[React Native] 응용 프로그램이 예기치 않게 종료되었습니다. (Library not loaded: @rpath/hermes.framework/hermes)
2022. 11. 13. 12:22
Front-end/App
내 개인 맥북(19년 intel pro)으로 RN을 돌렸던 프로젝트 버전이 0.67이었고, 최근에 프로젝트가 생겨 0.70에 맞게 공식문서와 내 환경설정에 비교한 뒤 구동을 해보았다. 위 사진과 같이 되는 듯 싶었으나... 이런 식으로 네이티브 단에서 크러쉬 리포트를 뿜어내며 앱이 튕긴다. Termination Reason를 보면 어떤 사유로 일어났는지 잘 보여준다. 나같은 경우는 hermes 관련 에러가 일어났는데, Podfile을 보면... 관련 설정이 되어있고, 주석으로 설명되어있다. true를 false로 바꿔주고 다시 pod install 후 빌드하면 잘 된다! 추가로 크러쉬 리포트는 네이티브단 설정이 충돌이 나면서 발생하므로, 네이티브 설정을 중점적으로 확인하자. Xcode을 변경하였을 경우에..
[React Native] TextInput 패스워드 폼 적용하기
2022. 11. 7. 20:48
Front-end/App
웹에는 input type="password" 으로 타입에 있는 목록에 찾으면 됩니다. 그러나 RN은 type을 제공하지 않아 당황하여 찾고 있지만 공식문서 읽는 것이 힘들거나 구글링을 하고 있는 코더들과 맨날 까먹는 스스로를 위해 기록합니다. secureTextEntry를 집어넣으면 됩니다.. boolean값이라 그냥 넣으면 true로 적용이 됩니다. https://reactnative.dev/docs/textinput#securetextentry TextInput · React Native A foundational component for inputting text into the app via a keyboard. Props provide configurability for several feat..