APP/React Native12

• 

  [react native windows] native module 연결하기 https://microsoft.github.io/react-native-windows/docs/native-modules React Native for Windows + macOS · Build native Windows & macOS apps with Javascript and ReactBuild native Windows & macOS apps with Javascript and Reactmicrosoft.github.io공식 가이드를 보고 따라했는데 연결이 안돼서 일주일 내내 끙끙댔다. 왜 자꾸 native module이 null이 나오지 고뇌하고 빌드를 정말 수십번 해본 끝에 reddit까지 서치해가며 이유를 알아냈다. Open the Visual Studio solution in the win.. APP/React Native 2024. 12. 30.

• 

  [react native windows] react native windows 실행하기 react native로 윈도우/맥 프로그램을 만들 수 있다는 정보를 발견하고 데스크톱앱을 만들다니 완전 짱이자나? 하는 마음으로 설치 후 구동해봤다. react native windows는 마이크로소프트가 개발한 라이브러리며 native 코드의 언어는 C++ 또는 C#이다. react native로 pc, 앱, 웹 모두 일관되게 개발이 가능하다니 정말 멋지지 않는가근데 react native는 메타가 개발했는데 windows는 왜 마소가..? react native windows의 설치 방법은 다음과 같다. 1. React Native CLI먼저 react native 프로젝트를 CLI를 통해 생성한다. 여기서 주의해야할 점이 있는데 react-native-windows의 버전과 일치해야하기 때문에 최.. APP/React Native 2024. 12. 30.

• [React Native for Windows] Getting started with React Native for Windows 번역 웹 개발에 익숙하다면 React를 분명 알고 있을 것입니다. Facebook에서 개발한 이 프레임워크는 클라이언트 측 웹 경험을 구축하는 데 점점 더 인기를 얻고 있습니다. Vue.js나 Angular와 같은 다른 프레임워크와 달리, React는 웹 애플리케이션의 View 컴포넌트에만 집중합니다.React는 jQuery나 Angular처럼 모든 것을 다루는 완전한 프레임워크가 아닙니다. 이러한 프레임워크들은 HTML 템플릿부터 HTTP 요청을 처리하는 API까지 다양한 작업을 수행할 수 있는 많은 기능을 제공하며 강한 방향성을 가지고 있습니다. 반면, React는 이러한 기능을 제공하지 않기 때문에 일반 JavaScript(혹은 TypeScript를 선호한다면 그것도 가능)나 외부 3rd-party 라이.. APP/React Native 2024. 12. 25.

• [React Native] FCM 오류 해결하기 - ios FCM을 ios에 적용하기 위해서는 android보다 할 일이 많다. 1. 애플 개발자 계정 keys에서 APNs를 생성하고 파일을 다운받아 파이어베이스에 등록하고 keyID를 입력한다. 2. Identifier를 등록하고 team ID를 입력한다. 3. FCM에서 다운받은 GoogleService-Info.plist를 xcode 프로젝트 루트에 넣어준다. 4. xcode에서 +capability -> push Notification을 추가해준다. 5. xcode에서 +capability -> Background Mode (Remote notifications , Background Fetch) 를 추가해준다. 6. xcode의 AppDelegate.mm에 해당 코드를 추가로 작성해준다. #import .. APP/React Native 2024. 4. 3.

• [React Native] FCM 적용하기 - android 파이어베이스 콘솔 프로젝트 생성 https://console.firebase.google.com/u/0/?pli=1 로그인 - Google 계정 이메일 또는 휴대전화 accounts.google.com 파이어베이스 콘솔에서 프로젝트를 생성하고 앱을 추가하여 시작하기를 누른다. 이때 안드로이드와 ios 앱을 등록해야하는데 ios는 몰라도 안드로이드는 패키지 이름을 잘 작성해야 한다. 처음에 다르게 만들어서 나중에 고치려고 하니까 답도 없을 만큼 오류가 발생해서 결국 콘솔에서 지정한 패키지 이름을 처음부터 지정하여 프로젝트를 다시 만들었다. 패키지 이름을 설정하여 RN 프로젝트 만드는 명령어 react-native init MyApp --package-name=[사용할 패키지 이름] android 환경 설정.. APP/React Native 2024. 3. 12.

• [React Native] 큰일날뻔한 proguard-rules 앱을 출시하기 전에 앱에 대한 보안 검사를 맡게 되는데 이때 코드의 난독화를 필수적으로 요구받게 된다. react native에서 android 앱을 패키징할때 코드의 난독화, 최적화, 용량 축소를 가능하게 하는 proguard 옵션이 있는데 간단히 build.gradle 파일에서 true로 변경해주면 적용이 된다. 문제는 그 이후다. 최적화 및 난독화 과정에서 오류가 무수히 많이 발생한다. release 단계까지 갔다는 것은 앱의 배포가 이루어져야 한다는 것인데 배포용 aab 파일에서 문제가 발생하면 눈앞이 새하얘진다. debug 단계와 release의 큰 차이는 역시 proguard의 적용 유무였다. 다행히 문제점을 빨리 파악해서 망정이지 서버쪽 로직이나 앱 자체의 문제였으면 더욱 곤란할뻔 했다. 처.. APP/React Native 2024. 2. 28.

• [React Native] release 버전으로 앱을 설치하고 싶을때.. 전에 release 모드로 배포된 앱이 열리지 않아 aab 파일을 apk로 변환해서 확인하는 방법을 썼는데 굉장히 빙빙 돌아가는 작업이었다.... react-native run-android --variant=release 이렇게 하면 바로 release 버전으로 기기에 설치가 된다 APP/React Native 2024. 2. 28.

• [React Native] webview 사용시 파일 다운로드 - ios react native에서 웹뷰를 사용해 개발할 때 파일을 다운로드 할때가 있다. 클라이언트 단에서는 백엔드가 보내준 다운로드 url을 a 링크를 통해 열면 되는데 안드로이드에서라면 문제 없이 작동하는게 ios에서는 작동이 안될 때가 있다. 웹에서 안될때는 거의 대부분의 문제가 서버쪽 CORS겠지만.. ios webview 파일 다운로드 ios에서 파일을 다운로드 받을 때는 react-native-fs 라이브러리를 사용해야 한다. https://www.npmjs.com/package/react-native-fs react-native-fs Native filesystem access for react-native. Latest version: 2.20.0, last published: 2 years ag.. APP/React Native 2024. 1. 4.

• [React Naitve] react-native-qrcode-scanner 사용시 주의사항 https://www.npmjs.com/package/react-native-qrcode-scanner react-native-qrcode-scanner A QR code scanner for React Native.. Latest version: 1.5.5, last published: 2 years ago. Start using react-native-qrcode-scanner in your project by running `npm i react-native-qrcode-scanner`. There are 27 other projects in the npm registry using react-nat www.npmjs.com react native에서 qr 코드 스캐너를 구현하기 위해 react-n.. APP/React Native 2024. 1. 2.

• [React Native, android] react-native-send-intent 라이브러리 설치 주의사항 웹뷰 개발시 pass인증이나 결제 모듈을 사용하여 외부 앱을 열어야 하는 경우가 있다. 그럴때 react-native-send-intent 라이브러리를 사용하는데 공식 깃허브를 참조해 설치해도 android에서 빌드 오류가 날 때가 있다. https://www.npmjs.com/package/react-native-send-intent react-native-send-intent React Native Android module to use Android's Intent actions for send sms, text to shareable apps, open custom apps, make phone calls and etc. Latest version: 1.3.0, last published: 2 y.. APP/React Native 2023. 12. 29.

• [React Native, android] proguard 설정시 webview 안보이는 문제 해결 플레이스토어에 rn으로 패키징한 앱을 배포하기 위해 aab 파일을 올렸는데 심사에서 거부당했다. 원인은 비정상적인 앱의 중지 (화면이 나오지 않는다거나, 앱이 설치되지 않는다거나, 앱이 실행 중 강제 중지 되는 경우.. 등등) apk로 추출했을 때는 문제가 발생하지 않았기 때문에 aab로 추출시 생기는 문제라고 판단했다. 출시를 해야만 하는 상황이었기 때문에 심사 거부를 당하고 굉장히 당황했지만 일단 aab를 어떻게 해서든 까봐야 한다고 생각했다. 그래서 aab 핸드폰에 우선 설치해서 정말 문제가 있는건지 판단하려고 했다. aab 파일을 기기에 설치하기 https://030822-verbena.tistory.com/entry/android-aab-%ED%8C%8C%EC%9D%BC%EC%9D%84-apk%.. APP/React Native 2023. 12. 29.

• [React Native, android] aab 파일을 apk로 변환하기 aab 파일은 apk와 달리 바로 기기에 깔리지 않는다. https://github.com/google/bundletool/releases Releases · google/bundletool Bundletool is a command-line tool to manipulate Android App Bundles - google/bundletool github.com 여기서 bundletool를 설치한다. 터미널로 해당 bundletool이 설치된 곳으로 이동한 후 java -jar "bundletool-all-[설치한 bundletool 버전 작성].jar" build-apks -—bundle="[aab 파일이 있는 경로/aab파일 이름.aab]" -—output="universal.apks" -—mod.. APP/React Native 2023. 12. 29.