[TIL][230124] RN 강의 완강

RN 강의 정리

44. 네이티브 모듈 수정하기

- 라이브러리를 사용할 때 원하는 기능을 추가하고 싶다면 먼저 공 깃헙에서 fork 해서 내 깃헙으로 가져온다. 그리고 package.json에서 버전 부분을 지우고 내 깃헙에 라이브러리가 있는 주소를 적어준다.

- 요즘 자주 쓰는 방법으로 patch-package라는 것도 있다. 

- 네이티브 파일을 수정해야 하기 때문에 해당 언어를 알아야 수정할 수 있다. 

 

45. patch-package 수행하기

- android 네이티브 파일에서는 @ReactMethod 애노테이션이 붙은 게 react 컴포넌트였는데 ios에서는 RCT_EXPORT_METHOD가 그 역할을 한다.

- 추가적인 공부가 많이 필요하다.

- 이대로 npm i를 하면 수정한 게 다 날아가버린다. 그래서 그걸 막기 위해 patch-package를 사용하는 것이다.

  "scripts": {
    "postinstall": "patch-package",
    "android": "react-native run-android",

- package.json의 scripts 부분에 postinstall이라는 부분을 추가해 준다. 저렇게 되면 npm i를 하면 install 하기 전에 항상 patch-package가 실행된다.

npx patch-package 라이브러리 이름

- 위의 명령어를 실행하면 patches라는 폴더가 생기고 안에 어떤 부분이 수정되었는지를 담은 파일이 생성된다.

npm i -g rimraf
rimraf node_modules

- 위의 명령어는 node_modules 폴더를 삭제하는 역할을 한다. 직접 삭제하는 것보다 rimraf를 이용한 게 더 빨리 삭제한다.

 

46. 맥 전용 강의라 넘어간다.

 

47. TMap 연동하기(네이티브 모듈)

- MainApplication.java가 위치하는 폴더에 TMapModule.java와 TMapPackage.java 파일을 생성하여 코드를 적어준 후 MainApplication.java 파일에 packages.add(new TMapPackage())로 TMapPackage를 연결해 준다.

- T Map 공식 문서에 관련 코드가 있다. 

- T Map도 네이버 지도처럼 가입해서 api 신청을 해야 사용할 수 있다. sdk 파일도 설치해줘야 한다. 공식 문서를 확인하자.

- MainApplication.java 파일에서 BuildConfig 부분이 에러라고 빨간 줄이 있을 수 있는데 그냥 두면 된다. 오히려 BuildConfig를 import 하면 오류가 발생한다.

- 만약 npm run android를 했는데 오류가 발생하면 터미널에 $cd android $gradlew clean을 해주자. 아니면 metro 서버를 꺼보자.

import {NativeModules} from 'react-native';
const {TMap} = NativeModules;

interface TMapInterface {
  openNavi(
    name: string,
    long: string,
    lat: string,
    naviVehicle: string,
  ): Promise<boolean>;
}
export default TMap as TMapInterface;

- src/modules/TMap.ts 파일을 만들어서 위의 코드를 적어준다. 이때 TMap이란 이름은 android의 TMapModule.java의 getName()의 return "TMap", ios의 RCT_EXPORT_MODULE(TMap)과 일치해야 한다.

 

48. 스플래시 스크린(react-native-splash-screen)

npm i react-native-splash-screen

- 설치한 후에 라이브러리 공식 문서를 보면서 코드를 추가해줘야 한다.

- 로그인 정보를 가져오면 SplashScreen.hide()를 해준다.

 

49. 앱 아이콘 설정하기

- 안드로이드용: 아래 링크에서 앱 아이콘을 만들어서 android/app/src/main 폴더에 넣어준다.

http://romannurik.github.io/AndroidAssetStudio/icons-launcher.html#foreground.type=image&foreground.space.trim=1&foreground.space.pad=0.25&foreColor=rgba(96%2C%20125%2C%20139%2C%200)&backColor=rgb(255%2C%20255%2C%20255)&crop=0&backgroundShape=square&effects=none&name=ic_launcher 

Android Asset Studio - Launcher icon generator

 

- ios용: 아래 링크에서 앱 아이콘을 만들어서 ios/FoodDeliveryApp 폴더에 넣어준다.

https://www.appicon.co/

App Icon Generator

 

50. 벡터 아이콘(react-native-vector-icons)

npm i react-native-vector-icons
npm i -D @types/react-native-vector-icons

• android/app/src/main/assets/fonts에 node_modules/react-native-vector-icons/Fonts 폴더 복사

- node_modules/react-native-vector-icons/Fonts에서 사용할 아이콘이 포함된 파일만 android/app/src/main/assets/fonts에 복사해 주면 된다.

- 그런데 나는 그동안 android/app/build.gradle 파일에서 아래의 코드를 입력하는 방식으로 벡터 아이콘을 사용했었는데 두 방법 다 가능한 것 같다.

project.ext.vectoricons = [
    iconFontNames: [ 'MaterialCommunityIcons.ttf', '왼쪽과 같이 사용할 아이콘이 포함된 파일.ttf' ]
]

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

- 사용할 수 있는 아이콘 목은 아래 링크를 참고하면 된다.

https://oblador.github.io/react-native-vector-icons/

react-native-vector-icons directory

- font, image, video와 같은 정적 파일이 용량을 되게 많이 차지하기 때문에 최대한 줄이자. 코드는 큰 영향이 없다.

 

51. 이미지 그리드 만들기(react-native-fast-image)

npm i react-native-fast-image

- Image 컴포넌트가 있지만 느리기 때문에 이미지를 여러 개를 한 번에 보여줄 때 성능이 더 좋은 fast-image를 사용한다.

- fast-image가 빠른 이유는 이미지 파일을 계속 다시 읽지 않고 메모리에 캐싱하고 있어서 빠른 것이다. 

- react navigation의 tab 같은 경우 한번 마운트 하면 언마운트하지 않는다. 하지만 화면 전환할 때 언마운트가 필요한 경우도 있다. 다른 탭으로 갈 때 언마운트되게 하고 싶다면 tab의 options에 unmountOnBlur: true로 해준다.

 

52. 보너스: sentry, react-native-upgrade-helper

- sentry를 사용하면 나중에 배포했을 때 유저가 사용하면서 발생하는 에러들을 수집해서 상세하게 알려준다.

- 리액트 네이티브는 자주 버전 업그레이드를 하는데 react-native-upgrade-helper를 사용하면 쉽게 최신 버전으로 따라갈 수 있다.

 

53. 맥 전용 강의라 넘어간다.

 

54. FCM 설정하기

- 파이어베이스를 이용하여 푸시 알림과 구글 애널러틱스 기능을 사용할 것이다.

npm i @react-native-firebase/analytics @react-native-firebase/app @react-native-firebase/messaging
npm i react-native-push-notification @react-native-community/push-notification-ios
npm i -D @types/react-native-push-notification

- 파이어베이스 프로젝트를 생성하여 안드로이드 앱을 만든 후 하라는 대로 그대로 따라 해서 설정한다.

- 프로젝트 설정에서 Node.js의 Admin SDK 새 비공개키를 생성해서 백엔드에 넣어준다.

- 푸시 알림이 remote와 local 두 종류가 있는데 remote는 서버에서 앱으로 푸쉬알림을 보내는 거고 local은 서버와 관계없이 앱 자체에서 정해놓은 시간이 되면 푸쉬알림을 보내는 것이다.

 

55. 푸쉬 알림 코드 작성하기

- 푸쉬알림 코드를 App function 안에 넣으면 안 되고 밖에 넣는다.

- 앱마다 고유한 토큰이 있는데 이걸 서버에 등록해야 서버로부터 푸시 알림을 받을 수 있다.

- 리덕스 코드를 넣어 앱에 접속했을 때 알림을 다시 볼 수 있게 하거나 react navigation과 연동도 가능하다.

https://reactnavigation.org/docs/navigation-container/#linkinggetinitialurl

https://reactnavigation.org/docs/navigation-container/#linkinggetinitialurl

- channel 푸시 알림의 이름, 내용, 중요도, 진동여부, 소리 등을 설정할 수 있다. 보통 여러 개의 channel을 만든다.

- 애뮬레이터에서는 푸시알림이 안 올 수도 있기 때문에 그럴 땐 실제 기기를 연결해서 확인해야 한다.

 

56. 실제 기기 연결하기

- usb 디버깅 허용하고 .env에서 ip주소를 실제 기기 ip로 바꿔준다.

- 실제 기기에서는 애뮬레이터에서 확인이 안 된 에러들이 발생할 수 있으므로 꼭 실제 기기로 확인하자.

 

 

57. 푸쉬 메시지 오는 것 확인!

adb devices
adb -s <기기이름> reverse tcp:8081 tcp:8081

- 만약 실제 기기와 연결이 안 됐다면 adb devices를 통해 기기 이름을 확인하여 연결해 준다.

- 테스트할 때는 앱을 끈 상태에서만 푸시 메시지를 확인할 수 있다.

 

58.은 맥 전용 강의라 넘어간다.

 

59. 코드푸쉬 설정하기

- https://appcenter.ms/ 에서 ios와 android 따로 앱을 만든다.

npm i react-native-code-push
npm install appcenter appcenter-analytics appcenter-crashes
npm i -g appcenter-cli
appcenter login
appcenter codepush deployment list -a zerohch0/food-delivery-app-android -k

- 사이트에서 하라는 대로 설치하고 파일 수정하면 된다.

- 다 되면 key가 두 개가 나온다. staging은 출시 전에 마지막으로 점검하는 단계로, 개발용이고 production은 출시할 것을 말한다.

- 코드 푸시로는 key 값을 수정 못하기 때문에 둘의 key를 바꿔 쓰지 않도록 주의해야 한다.

"codepush:android": "appcenter codepush release-react -a 아이디/앱이름 -d 배포이름 --sourcemap-output --output-dir ./build -m -t 타겟버전",
"codepush:ios": "appcenter codepush release-react -a 아이디/앱이름 -d 배포이름 --sourcemap-output --output-dir ./build -m -t 타겟버전",
"bundle:android": "react-native bundle --assets-dest build/CodePush --bundle-output build/CodePush/index.android.bundle --dev false --entry-file index.js --platform android --sourcemap-output build/CodePush/index.android.bundle.map",
"bundle:ios": "react-native bundle --assets-dest build/CodePush --bundle-output build/CodePush/main.jsbundle --dev false --entry-file index.js --platform ios --sourcemap-output build/CodePush/main.jsbundle.map",

- package.json의 scripts에 위의 내용을 추가해 준다.

- 버전을 마음대로 정하면 코드 푸시가 안될 수 있다. 버전을 잘 설정하자.

- version: "X.Y.Z"에서 Z는 코드 푸시용으로 증가, Y는 앱을 새로 출시할 때 증가, X는 큰 변경사항이 생겼을 경우 증가한다.

- codepush를 적용하는 방법은 App.tsx에서 CodePush를 import 하여 export default CodePush(App);으로 바꾸면 된다.

import codePush from "react-native-code-push";

const codePushOptions: CodePushOptions = {
  checkFrequency: CodePush.CheckFrequency.MANUAL,
  // 언제 업데이트를 체크하고 반영할지를 정한다.
  // ON_APP_RESUME은 Background에서 Foreground로 오는 것을 의미
  // ON_APP_START은 앱이 실행되는(켜지는) 순간을 의미
  installMode: CodePush.InstallMode.IMMEDIATE,
  mandatoryInstallMode: CodePush.InstallMode.IMMEDIATE,
  // 업데이트를 어떻게 설치할 것인지 (IMMEDIATE는 강제설치를 의미)
};
function App() {
}

export default codePush(codePushOptions)(App);

- 거의 항상 강제 설치하게 할 것이다.

- 애플이 앱을 심사하는 중에는 코드 푸시를 하면 안 된다.

 

60, 61, 62.는 맥 전용 강의라 넘어간다.

 

63. 안드로이드 앱 배포과정

- Hermes를 사용하면 시작 시간이 빨라지고 메모리 사용량이 줄어들고 앱 사이즈가 작아지니 사용하면 좋다.

https://reactnative.dev/docs/hermes

Using Hermes · React Native

- android/app/src/build.gradle에서 def enableSeparateBuildPerCPUArchitecture = true로 해주면 CPU별로 apk 파일을 분리해 주기 때문에 apk용량이 작아진다. 플레이 스토어에 배포할 때는 apk 대신에 aad라는 파일을 사용하기 때문에 알아서 cpu에 맞게 쪼개줘서 신경 쓸 필요 없다.

- def enableProguardInReleaseBuilds = true도 해주는 게 좋다. proguard가 자바 바이트 코드를 줄여준다. 하지만 계속 줄이다 보면 오류가 발생할 수 있다. 그래서 proguard-rules에 코드를 너무 줄이면 안 되는 예외인 것들을 적어준다.

- 이후 과정은 나중에 배포할 때 다시 영상을 보며 따라 하는 게 좋을 것 같다.

 

 

---

https://github.com/ZeroCho/food-delivery-app

GitHub - ZeroCho/food-delivery-app